Outiref

Code source de l'URL : https://www.abajim.com/manuels

<style>
    .position-relative {
        position: relative;
    }

    .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgb(255, 255, 255);
        font-size: 3rem;
        opacity: 0.9;
        cursor: pointer;
        animation: beat 1.5s infinite;
    }

    .play-icon i {
        color: rgba(37, 190, 200, 1);
        font-size: 3rem;
    }

    .manual-image {
        width: 100%;
        height: 90%;
        border-radius: 10px;
    }

    .manuels-bloc {
        position: relative;
        width: auto;
        height: auto;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .manuels-container {
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
</style>



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


<head>
    <meta charset="utf-8">
<!-- CSRF Token -->
<meta name="csrf-token" content="22Rgz3tbMqOQJBsOV2lmWoMhhD3pNbmQhOqJsued">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta name='robots' content="index, follow, all">

    <meta name="description" content="تمتع بنسخ تفاعلية للكتب المدرسية من السنة الأولى الى السنة السادسة ابتدائي مرفقة باصلاح جميع عناصر الكتاب من خلال فيديوهات بأساليب تدريس متنوّعة">
    <meta property="og:description" content="تمتع بنسخ تفاعلية للكتب المدرسية من السنة الأولى الى السنة السادسة ابتدائي مرفقة باصلاح جميع عناصر الكتاب من خلال فيديوهات بأساليب تدريس متنوّعة">
    <meta name='twitter:description' content='تمتع بنسخ تفاعلية للكتب المدرسية من السنة الأولى الى السنة السادسة ابتدائي مرفقة باصلاح جميع عناصر الكتاب من خلال فيديوهات بأساليب تدريس متنوّعة'>

<link rel='shortcut icon' type='image/x-icon' href="https://www.abajim.com/store/1/abajimLOGO.png">
<link rel="manifest" href="/mix-manifest.json?v=4">
<meta name="theme-color" content="#FFF">
<!-- Windows Phone -->
<meta name="msapplication-starturl" content="/">
<meta name="msapplication-TileColor" content="#FFF">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-title" content="">
<link rel="apple-touch-icon" href="https://www.abajim.com/store/1/abajimLOGO.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- Android -->
<link rel='icon' href='https://www.abajim.com/store/1/abajimLOGO.png'>
<meta name="application-name" content="">
<meta name="mobile-web-app-capable" content="yes">
<!-- Other -->
<meta name="layoutmode" content="fitscreen/standard">
<link rel="home" href="https://www.abajim.com">

<!-- Open Graph -->
<meta property='og:title' content='الكتب المدرسية'>
<meta name='twitter:card' content='summary'>
<meta name='twitter:title' content='الكتب المدرسية'>

<meta property='og:site_name' content='https://www.abajim.com'>
<meta property='og:image' content='https://www.abajim.com/store/1/abajimLOGO.png'>
<meta name='twitter:image' content='https://www.abajim.com/store/1/abajimLOGO.png'>
<meta property='og:locale' content='https://www.abajim.com/en_US'>
<meta property='og:type' content='website'>



    <title>
        الكتب المدرسية  
    </title>

    <!-- General CSS File -->
    <link rel="stylesheet" href="/assets/default/vendors/sweetalert2/dist/sweetalert2.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/toast/jquery.toast.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/simplebar/simplebar.css">
    <link rel="stylesheet" href="/assets/default/css/app.css">
    <!-- font awesome -->
   <link rel="stylesheet" href="/assets/vendors/fontawesome/css/all.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap"
        rel="stylesheet">
            <link rel="stylesheet" href="/assets/default/css/rtl-app.css">
    
        <link rel="stylesheet" href="/assets/default/vendors/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/owl-carousel2/owl.carousel.min.css">
    
    <style>
         @font-face {
                      font-family: 'main-font-family';
                      font-style: normal;
                      font-weight: 400;
                      font-display: swap;
                      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/store/1/fonts/montserrat-regular.woff2) format('woff2');
                    }@font-face {
                      font-family: 'main-font-family';
                      font-style: normal;
                      font-weight: bold;
                      font-display: swap;
                      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/store/1/fonts/montserrat-bold.woff2) format('woff2');
                    }@font-face {
                      font-family: 'main-font-family';
                      font-style: normal;
                      font-weight: 500;
                      font-display: swap;
                      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/store/1/fonts/montserrat-medium.woff2) format('woff2');
                    }@font-face {
                      font-family: 'rtl-font-family';
                      font-style: normal;
                      font-weight: 400;
                      font-display: swap;
                      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/store/1/fonts/Vazir-Regular.woff2) format('woff2');
                    }@font-face {
                      font-family: 'rtl-font-family';
                      font-style: normal;
                      font-weight: bold;
                      font-display: swap;
                      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/store/1/fonts/Vazir-Bold.woff2) format('woff2');
                    }@font-face {
                      font-family: 'rtl-font-family';
                      font-style: normal;
                      font-weight: 500;
                      font-display: swap;
                      src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/store/1/fonts/Vazir-Medium.woff2) format('woff2');
                    } :root{
}

    </style>


        <!-- Meta Pixel Code -->
    <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '669164299406182');
    fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=669164299406182&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Meta Pixel Code -->
        <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-MLJC5849');</script>
    <!-- End Google Tag Manager -->
</head>

<body class="rtl">
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MLJC5849"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <div id="app">

                    <link href="/assets/default/css/font.css" rel="stylesheet">
<link rel="stylesheet" href="/assets/vendors/fontawesome/css/all.min.css" />



<style>
    .nav-elements {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-weight: bolder;
        font-family: Tajawal, sans-serif;
    }

    #search-form {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #search-input {
        position: absolute;
        left: 100%;
        top: 0;
        display: inline-block;
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        animation: close 0.5s forwards;
        z-index: 2;

    }

    @keyframes  close {
        from {
            width: 200px;
        }

        to {
            width: 0;
        }
    }

    #search-input.show {
        width: 200px;
        padding: 0.375rem 0.75rem;
        display: block;
        animation: shrink 0.5s forwards;

    }

    .search-btn {
        border: 2px solid #22bec8;
        border-radius: 5px;
        background: none;
        color: #22bec8;
        width: 70px;
    }

    /* when open the search with animation */
    @keyframes  shrink {
        from {
            width: 0;
        }

        to {
            width: 200px;
        }
    }

    /* when on mobile open the search below */
    @media (max-width: 991px) {
        #search-input {
            left: 0;
            top: 100%;
            display: inline-block;
            overflow: hidden;
        }

        #search-input.show {
            width: 200px;
            padding: 0.375rem 0.75rem;
            display: block;
            animation: shrink 0.5s forwards;

        }

        @keyframes  close {
            from {
                width: 200px;
            }

            to {
                width: 0;
            }
        }

        @keyframes  shrink {
            from {
                width: 0;
            }

            to {
                width: 200px;
            }
        }

        .search-btn {
            width: 100%;

        }
    }

    .nav-link.topbar:hover {
        color: #22bec8;
        background-color: rgba(34, 190, 200, 0.1);
        border-radius: 5px;
    }

    .nav-link.topbar.active {
        color: #22bec8 !important;
    }

    .drawer-logo {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        padding: 10px;
        width: 100%
    }

    .drawer-logo img {
        max-width: 120px;
        margin: auto;
    }

    * {
        font-family: 'Tajawal', sans-serif !important;
    }
</style>
<div class="navbar-overlay" id="navbarOverlay"></div>
<div id="navbarVacuum"></div>
<nav id="navbar" class="navbar navbar-expand-lg navbar-light">
    <div class="nav-elements">
        <div class="d-flex align-items-center justify-content-between w-100">

            <button class="navbar-toggler navbar-order" type="button" id="navbarToggle" aria-label="Navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand navbar-order d-lg-block d-none" href="/">
                                    <img src="/store/1/abajim.png" style="width: 82%;height: 123%!important;"
                        class="img-cover" alt="الشبكة التعليمية أبجيم">
                            </a>


            <div class="mx-lg-30 d-none d-lg-flex flex-grow-1 navbar-toggle-content" id="navbarContent"
                style="align-items: center;justify-content:center">
                <div class="navbar-toggle-header text-right d-lg-none">
                    <button class="btn-transparent" id="navbarClose" aria-label="Close">
                        <i data-feather="x" width="32" height="32"></i>
                    </button>
                </div>
                                    <ul class="navbar-nav mr-auto d-flex align-items-center">
                                                                                    <li class="nav-item">
                                    <a class="nav-link topbar"
                                        style="font-size: 18px !important; margin-left: 5px; font-weight: 500;"
                                        href="/">
                                        الرئيسية
                                    </a>
                                </li>
                                                            <li class="nav-item">
                                    <a class="nav-link topbar"
                                        style="font-size: 18px !important; margin-left: 5px; font-weight: 500;"
                                        href="/instructors">
                                        معلّمينا
                                    </a>
                                </li>
                                                            <li class="nav-item">
                                    <a class="nav-link topbar                                                                          active"
                                        style="font-size: 18px !important; margin-left: 5px; font-weight: 500;"
                                        href="/manuels">
                                        الكتب المدرسيّة
                                    </a>
                                </li>
                                                            <li class="nav-item">
                                    <a class="nav-link topbar"
                                        style="font-size: 18px !important; margin-left: 5px; font-weight: 500;"
                                        href="/concours-page">
                                        المناظرة
                                    </a>
                                </li>
                                                            <li class="nav-item">
                                    <a class="nav-link topbar"
                                        style="font-size: 18px !important; margin-left: 5px; font-weight: 500;"
                                        href="/contact">
                                        اتصال
                                    </a>
                                </li>
                                                    
                    </ul>

                    <ul class="navbar-nav ml-auto d-lg-none">
                        <li class="nav-item">
                            <a href="/login" class="nav-link py-5 px-10 mr-10 text-dark-blue font-16 font-weight-bold"
                                style="border: 2px solid #22bec8;width:fit-content;font-family: 'Tajawal', sans-serif; ">تسجيل الدّخول</a>
                        </li>
                        <li class="nav-item">
                            <a href="/register"
                                class="nav-link py-5 px-10 d-lg-flex btn btn-sm text-white btn-primary nav-start-a-live-btn"
                                style="background-color: #22bec8;font-size: 16px;font-family: 'Tajawal', sans-serif; ">سجل
                                مجانا</a>
                            <a href="/Instructor/register"
                                class="nav-link py-5 px-10 d-lg-flex btn btn-sm btn-primary text-white nav-start-a-live-btn ml-5"
                                style="font-family: 'Tajawal', sans-serif; ">
                                كن مدرسًا
                            </a>
                        </li>
                    </ul>
                    <div class="d-lg-none text-center drawer-logo mt-auto">
                        <a href="/">
                                                            <img src="/store/1/abajim.png" class="img-fluid" alt="Site Logo">
                                                    </a>
                    </div>

            </div>

            <div class="nav-icons-or-start-live navbar-order">
                <div class="xs-w-100 d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center">
                        <div class="search-bar d-none d-lg-flex align-items-center">
                            <form action="/search" method="get" class="d-inline-flex" id="search-form">
                                <input type="text" class="form-control" id="search-input" name="search"
                                    placeholder="فيما تفكّر؟" style="display: none; width: 0;">
                                <button id="search-btn" type="button" aria-label="Search"
                                    class="py-5 px-10 btn btn-sm btn-primary search-btn">
                                    <i class="fas fa-search"></i>
                                </button>
                            </form>
                        </div>
                        <a class="d-lg-none" href="/">
                            <img src="/assets/default/icons/logo_min.png" alt="Site Logo" style="width: 40px;">
                        </a>


                        <div class="d-none d-lg-flex align-items-center">
                            <a href="/login"
                                class="py-5 px-10 d-lg-flex btn btn-sm btn-primary nav-start-a-live-btn ml-10">تسجيل الدّخول</a>
                            <a href="/register"
                                class="py-5 px-10 d-lg-flex btn btn-sm btn-primary nav-start-a-live-btn  ml-10"
                                style="background-color: #22bec8;font-size: 16px">سجل مجانا</a>

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

</nav>

        
        
            <section class="site-top-banner search-top-banner opacity-04 position-relative">
        <img src="/store/1/default_images/manuels_cover.png" class="img-cover" alt="" />
        <div class="container h-100">
            <div class="row h-100 align-items-center justify-content-center text-center">
                <div class="col-12 col-md-9 col-lg-7">
                    <div class="top-search-categories-form">
                        <h1 class="text-white mb-15" style="font-size: 3rem">الكتب المدرسية</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

    
    <section class="home-sections home-sections-swiper container position-relative">
        <div class="mt-30 px-20 py-15 rounded-sm shadow-lg border border-gray300">

            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"
                style="justify-content: center;align-items:center;align-self:center;justify-self:center">
                <li class="nav-item" role="presentation">
                    <a class="nav-link tab-link active" id="pills-first-tab" data-toggle="pill" href="#pills-first"
                        role="tab" aria-controls="pills-first" aria-selected="true"
                        data-level="6">السنة الأولى</a>
                </li>

                <li class="nav-item" role="presentation">
                    <a class="nav-link tab-link" id="pills-second-tab" data-toggle="pill" href="#pills-second"
                        role="tab" aria-controls="pills-second" aria-selected="false"
                        data-level="7">السنة الثانية</a>
                </li>

                <li class="nav-item" role="presentation">

                    <a class="nav-link tab-link" id="pills-third-tab" data-toggle="pill" href="#pills-third" role="tab"
                        aria-controls="pills-third" aria-selected="false" data-level="8">السنة الثالثة</a>

                </li>

                <li class="nav-item" role="presentation">

                    <a class="nav-link tab-link" id="pills-fourth-tab" data-toggle="pill" href="#pills-fourth"
                        role="tab" aria-controls="pills-fourth" aria-selected="false"
                        data-level="9">السنة الرابعة</a>

                </li>

                <li class="nav-item" role="presentation">
                    <a class="nav-link tab-link" id="pills-fifth-tab" data-toggle="pill" href="#pills-fifth" role="tab"
                        aria-controls="pills-fifth" aria-selected="false"
                        data-level="10">السنة الخامسة</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link tab-link" id="pills-sixth-tab" data-toggle="pill" href="#pills-sixth" role="tab"
                        aria-controls="pills-sixth" aria-selected="false"
                        data-level="11">السنة السادسة</a>

                </li>

            </ul>

            
            <div class="tab-content" id="pills-tabContent"
                style="justify-content: center;align-items:center;justify-self:center; border-radius:10px;padding:20px;">
                                    <div class="tab-pane fade show active" id="pills-first"
                        role="tabpanel" aria-labelledby="pills-first-tab">
                        <div class="manuels-container">
                            <div class="manuels-bloc">
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal1">
                                            <img src="1_ere/anisi_kiraa.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal2">
                                            <img src="1_ere/anisi_tamarine.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal3">
                                            <img src="1_ere/riadhiat_1.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                            </div>
                        </div>
                    </div>
                                    <div class="tab-pane fade" id="pills-second"
                        role="tabpanel" aria-labelledby="pills-second-tab">
                        <div class="manuels-container">
                            <div class="manuels-bloc">
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal4">
                                            <img src="2_eme/riadhiat_thania/riadhiat_thania.png" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal5">
                                            <img src="2_eme/masarati_kiraa/sana_thania.png" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal6">
                                            <img src="2_eme/masarati_tamarine/masarati_tamarine-thania.png" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                            </div>
                        </div>
                    </div>
                                    <div class="tab-pane fade" id="pills-third"
                        role="tabpanel" aria-labelledby="pills-third-tab">
                        <div class="manuels-container">
                            <div class="manuels-bloc">
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal7">
                                            <img src="3_eme/kira3.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal8">
                                            <img src="3_eme/yanabia_kitaba_thaltha.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal9">
                                            <img src="3_eme/ikadh3.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal10">
                                            <img src="3_eme/frenchlecture3.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal11">
                                            <img src="3_eme/frenchactiv3.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal12">
                                            <img src="3_eme/math3.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                            </div>
                        </div>
                    </div>
                                    <div class="tab-pane fade" id="pills-fourth"
                        role="tabpanel" aria-labelledby="pills-fourth-tab">
                        <div class="manuels-container">
                            <div class="manuels-bloc">
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal13">
                                            <img src="4_eme/riadhiat/logo.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal14">
                                            <img src="4_eme/riadhiat_tamarine/riadhiat_tamarine.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal15">
                                            <img src="4_eme/ikaadh/ikadh.jpeg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal16">
                                            <img src="4_eme/français_lecture/FR_lecture.jpeg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal17">
                                            <img src="4_eme/français_acitivite/fr_activite.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal18">
                                            <img src="4_eme/douroub_hiwar/douroub_hiwar_rabaa.jpeg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal19">
                                            <img src="4_eme/adawat_tawasol_tamarine/adawat_tawasol_tamarine.jpeg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                            </div>
                        </div>
                    </div>
                                    <div class="tab-pane fade" id="pills-fifth"
                        role="tabpanel" aria-labelledby="pills-fifth-tab">
                        <div class="manuels-container">
                            <div class="manuels-bloc">
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal20">
                                            <img src="5_eme/ikadh5.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal21">
                                            <img src="5_eme/frenchlecture5.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal22">
                                            <img src="5_eme/frenchactivite5.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal23">
                                            <img src="5_eme/ejtime35.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal24">
                                            <img src="5_eme/math5k.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal25">
                                            <img src="5_eme/math5.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal26">
                                            <img src="5_eme/kiteba5.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal27">
                                            <img src="5_eme/lecture5.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal1313">
                                            <img src="5_eme/acitivityenglish.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                            </div>
                        </div>
                    </div>
                                    <div class="tab-pane fade" id="pills-sixth"
                        role="tabpanel" aria-labelledby="pills-sixth-tab">
                        <div class="manuels-container">
                            <div class="manuels-bloc">
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal28">
                                            <img src="6_eme/math6k.jpeg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal29">
                                            <img src="6_eme/kitab_riadhiat.jpeg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal1317">
                                            <img src="concours/Math/Math.png" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal30">
                                            <img src="6_eme/terikh6.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal31">
                                            <img src="6_eme/english6.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal1315">
                                            <img src="concours/ENG/ENG.png" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal32">
                                            <img src="6_eme/frenchactiv6.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal33">
                                            <img src="6_eme/frenchlecture6.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal1316">
                                            <img src="concours/FR/FR.png" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal34">
                                            <img src="6_eme/kitab_nousous.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal35">
                                            <img src="6_eme/alam_kitaba_tamarine.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal1314">
                                            <img src="concours/Arabe/ARABE.png" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal36">
                                            <img src="6_eme/ikadh6.jpg" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                                    <div class="col-6 col-md-2">
                                        <a href="#" data-toggle="modal"
                                            data-target="#manuelModal1318">
                                            <img src="concours/SVT/SVT.png" alt="" class="manual-image"
                                                style="width:100%; height:90%; border-radius:10px;">
                                        </a>
                                    </div>
                                                            </div>
                        </div>
                    </div>
                            </div>

        </div>
    </section>
    <!-- Modals for each manuel -->
                        <div class="modal fade" id="manuelModal1" tabindex="-1"
                aria-labelledby="manuelModalLabel1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel1">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/anisi_kiraaa_oula_pi/anisi_kiraaa_oula.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal2" tabindex="-1"
                aria-labelledby="manuelModalLabel2" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel2">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/anisi_tamarine_sana_oula_p/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal3" tabindex="-1"
                aria-labelledby="manuelModalLabel3" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel3">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/riadhiat_oula_pppp/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                                <div class="modal fade" id="manuelModal4" tabindex="-1"
                aria-labelledby="manuelModalLabel4" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel4">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_riadhiat_sana_thania/p_riadhiat_sana_thania.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal5" tabindex="-1"
                aria-labelledby="manuelModalLabel5" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel5">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/2emeketeb_p/2emeketeb_p.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal6" tabindex="-1"
                aria-labelledby="manuelModalLabel6" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel6">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/masarati_tamarine_thania_p/masarati_tamarine_thania_p.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                                <div class="modal fade" id="manuelModal7" tabindex="-1"
                aria-labelledby="manuelModalLabel7" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel7">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_yanabiaa_kiraa_thaltha/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal8" tabindex="-1"
                aria-labelledby="manuelModalLabel8" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel8">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_yanabia_tamarine_thaltha/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal9" tabindex="-1"
                aria-labelledby="manuelModalLabel9" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel9">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_ikaadh_thaltha/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal10" tabindex="-1"
                aria-labelledby="manuelModalLabel10" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel10">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <span>Le français pas à pas - Manuel de lecture  (No 3D path available)</span>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal11" tabindex="-1"
                aria-labelledby="manuelModalLabel11" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel11">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <span>Le français pas à pas - Cahier dactivités  (No 3D path available)</span>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal12" tabindex="-1"
                aria-labelledby="manuelModalLabel12" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel12">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_riadhiat_thaltha/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                                <div class="modal fade" id="manuelModal13" tabindex="-1"
                aria-labelledby="manuelModalLabel13" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel13">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_riadhiat_rabaa/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal14" tabindex="-1"
                aria-labelledby="manuelModalLabel14" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel14">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_riadhiat_tamarine/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal15" tabindex="-1"
                aria-labelledby="manuelModalLabel15" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel15">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_ikadh_rabaa/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal16" tabindex="-1"
                aria-labelledby="manuelModalLabel16" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel16">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_Au-rythme-des-projets-Lecture-4eme-enseignement-de-base/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal17" tabindex="-1"
                aria-labelledby="manuelModalLabel17" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel17">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_Au-rythme-des-projets-Cahier-dactivites-4eme-enseignement-de-base/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal18" tabindex="-1"
                aria-labelledby="manuelModalLabel18" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel18">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/Pdouroub_hiwar_rabaa/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal19" tabindex="-1"
                aria-labelledby="manuelModalLabel19" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel19">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_adawat_tawasol_tamarine/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                                <div class="modal fade" id="manuelModal20" tabindex="-1"
                aria-labelledby="manuelModalLabel20" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel20">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_ikadh/p_ikadh.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal21" tabindex="-1"
                aria-labelledby="manuelModalLabel21" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel21">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_Le-fran-ais-un-pas-de-plus-Manuel-de-lecture-5-me-EB/p_Le-fran-ais-un-pas-de-plus-Manuel-de-lecture-5-me-EB.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal22" tabindex="-1"
                aria-labelledby="manuelModalLabel22" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel22">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_Le-fran-ais-un-pas-de-plus-Cahier-dactivit-s-5-me-EB/p_Le-fran-ais-un-pas-de-plus-Cahier-dactivit-s-5-me-EB.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal23" tabindex="-1"
                aria-labelledby="manuelModalLabel23" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel23">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_mawad_ijtimaia/p_mawad_ijtimaia.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal24" tabindex="-1"
                aria-labelledby="manuelModalLabel24" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel24">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_koras_riadhiat/p_koras_riadhiat.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal25" tabindex="-1"
                aria-labelledby="manuelModalLabel25" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel25">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_riadhiat/p_riadhiat.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal26" tabindex="-1"
                aria-labelledby="manuelModalLabel26" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel26">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_masalek_kitaba_tamarine/p_masalek_kitaba_tamarine.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal27" tabindex="-1"
                aria-labelledby="manuelModalLabel27" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel27">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://www.abajim.com/BOOK/p_masalek_kiraa_dourou/p_masalek_kiraa_dourous.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal1313" tabindex="-1"
                aria-labelledby="manuelModalLabel1313" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel1313">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="h" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                                <div class="modal fade" id="manuelModal28" tabindex="-1"
                aria-labelledby="manuelModalLabel28" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel28">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_koras_riadhiat_6eme/p_koras_riadhiat_6eme.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal29" tabindex="-1"
                aria-labelledby="manuelModalLabel29" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel29">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_riadhiat_6eme/p_riadhiat_6eme.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal1317" tabindex="-1"
                aria-labelledby="manuelModalLabel1317" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel1317">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/concour/Math_play_concournewwwwwwww/P_New_Math_Concours.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal30" tabindex="-1"
                aria-labelledby="manuelModalLabel30" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel30">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_mawad_ijitimaiaa/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal31" tabindex="-1"
                aria-labelledby="manuelModalLabel31" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel31">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_Prime-English-Year-6-BE/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal1315" tabindex="-1"
                aria-labelledby="manuelModalLabel1315" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel1315">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/concour/eng_play_concours/ENG_play_concours.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal32" tabindex="-1"
                aria-labelledby="manuelModalLabel32" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel32">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_Un-pas-de-plus-vers-le-coll-ge-Cahier-dactivit-s-6-me-EB/index.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal33" tabindex="-1"
                aria-labelledby="manuelModalLabel33" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel33">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_Un-pas-de-plus-vers-le-coll-ge-Manuel-de-lecture-6-me-EB/p_Un-pas-de-plus-vers-le-coll-ge-Manuel-de-lecture-6-me-EB.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal1316" tabindex="-1"
                aria-labelledby="manuelModalLabel1316" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel1316">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/concour/FR_play_concours/FR_play_concours.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal34" tabindex="-1"
                aria-labelledby="manuelModalLabel34" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel34">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_alam_kiraa_nousous/p_alam_kiraa_nousous.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal35" tabindex="-1"
                aria-labelledby="manuelModalLabel35" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel35">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_alam_kitaba_tamarine/p_alam_kitaba_tamarine.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal1314" tabindex="-1"
                aria-labelledby="manuelModalLabel1314" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel1314">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/concour/arabe_arabe_play_concours/arabe_play_concours.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal36" tabindex="-1"
                aria-labelledby="manuelModalLabel36" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel36">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/BOOK/p_ikadh_6eme/p_ikadh_6eme.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
                    <div class="modal fade" id="manuelModal1318" tabindex="-1"
                aria-labelledby="manuelModalLabel1318" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title" style="font-size: 35px;" id="manuelModalLabel1318">
                                
                            </h1>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" style="height: 800px;">
                            
                                                                                                                                        <a href="https://abajim.com/concour/svp_play_concournewwwwwwww/P_New_SVP_Concours.html#page=" class="fp-embed"
                                            data-fp-width="100%" data-fp-height="100%" style="max-width: 100%"></a>
                                                                                                                        </div>
                    </div>
                </div>
            </div>
            

    <section class="home-sections home-sections-swiper container position-relative">
        <div class="text-center">
            <h2 id="dynamicTitle" class="font-weight-bold text-secondary font-30" style="margin-bottom:30px">
                أمثلة عن محتوئ كتب  السنة الأولى
            </h2>
        </div>

        <!-- Video Container -->
        <div class="row justify-content-center align-items-center" id="videos-container">
            <div class="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
        <div class="card custom-card" style="border-radius: 40px 0 0 0;" data-toggle="modal"
            data-target="#videoModal1">
            <div class="position-relative">
                <img style="border-radius: 40px 0 0 0;" src="thumbnails/abajim.png" class="card-img-top"
                    alt="إصلاح أستكشف من الدرس 1 ص 4 من كتاب الرياضيات سنة الأولى">
                <div class="play-icon">
                    <i class="fas fa-play-circle"></i>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">إصلاح أستكشف من الدرس 1 ص 4 من كتاب الرياضيات سنة الأولى</h5>

                <div class="d-flex justify-content-between align-items-center">
                    <!-- Manual Section -->
                    <div class="d-flex align-items-center">
                        <img src="1_ere/riadhiat_1.jpg" alt="رياضيات"
                            style="width: 40px; height: 40px; border-radius: 50%">
                        <h5 class="card-title ml-1 mr-1 font-16">رياضيات</h5>

                    </div>

                    <!-- User Section -->
                    <div class="d-flex align-items-center">
                                                    <img src="/store/1666/avatar/677d6d1e4f64f.png" alt="أنيستي هاجر"
                                style="width: 40px; height: 40px; border-radius: 50%">
                                                <h6 class="card-title ml-1 mr-1 font-16">أنيستي هاجر</h6>
                    </div>
                </div>

            </div>

        </div>

        <div class="modal fade" id="videoModal1" tabindex="-1"
            aria-labelledby="videoModal1Label" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="videoModal1Label">إصلاح أستكشف من الدرس 1 ص 4 من كتاب الرياضيات سنة الأولى</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" style="height: 500px">
                        <video controls style="width: 100%;height:100%">
                            <source src="videos/home/1er/إصلاح أستكشف من الدرس 1 ص 4 من كتاب الرياضيات سنة الأولى ‐ Réalisée avec Clipchamp.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
        <div class="card custom-card" style="border-radius: 40px 0 0 0;" data-toggle="modal"
            data-target="#videoModal2">
            <div class="position-relative">
                <img style="border-radius: 40px 0 0 0;" src="thumbnails/abajim.png" class="card-img-top"
                    alt="حرف الراء  كتاب انيسي في التمارين ص9">
                <div class="play-icon">
                    <i class="fas fa-play-circle"></i>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">حرف الراء  كتاب انيسي في التمارين ص9</h5>

                <div class="d-flex justify-content-between align-items-center">
                    <!-- Manual Section -->
                    <div class="d-flex align-items-center">
                        <img src="1_ere/anisi_tamarine.jpg" alt="أنيسي تمارين"
                            style="width: 40px; height: 40px; border-radius: 50%">
                        <h5 class="card-title ml-1 mr-1 font-16">أنيسي تمارين</h5>

                    </div>

                    <!-- User Section -->
                    <div class="d-flex align-items-center">
                                                    <img src="/store/1666/avatar/677d6d1e4f64f.png" alt="أنيستي هاجر"
                                style="width: 40px; height: 40px; border-radius: 50%">
                                                <h6 class="card-title ml-1 mr-1 font-16">أنيستي هاجر</h6>
                    </div>
                </div>

            </div>

        </div>

        <div class="modal fade" id="videoModal2" tabindex="-1"
            aria-labelledby="videoModal2Label" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="videoModal2Label">حرف الراء  كتاب انيسي في التمارين ص9</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" style="height: 500px">
                        <video controls style="width: 100%;height:100%">
                            <source src="videos/home/1er/حرف الراء  كتاب انيسي في التمارين ص9 ‐ ex6 ‐ Réalisée avec Clipchamp ‐ Réalisée avec Clipchamp.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
        <div class="card custom-card" style="border-radius: 40px 0 0 0;" data-toggle="modal"
            data-target="#videoModal3">
            <div class="position-relative">
                <img style="border-radius: 40px 0 0 0;" src="thumbnails/abajim.png" class="card-img-top"
                    alt="حرف اللام كتاب انيسي في التمارين ص5">
                <div class="play-icon">
                    <i class="fas fa-play-circle"></i>
                </div>
            </div>
            <div class="card-body">
                <h5 class="card-title">حرف اللام كتاب انيسي في التمارين ص5</h5>

                <div class="d-flex justify-content-between align-items-center">
                    <!-- Manual Section -->
                    <div class="d-flex align-items-center">
                        <img src="1_ere/anisi_tamarine.jpg" alt="أنيسي تمارين"
                            style="width: 40px; height: 40px; border-radius: 50%">
                        <h5 class="card-title ml-1 mr-1 font-16">أنيسي تمارين</h5>

                    </div>

                    <!-- User Section -->
                    <div class="d-flex align-items-center">
                                                    <img src="/store/1666/avatar/677d6d1e4f64f.png" alt="أنيستي هاجر"
                                style="width: 40px; height: 40px; border-radius: 50%">
                                                <h6 class="card-title ml-1 mr-1 font-16">أنيستي هاجر</h6>
                    </div>
                </div>

            </div>

        </div>

        <div class="modal fade" id="videoModal3" tabindex="-1"
            aria-labelledby="videoModal3Label" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="videoModal3Label">حرف اللام كتاب انيسي في التمارين ص5</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" style="height: 500px">
                        <video controls style="width: 100%;height:100%">
                            <source src="videos/home/1er/حرف اللام كتاب انيسي في التمارين ص5 ‐ ex1 ‐ Réalisée avec Clipchamp.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>

        </div>
    </section>

                    <footer id="newsletterFooter" class="footer bg-secondary position-relative user-select-none">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="footer-subscribe d-block d-md-flex align-items-center justify-content-between">
                    <div class="flex-grow-1">
                        <strong>انضم إلينا اليوم</strong>
                        <span class="d-block mt-5 text-white">#سنرسل أفضل العروض والصفقات إلى بريدك الإلكتروني.</span>
                    </div>
                    <div class="subscribe-input bg-white p-10 flex-grow-1 mt-30 mt-md-0">
                        <form action="/newsletters" method="post">
                            <input type="hidden" name="_token" value="22Rgz3tbMqOQJBsOV2lmWoMhhD3pNbmQhOqJsued">
                            <div class="form-group d-flex align-items-center m-0">
                                <div class="w-100">
                                    <input type="text" name="newsletter_contact"
                                        class="form-control border-0"
                                        placeholder="أدخل بريدك الإلكتروني أو رقم هاتفك" />
                                                                    </div>

                                <button style="background-color: #22bec8!important;" type="submit"
                                    class="btn btn-primary rounded-pill">انضم</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <div class="container">
        <div class="row">
            <div class="col-6 col-md-3">


                <span class="header d-block text-white font-weight-bold"> معلومات عنا </span>

                <div class="mt-20">
                    <p>
                        <font color="#ffffff"> شبكة تعليمية تفاعلية متكاملة تتيح للتلاميذ متابعة دروسهم في أي وقت ومن أي مكان، سواء عبر الحاسوب أو الهاتف المحمول. </font>
                    </p>
                </div>

            </div>
            <div class="col-6 col-md-3">

                <span class="header d-block text-white font-weight-bold"> روابط إضافية </span>

                <div class="mt-20">
                    <p><a href="/"><span style="color: #ffffff;">- الرئيسية</span></a></p>

                    <p><a href="/instructors"><span style="color: #ffffff;">- معلمينا
                            </span></a>
                    </p>
                    <p><a href="/manuels"><span style="color: #ffffff;">- الكتب المدرسية
                            </span></a></p>

                    <p><span style="color: #ffffff;"><a href="/contact"><span style="color: #ffffff;">-
                                    من نحن
                                </span></a><br></span></p>

                    <p><a href="/contact"><span style="color: #ffffff;">- اتصل بنا</span></a></p>
                </div>


            </div>
            <div class="col-6 col-md-3">


                <span class="header d-block text-white font-weight-bold">اتصل بنا</span>

                <div class="mt-20">
                    <div class="d-flex align-items-center text-white font-14">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="feather feather-mail mr-10">
                            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z">
                            </path>
                            <polyline points="22,6 12,13 2,6"></polyline>
                        </svg>
                        <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3935342e3b392e1a3b383b30333774393537">[email&#160;protected]</a>
                    </div>


                    <div class="mt-10 d-flex align-items-center text-white font-14">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="feather feather-phone mr-10">
                            <path
                                d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z">
                            </path>
                        </svg>
                        <span dir="ltr">+216 98 639 953</span>
                    </div>
                    <div class="mt-10 d-flex align-items-center text-white font-14">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="feather feather-map-pin text-white">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                            <circle cx="12" cy="10" r="3"></circle>
                        </svg>
                        <a style="color: white;" href="https://maps.app.goo.gl/oA2qGaxWoGzMGcpq5?g_st=com.google.maps.preview.copy">
                           Tunisie Sousse Novation City
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">

                <div class="mt-20 ml-30">
                    <p><a title="Notnt" href="/store/1/icon.png"><img style="width: 97px;" src="/store/1/icon.png"></a>
                    </p>
                </div>
            </div>
            <!-- <div class="col-6 col-md-3">



                <img src="/store/1/icon.png" style="width:37%;height: 80%!important;" class="img-cover"
                    alt="footer logo">


            </div> -->
                            <div class="col-6 col-md-3">
                                    </div>
                            <div class="col-6 col-md-3">
                                    </div>
                            <div class="col-6 col-md-3">
                                    </div>
                            <div class="col-6 col-md-3">
                                    </div>
            
        </div>

        <div class="mt-40 border-blue py-25 d-flex align-items-center justify-content-between">
            <div class="footer-logo">
                <a href="/">
                                            <img src="/store/1/logo_white.png" style="width: 87%!important;" class="img-cover"
                            alt="footer logo">
                                    </a>
            </div>
            <div class="ml-50 font-14 text-white">جميع الحقوق محفوظة لمنصة أبجم</div>
            <div class="footer-social">
                                                            <a href="https://www.linkedin.com/company/abajim/originalSubdomain=tn/" target="_blank">
                            <img src="/store/1/default_images/social/linkedin.svg" alt="LinkedIn" class="mr-15">
                        </a>
                                            <a href="https://wa.me/25893331" target="_blank">
                            <img src="/store/1/default_images/social/whatsapp.svg" alt="Whatsapp" class="mr-15">
                        </a>
                                            <a href="https://www.instagram.com/abajim__/" target="_blank">
                            <img src="/store/1/default_images/social/instagram.svg" alt="Instagram" class="mr-15">
                        </a>
                                            <a href="https://www.facebook.com/p/Abajim-61564811859358/?locale=fr_FR" target="_blank">
                            <img src="/store/1/default_images/social/facebook.svg" alt="Facebook" class="mr-15">
                        </a>
                                                </div>
        </div>
    </div>
</footer>
        
        
    </div>
    <!-- Template JS File -->
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="/assets/default/js/app.js"></script>
    <script src="/assets/default/vendors/feather-icons/dist/feather.min.js"></script>
    <script src="/assets/default/vendors/moment.min.js"></script>
    <script src="/assets/default/vendors/sweetalert2/dist/sweetalert2.min.js"></script>
    <script src="/assets/default/vendors/toast/jquery.toast.min.js"></script>
    <script type="text/javascript" src="/assets/default/vendors/simplebar/simplebar.min.js"></script>

    

    <script>
        var deleteAlertTitle = 'هل أنت متأكد؟';
        var deleteAlertHint = 'لا يمكن التراجع عن هذا الإجراء!';
        var deleteAlertConfirm = 'حذف';
        var deleteAlertCancel = 'إلغاء';
        var deleteAlertSuccess = 'نجاح';
        var deleteAlertFail = 'فشل';
        var deleteAlertFailHint = 'خطأ أثناء حذف العنصر!';
        var deleteAlertSuccessHint = 'تم حذف العنصر بنجاح.';
        var forbiddenRequestToastTitleLang = 'public.forbidden_request_toast_lang';
        var forbiddenRequestToastMsgLang = 'public.forbidden_request_toast_msg_lang';
    </script>

    
            <script>
        $(document).on('click', '.tab-link', function(e) {
            e.preventDefault();

            var level = $(this).attr('data-level');

            var levelTranslations = {
                6: 'السنة الأولى',
                7: 'السنة الثانية',
                8: 'السنة الثالثة',
                9: 'السنة الرابعة',
                10: 'السنة الخامسة',
                11: 'السنة السادسة'
            };

            var newTitle = 'أمثلة عن محتوئ كتب  :level';
            newTitle = newTitle.replace(':level', levelTranslations[level]);

            $('#dynamicTitle').text(newTitle);

            $.ajax({
                url: 'https://www.abajim.com/manuels',
                method: 'GET',
                data: {
                    level: level
                },
                success: function(response) {
                    $('#videos-container').html(
                        response);
                },
                error: function(xhr) {
                    console.error("Failed to load videos.");
                }
            });
        });
    </script>
    
    <script src="/assets/default/js/parts/navbar.min.js"></script>
    <script src="/assets/vendors/fontawesome/js/all.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchBtn = document.getElementById('search-btn');
            const searchInput = document.getElementById('search-input');
            const searchForm = document.getElementById('search-form');

            searchBtn.addEventListener('click', function() {
                if (searchInput.style.width === '0px' || searchInput.style.width === '') {
                    searchInput.classList.add('show');
                    searchInput.style.width = '300px';
                    searchInput.style.display = 'inline-block';
                    searchInput.focus();
                } else if (searchInput.value.trim() !== '') {
                    searchForm.submit();
                } else {
                    searchInput.classList.remove('show');
                    searchInput.style.width = '0';
                    setTimeout(() => searchInput.style.display = 'none',
                        500);
                }
            });

            searchInput.addEventListener('keypress', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    if (searchInput.value.trim() !== '') {
                        searchForm.submit();
                    }
                }
            });
        });
    </script>

    <script src="/assets/default/js/parts/main.min.js"></script>

    <script>
        
        
    </script>
</body>

</html>