{"version":3,"sources":["helper/ScrollToTop.js","components/common/element/elements.js","components/common/styles/global.js","components/common/styles/search.js","components/common/Search.js","components/common/styles/stickyMenu.js","components/common/StickyMenu.js","components/common/styles/mobileMenu.js","components/common/MobileMenu.js","components/styles/header.js","components/Header.js","components/styles/heroSlider.js","components/HeroSlider.js","components/styles/iconBox.js","components/IconBox.js","components/styles/aboutUs.js","components/AboutUs.js","components/styles/courseFilter.js","components/CourseFilter.js","components/styles/testimonialSlider.js","components/TestimonialSlider.js","components/styles/faqEvent.js","components/FaqEvent.js","components/styles/homeContact.js","components/HelpArea.js","components/styles/homeBlog.js","components/HomeBlog.js","components/styles/campusTour.js","components/CampusTour.js","components/styles/newsletterForm.js","components/NewsletterForm.js","components/common/styles/backToTop.js","components/common/BackToTop.js","components/styles/footerOne.js","components/Footer.js","HomeOne.js","components/styles/headerTwo.js","components/HeaderTwo.js","components/styles/heroImage.js","components/HeroImage.js","components/styles/serviceBox.js","components/ServiceBox.js","components/styles/aboutUsTwo.js","components/AboutUsTwo.js","components/styles/courseSlider.js","components/CourseSlider.js","components/styles/numberCounter.js","components/NumberCounter.js","components/styles/freeCourse.js","components/FreeCourse.js","components/styles/teamSlider.js","components/TeamSlider.js","components/styles/imageGallery.js","components/ImageGallery.js","components/styles/footerTwo.js","components/FooterTwo.js","HomeTwo.js","components/common/styles/breadcrumb.js","components/common/Breadcrumb.js","components/styles/tabBox.js","components/TabBox.js","pages/about/styles/about.js","pages/about/About.js","components/styles/pagination.js","components/Pagination.js","pages/courses/components/CourseItemsGrid.js","pages/courses/styles/course.js","pages/courses/CourseGrid.js","pages/courses/components/CourseItemsList.js","pages/courses/CourseList.js","pages/courses/styles/reviewForm.js","pages/courses/components/ReviewForm.js","pages/courses/styles/popularCourse.js","pages/courses/components/PopularCourse.js","pages/courses/styles/courseTag.js","pages/courses/components/CourseTag.js","pages/courses/CourseDetails.js","pages/instructor/styles/instructor.js","pages/instructor/Instructors.js","pages/instructor/InstructorDetails.js","pages/gallery/styles/gallery.js","pages/gallery/Gallery.js","pages/events/styles/event.js","pages/events/Events.js","pages/events/styles/eventDetails.js","pages/events/EventsDetails.js","pages/account/styles/account.js","pages/account/Login.js","pages/account/Register.js","pages/contact/styles/contact.js","pages/contact/GoogleMap.js","pages/contact/Contact.js","pages/faq/styles/faq.js","pages/faq/Faq.js","pages/404/styles/pageNotFound.js","pages/404/PageNotFound.js","pages/comingsoon/styles/comingSoon.js","pages/comingsoon/ComingSoon.js","pages/courses/styles/courseSearch.js","pages/courses/components/CourseSearch.js","pages/courses/styles/courseCategory.js","pages/courses/components/CourseCategory.js","pages/blog/styles/recentPost.js","pages/blog/components/RecentPost.js","pages/blog/components/BlogSidebar.js","pages/blog/styles/blog.js","pages/blog/BlogClassic.js","pages/blog/BlogGrid.js","pages/blog/styles/commentForm.js","pages/blog/components/CommentForm.js","pages/blog/styles/blogDetails.js","pages/blog/BlogDetails.js","pages/shop/styles/priceFilter.js","pages/shop/components/PriceFilter.js","pages/shop/components/ShopSidebar.js","pages/shop/styles/product.js","pages/shop/Products.js","pages/shop/styles/quantity.js","pages/shop/components/Quantity.js","pages/shop/styles/productDetails.js","pages/shop/ProductDetails.js","pages/shop/styles/cart.js","pages/shop/Cart.js","App.js","serviceWorker.js","index.js"],"names":["ScrollToTop","pathname","useLocation","useEffect","window","scrollTo","colors","fonts","GlobalStyle","createGlobalStyle","_templateObject","_taggedTemplateLiteral","styled","div","Search","Styles","StickyMenu","addEventListener","stickyMenu","document","querySelector","scrollY","classList","add","remove","React","createElement","className","Container","Row","Col","md","style","display","alignItems","Link","to","src","alt","width","height","marginLeft","fontSize","fontWeight","data-toggle","MobileMenu","hmBtn","getElementById","mdSidebarOverlay","mdSidebarBody","mdSidebarExit","e","preventDefault","toggle","querySelectorAll","forEach","button","content","nextElementSibling","contains","maxHeight","scrollHeight","sm","href","id","marginTop","color","Component","Header","HeroSlider","render","settings","slidesPerView","loop","speed","autoplay","delay","disableOnInteraction","watchSlidesVisibility","navigation","nextEl","prevEl","renderPrevButton","renderNextButton","Swiper","Datas","map","data","i","key","concat","backgroundImage","uniqClass","title","desc","btnOneLink","btnTwoLink","IconBox","boxIcon","subTitle","AboutUs","constructor","super","this","state","isOpen","openModal","bind","setState","mainImage","process","videoBackground","ModalVideo","channel","videoId","onClose","onClick","desc1","desc2","CountUp","end","duration","CourseFilter","TestimonialSlider","spaceBetween","pagination","el","clickable","breakpoints","0","576","768","992","secTitle","dataList","testimonialTitle","testimonialDesc","authorImg","authorName","authorTitle","FaqEvent","faqData","faqTitle","faqDesc","HelpArea","HomeBlog","CampusTour","NewsletterForm","BackToTop","topBtn","startPosition","pageYOffset","distance","start","requestAnimationFrame","step","timestamp","progress","t","b","c","type","Footer","HeaderTwo","lg","maxWidth","margin","letterSpacing","HeroImage","ServiceBox","AboutUsTwo","secDesc","iconTitle","iconSubtitle","aboutImageOne","aboutImageTwo","experianceYear","CourseSlider","NumberCounter","xs","FreeCourse","form","name","email","phone","setError","input","message","formControl","parentElement","errorMsg","innerText","setSuccess","nameValue","value","trim","emailValue","phoneValue","test","isEmail","isNaN","formBackground","marginBottom","placeholder","TeamSlider","ImageGallery","fluid","ModalImage","small","galleryImage","large","FooterTwo","marginRight","Date","getFullYear","target","rel","HomeTwo","BreadcrumbBox","arguments","props","Breadcrumb","Item","active","TabBox","About","Pagination","CourseItemGrid","Fragment","courseLink","imgUrl","authorCourses","price","courseTitle","courseDesc","CourseGrid","CourseItemList","CourseList","ReviewForm","descValue","htmlFor","PopularCourse","CourseTag","CourseDetails","Tab","defaultActiveKey","Nav","eventKey","Content","Pane","Instructor","InstructorDetails","Gallery","Events","xl","eventLink","eventImg","eventTitle","eventTime","eventLocation","eventdesc","eventDate","EventDetails","personImage","personName","socialLinks","facebook","twitter","youtube","Timer","initialTime","direction","Days","Hours","Minutes","Login","user","password","userValue","passwordValue","Register","fname","lname","fnameValue","lnameValue","AnyReactComponent","_ref","text","GoogleMap","GoogleMapReact","bootstrapURLKeys","defaultCenter","center","defaultZoom","zoom","lat","lng","defaultProps","Contact","subject","subjectValue","messageValue","Faq","PageNotFound","ComingSoon","Seconds","CourseSearch","action","CourseCategory","RecentPost","blogLink","blogTitle","blogDate","BlogSidebar","RecentBlog","BlogClassic","postLink","postImg","authorLink","postDate","postCategory","commentNumber","postTitle","BlogGrid","postDesc","CommentForm","BlogDetails","PriceFilter","ShopSidebar","Product","productImg","discount","productUrl","productTitle","Quantity","plus","minus","parseInt","defaultValue","ProductDetails","showArrows","showStatus","showIndicators","Carousel","Table","Cart","App","Router","Switch","Route","exact","path","component","Boolean","location","hostname","match","ReactDOM","navigator","serviceWorker","ready","then","registration","unregister","catch","error","console"],"mappings":"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","file":"static/js/main.fa9e1fb9.chunk.js","sourcesContent":["import { useEffect } from \"react\";\nimport { useLocation } from \"react-router-dom\";\n\nexport default function ScrollToTop() {\n  const { pathname } = useLocation();\n\n  useEffect(() => {\n    window.scrollTo(0, 0);\n  }, [pathname]);\n\n  return null;\n}\n","export const colors = {\n\n    bg1: \"#182B49\",\n    bg2: \"#F6F9FF\",\n    gr_bg: \"linear-gradient(90deg, #11B67A 0%, #009444 100%)\",\n    gr_bg2: \"linear-gradient(90deg, #009444 0%, #11B67A 100%)\",\n    copy_bg: \"#122340\",\n    blue: \"#2c97ea\",\n    green: \"#11B67A\",\n    green2: \"#00a76a\",\n    red: \"#ff6f6f\",\n    purple: \"#84479c\",\n    yellow: \"#fbab19\",\n    black1: \"#182B49\",\n    black2: \"#444444\",\n    text1: \"#555555\",\n    text2: \"#666666\",\n    text3: \"#969696\",\n    text4: \"#aaaaaa\",\n    text5: \"#cccccc\",\n    border1: \"#eeeeee\",\n    border2: \"#3e3e3e\",\n    border3: \"#dddddd\",\n    footer1: \"#1a1b25\",\n    footer2: \"#16171f\",\n    ftext: \"#8D8E92\",\n\n}\n\nexport const fonts = {\n\n    roboto: \"'Roboto', sans-serif\",\n    poppins: \"'Poppins', sans-serif\",\n\n}","/*===========================================\nTemplate Name: Edulyn - React Education Template\nAuthor: Md Tahmidur Rahman\nAuthor URL: http://snazzytheme.com/\nVersion: 1.0\n==============================================*/\n\nimport { createGlobalStyle } from \"styled-components\";\nimport { colors, fonts } from \"../element/elements.js\";\n\nexport const GlobalStyle = createGlobalStyle`\n    html {\n        color      : ${colors.bg1};\n        font-size  : 13px;\n        line-height: 1.4;\n    }\n\n    ::-moz-selection {\n        background : #b3d4fc;\n        text-shadow: none;\n    }\n\n    ::selection {\n        background : #b3d4fc;\n        text-shadow: none;\n    }\n\n    hr {\n        display   : block;\n        height    : 1px;\n        border    : 0;\n        border-top: 1px solid ${colors.border3};\n        margin    : 1em 0;\n        padding   : 0;\n    }\n\n    audio,\n    canvas,\n    iframe,\n    img,\n    svg,\n    video {\n        vertical-align: middle;\n    }\n\n    fieldset {\n        border : 0;\n        margin : 0;\n        padding: 0;\n    }\n\n    textarea {\n        resize: vertical;\n    }\n\n    body {\n        font-size     : 13px;\n        background    : #ffffff;\n        color         : ${colors.text1};\n        letter-spacing: 0.3px;\n        font-family   : ${fonts.roboto};\n    }\n\n    h1,\n    h1 a {\n        font-size: 40px;\n    }\n\n    h2,\n    h2 a {\n        font-size: 32px;\n    }\n\n    h3,\n    h3 a {\n        font-size: 28px;\n    }\n\n    h4,\n    h4 a {\n        font-size: 24px;\n    }\n\n    h5,\n    h5 a {\n        font-size: 20px;\n    }\n\n    h6,\n    h6 a {\n        font-size: 16px;\n    }\n\n    h1,\n    h1 a,\n    h2,\n    h2 a,\n    h3,\n    h3 a,\n    h4,\n    h4 a,\n    h5,\n    h5 a,\n    h6,\n    h6 a {\n        font-family: ${fonts.poppins};\n        margin     : 0;\n    }\n\n    a,\n    button,\n    li,\n    p {\n        font-size     : 13px;\n        font-family   : ${fonts.roboto};\n        margin        : 0;\n        letter-spacing: 0.3px;\n    }\n\n    ul {\n        padding: 0;\n        margin : 0;\n    }\n\n    a,\n    a:active,\n    a:focus,\n    a:hover,\n    button:focus,\n    button:hover {\n        text-decoration: none;\n        outline        : none;\n    }\n\n    a,\n    button {\n        transition: all 0.2s ease;\n    }\n\n    input:focus,\n    textarea:focus {\n        outline: none;\n    }\n\n    .padding-fix {\n        padding-left : 0;\n        padding-right: 0;\n    }\n\n    .padding-fix-r {\n        padding-right: 0;\n    }\n\n    .padding-fix-l {\n        padding-left: 0;\n    }\n\n    .margin-fix {\n        margin-left : 0;\n        margin-right: 0;\n    }\n`;","import styled from \"styled-components\";\nimport { colors } from \"../element/elements.js\";\n\nexport const Styles = styled.div`\n    a.nav-search {\n        padding: 18px 0 0 10px;\n\n        i {\n            font-size: 20px;\n            color    : ${colors.border1};\n        }\n    }\n\n    .search-wrap {\n        position        : fixed;\n        top             : 0;\n        left            : 0;\n        width           : 100%;\n        height          : 100%;\n        z-index         : 1000;\n        background-color: rgba(255, 255, 255, 0.96);\n        transform       : scale(1, 0);\n        transform-origin: bottom center;\n        transition : transform 0.7s ease;\n\n        .search-overlay {\n            width           : 100%;\n            height          : 100%;\n            background-color: rgba(255, 255, 255, 0.96);\n            position        : absolute;\n            top             : 0;\n            left            : 0;\n            right           : 0;\n            bottom          : 0;\n            z-index         : 999;\n            opacity         : 0.7;\n        }\n\n        .search-inner {\n            position       : absolute;\n            width          : 100%;\n            height         : 100%;\n            display        : flex;\n            justify-content: center;\n            align-items    : center;\n\n            form.search-form {\n                position  : relative;\n                z-index   : 9991;\n                width     : 50%;\n                margin-top: -80px;\n                position  : relative;\n\n                input {\n                    width        : 100%;\n                    height       : 65px;\n                    border       : none;\n                    border-bottom: 2px solid ${colors.border3};\n                    font-size    : 26px;\n                    padding      : 0 10px 0 10px;\n                    margin-bottom: 0;\n                    color        : ${colors.black2};\n                    position     : relative;\n                    box-shadow   : none;\n                    border-radius: 0;\n                    outline      : none;\n                    background   : transparent;\n\n                    @include input-placeholder {\n                        font-style : italic;\n                        color      : ${colors.black1};\n                        font-weight: 300;\n                    }\n                }\n\n                .close-btn {\n                    position : absolute;\n                    top      : 25px;\n                    right    : -12px;\n                    font-size: 26px;\n                    color    : ${colors.green};\n                    cursor   : pointer;\n                }\n            }\n        }\n    }\n\n    .search-wrap.active {\n        transform-origin: top center;\n        transform       : scale(1, 1);\n    }\n`;","import React, { useEffect } from 'react';\nimport { Styles } from \"./styles/search.js\";\n\nfunction Search() {\n    useEffect(() => {\n        const searchTrigger = document.getElementById(\"search-trigger\");\n\n        if (searchTrigger) {\n            const searchOverlay = document.getElementById(\"search-overlay\");\n            const searchWrap = document.getElementById(\"search-wrap\");\n            const searchExit = document.getElementById(\"search-close\");\n\n            searchTrigger.addEventListener(\"click\", function (e) {\n                e.preventDefault();\n                searchWrap.classList.add(\"active\");\n            });\n\n            searchOverlay.addEventListener(\"click\", function (e) {\n                e.preventDefault();\n                searchWrap.classList.remove(\"active\");\n            });\n\n            searchExit.addEventListener(\"click\", function (e) {\n                e.preventDefault();\n                searchWrap.classList.remove(\"active\");\n            });\n        }\n    });\n\n    return (\n        <Styles>\n            {/* Search Box */}\n            <a href={ \"/\"} className=\"nav-link nav-search\" id=\"search-trigger\">\n                <i className=\"las la-search\"></i>\n            </a>\n            {/* Fullscreen search */}\n            <div className=\"search-wrap\" id=\"search-wrap\">\n                <div className=\"search-overlay custom-overlay\" id=\"search-overlay\"></div>\n                <div className=\"search-inner\">\n                    <form method=\"get\" className=\"search-form\">\n                        <input type=\"search\" name=\"search\" placeholder=\"Type and hit enter....\" />\n                        <i className=\"las la-times close-btn\" id=\"search-close\"></i>\n                    </form>\n                </div>\n            </div>\n        </Styles>\n    )\n}\n\nexport default Search\n","import styled from \"styled-components\";\nimport { colors } from \"../element/elements.js\";\n\nexport const Styles = styled.div`\n    .sticky-menu {\n        display: none;\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        z-index: 11;\n        animation: 300ms ease-in-out 0s normal none 1 fadeInDown;\n        background: #ffffff;\n        height: 90px;\n        padding-top: 18px;\n        box-shadow: 0 0 20px -10px #222222;\n\n        .logo {\n            a {\n                img {\n                    @media(max-width: 1199px) {\n                        max-width : 100%;\n                    }\n                }\n            }\n        }\n\n        div.menu-box {\n            ul.nav.menu-nav {\n                li.nav-item {\n                    position: relative;\n\n                    a.nav-link {\n                        font-size     : 14px;\n                        color         : ${colors.black1};\n                        text-transform: uppercase;\n                        font-weight   : 500;\n                        padding       : 10px 10px 20px;\n\n                        i {\n                            font-size: 12px;\n                        }\n\n                        &:after {\n                            content: none;\n                        }\n\n                        &:hover {\n                            color: ${colors.green};\n                        }\n\n                        @media(max-width: 1199px) {\n                            padding-left : 0;\n                            padding-right: 8px;\n                        }\n\n                        @media(max-width: 991px) {\n                            padding-right: 6px;\n                        }\n                    }\n\n                    ul.dropdown {\n                        position  : absolute;\n                        left      : 0;\n                        top       : 100%;\n                        min-width : 190px;\n                        background: #fff;\n                        border    : 1px solid ${colors.border1};\n                        text-align: left;\n                        padding   : 0;\n                        border-radius : 5px;\n                        transition : 0.2s ease;\n                        opacity         : 0;\n                        transform       : scaleY(0);\n                        visibility      : hidden;\n                        z-index         : 999;\n                        transform-origin: center top 0;\n\n                        li.nav-item {\n                            position: relative;\n\n                            a.nav-link {\n                                font-size     : 13px;\n                                color         : ${colors.text1};\n                                padding       : 10px 20px;\n                                text-transform: capitalize;\n                                font-weight   : 400;\n                                margin-right  : 0;\n                                border-bottom : 1px solid ${colors.border1};\n\n                                &:hover {\n                                    color: ${colors.green};\n\n                                    i {\n                                        color: #fff;\n                                    }\n                                }\n\n                                i {\n                                    float     : right;\n                                    margin-top: 4px;\n                                }\n                            }\n\n                            &:last-child {\n                                margin-left: 0;\n\n                                a.nav-link {\n                                    border-bottom: none;\n                                }\n                            }\n\n                            ul.dropdown2 {\n                                position  : absolute;\n                                top       : 0;\n                                left      : 100%;\n                                min-width : 180px;\n                                background: #fff;\n                                border    : 1px solid ${colors.border1};\n                                transition : 0.2s ease;\n                                opacity         : 0;\n                                transform       : scaleY(0);\n                                visibility      : hidden;\n                                z-index         : 999;\n                                transform-origin: center top 0;\n                            }\n\n                            &:hover {\n                                ul.dropdown2 {\n                                    opacity   : 1;\n                                    transform : scaleY(1);\n                                    visibility: visible;\n                                }\n                            }\n                        }\n                    }\n\n                    &:hover {\n                        ul.dropdown {\n                            opacity   : 1;\n                            transform : scaleY(1);\n                            visibility: visible;\n                        }\n                    }\n                }\n            }\n\n            .apply-btn {\n                margin-left: 70px;\n                margin-top : -1px;\n\n                a {\n                    font-size     : 13px;\n                    color         : #ffffff;\n                    background    : ${colors.gr_bg};\n                    display       : inline-block;\n                    width         : 110px;\n                    height        : 40px;\n                    text-align    : center;\n                    text-transform: uppercase;\n                    font-weight   : 500;\n                    padding       : 11px;\n                    border-radius : 0 5px 5px 0;\n                    position: relative;\n\n                    i {\n                        position : absolute;\n                        font-size: 20px;\n                        left     : -40px;\n                        top      : 0;\n                        padding  : 10px;\n                        width    : 40px;\n                        height   : 100%;\n                        border-radius : 5px 0 0 5px;\n                        background-color: ${colors.green2};\n                    }\n\n                    &:hover {\n                        background: ${colors.gr_bg2};\n                    }\n                }\n\n                @media(max-width: 1199px) {\n                    margin-left: 45px;\n                }\n\n                @media(max-width: 991px) {\n                    display : none;\n                }\n            }\n        }\n        @media(max-width: 767px) {\n            display: none;\n        }\n    }\n    .sticky-menu.sticky {\n        display: block;\n        \n        @media(max-width: 767px) {\n            display: none;\n        }\n    }\n`;","import React, { useEffect } from 'react';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { Styles } from \"./styles/stickyMenu.js\";\n\nfunction StickyMenu() {\n  useEffect(() => {\n    window.addEventListener(\"scroll\", () => {\n      const stickyMenu = document.querySelector(\".sticky-menu\");\n\n      if (window.scrollY > 160) {\n        stickyMenu.classList.add(\"sticky\");\n      } else {\n        stickyMenu.classList.remove(\"sticky\");\n      }\n    });\n  });\n\n  return (\n    <Styles>\n      {/* Sticky Menu */}\n      <section className=\"sticky-menu\">\n        <Container>\n          <Row>\n            <Col md=\"5\">\n              <div className=\"logo\" style={{\n                display: \"flex\",\n                alignItems: \"center\",\n              }}>\n                <Link to={\"/\"}>\n                  <img\n                    src={\"https://res.cloudinary.com/da5mimn3m/image/upload/v1712737763/mlc/Monalisa%20D.pharma%20College/WhatsApp_Image_2024-04-07_at_09.25.12_o4jz3m.jpg\"}\n                    alt=\"\"\n                    style={{\n                      width: \"50px\",\n                      height: \"50px\",\n                    }}\n                  />\n                </Link>\n                <Link to={\"/\"} style={{\n                  marginLeft: \"15px\",\n                  fontSize: \"15px\",\n                }}>\n                  <p style={{\n                    fontWeight: \"bold\",\n                    fontSize: \"15px\",\n                  }}>\n                    MONALISA INSTITUTE OF MEDICAL SCIENCE\n                  </p>\n                  <p>\n                    Recognized By PCI Govt. of India\n                  </p>\n                  <p>\n                    Affiliated to WBSCTVESD, GOVT. of West Bengal\n                  </p>\n                </Link>\n              </div>\n            </Col>\n            <Col md=\"7\">\n              <div className=\"menu-box d-flex justify-content-end\">\n                <ul className=\"nav menu-nav\">\n                  <li className=\"nav-item dropdown active\">\n                    <Link\n                      className=\"nav-link dropdown-toggle\"\n                      to={\"/\"}\n                      data-toggle=\"dropdown\"\n                    >\n                      Home\n                      {/* <i className=\"las la-angle-down\"></i> */}\n                    </Link>\n                    {/* <ul className=\"dropdown list-unstyled\">\n                        <li className=\"nav-item\">\n                          <Link\n                            className=\"nav-link\"\n                            to={ \"/\"}\n                          >\n                            Home Style 1\n                          </Link>\n                        </li>\n                        <li className=\"nav-item active\">\n                          <Link\n                            className=\"nav-link\"\n                            to={ \"/home-two\"}\n                          >\n                            Home Style 2\n                          </Link>\n                        </li>\n                      </ul> */}\n                  </li>\n                  <li className=\"nav-item dropdown\">\n                    <Link\n                      className=\"nav-link dropdown-toggle\"\n                      to={\"/\"}\n                      data-toggle=\"dropdown\"\n                    >\n                      Pages <i className=\"las la-angle-down\"></i>\n                    </Link>\n                    <ul className=\"dropdown list-unstyled\">\n                      <li className=\"nav-item\">\n                        <Link\n                          className=\"nav-link\"\n                          to={\"/about\"}\n                        >\n                          About Us\n                        </Link>\n                      </li>\n                      <li className=\"nav-item\">\n                        <Link\n                          className=\"nav-link\"\n                          to={\"/gallery\"}\n                        >\n                          Gallery\n                        </Link>\n                      </li>\n                      {/* <li className=\"nav-item\">\n                          <Link\n                            className=\"nav-link\"\n                            to={ \"/login\"}\n                          >\n                            Log In\n                          </Link>\n                        </li>\n                        <li className=\"nav-item\">\n                          <Link\n                            className=\"nav-link\"\n                            to={ \"/registration\"}\n                          >\n                            Registration\n                          </Link>\n                        </li> */}\n                      <li className=\"nav-item\">\n                        <Link\n                          className=\"nav-link\"\n                          to={\"/contact\"}\n                        >\n                          Contact\n                        </Link>\n                      </li>\n                      <li className=\"nav-item\">\n                        <Link\n                          className=\"nav-link\"\n                          to={\"/faq\"}\n                        >\n                          Faq\n                        </Link>\n                      </li>\n                      {/* <li className=\"nav-item\">\n                          <Link\n                            className=\"nav-link\"\n                            to={ \"/404\"}\n                          >\n                            404\n                          </Link>\n                        </li>\n                        <li className=\"nav-item\">\n                          <Link\n                            className=\"nav-link\"\n                            to={ \"/coming-soon\"}\n                          >\n                            Coming Soon\n                          </Link>\n                        </li> */}\n                    </ul>\n                  </li>\n                  <li className=\"nav-item dropdown\">\n                    <Link\n                      className=\"nav-link dropdown-toggle\"\n                      to={\"/\"}\n                      data-toggle=\"dropdown\"\n                    >\n                      Courses <i className=\"las la-angle-down\"></i>\n                    </Link>\n                    <ul className=\"dropdown list-unstyled\">\n                      {/* <li className=\"nav-item\">\n                          <Link\n                            className=\"nav-link\"\n                            to={ \"/course-grid\"}\n                          >\n                            Course Grid\n                          </Link>\n                        </li> */}\n                      <li className=\"nav-item\">\n                        <Link\n                          className=\"nav-link\"\n                          to={\"/course-list\"}\n                        >\n                          Course List\n                        </Link>\n                      </li>\n                      {/* <li className=\"nav-item\">\n                          <Link\n                            className=\"nav-link\"\n                            to={ \"/course-details\"}\n                          >\n                            Course Details\n                          </Link>\n                        </li> */}\n                    </ul>\n                  </li>\n                  {/* <li className=\"nav-item dropdown\">\n                    <Link\n                      className=\"nav-link dropdown-toggle\"\n                      to={\"/\"}\n                      data-toggle=\"dropdown\"\n                    >\n                      Event <i className=\"las la-angle-down\"></i>\n                    </Link>\n                    <ul className=\"dropdown list-unstyled\">\n                      <li className=\"nav-item\">\n                        <Link\n                          className=\"nav-link\"\n                          to={\"/events\"}\n                        >\n                          Events\n                        </Link>\n                      </li>\n                    </ul>\n                  </li> */}\n                </ul>\n                <div className=\"apply-btn\">\n                  <Link to={\"/registration\"}>\n                    <i className=\"las la-clipboard-list\"></i>Apply Now\n                  </Link>\n                </div>\n              </div>\n            </Col>\n          </Row>\n        </Container>\n      </section>\n    </Styles>\n  );\n}\n\nexport default StickyMenu","import styled from \"styled-components\";\nimport { colors } from \"../element/elements.js\";\n\nexport const Styles = styled.div`\n.mobile-menu-area {\n    background : ${colors.bg1};\n    display: none;\n    .mb-topbar {\n        border-bottom: 1px solid ${colors.black2};\n        .topbar-item {\n            p {\n                font-size: 13px;\n                color: ${colors.text4};\n                padding: 8px 0;\n                i {\n                    font-size: 16px;\n                    color: ${colors.green};\n                    vertical-align: text-top;\n                    margin-right: 5px;\n                }\n            }\n            ul {\n                padding: 8px 0;\n                li {\n                    a {\n                        font-size : 13px;\n                        color : ${colors.green};\n                        font-weight : 500;\n                        text-transform : uppercase;\n                        &:hover {\n                            color : #ffffff;\n                        }\n                    }\n                    &:nth-child(2) {\n                        color : ${colors.text3};\n                    }\n                }\n            }\n        }\n    }\n\n    .mb-logo-area {\n        padding : 18px 0;\n        .mb-logo-box {\n            .hm-button {\n                margin-top: 8px;\n                margin-right: 35px;\n                position: relative;\n                &:before {\n                    position: absolute;\n                    content : \"\";\n                    background : ${colors.text1};\n                    width: 1px;\n                    height: 25px;\n                    top: -4px;\n                    right: -16px;\n                }\n                a#mb-sidebar-btn {\n                    i {\n                        font-size : 20px;\n                        color : ${colors.green};\n                    }\n                }\n\n                @media(max-width: 480px) {\n                    margin-top: 6px;\n                    margin-right: 8px;\n                    &:before {\n                        content : none;\n                    }\n                }\n            }\n            .mb-logo {\n                a {\n                    img {\n                        max-width: 150px;\n                        @media(max-width: 480px) {\n                            max-width : 120px;\n                        }\n                    }\n                }\n            }\n        }\n\n        .mb-search-box {\n            form {\n                width: 170px;\n                position: relative;\n                input {\n                    width: 100%;\n                    height: 35px;\n                    border: 1px solid ${colors.text2};\n                    background: transparent;\n                    color : #ffffff;\n                    border-radius: 5px;\n                    padding-left: 15px;\n                    &::placeholder {\n                        font-size : 14px;\n                        color : ${colors.text3};\n                    }\n                    &:focus {\n                        border-color : ${colors.green};\n                    }\n\n                    @media(max-width: 480px) {\n                        max-width : 280px;\n                    }\n\n                    @media(max-width: 320px) {\n                        display : none;\n                    }\n                }\n                button {\n                    position: absolute;\n                    top: 0;\n                    right: 0;\n                    height: 100%;\n                    width: 40px;\n                    background: transparent;\n                    border: none;\n                    font-size: 16px;\n                    color: ${colors.green};\n                    i {\n\n                    }\n\n                    @media(max-width: 320px) {\n                        display : none;\n                    }\n                }\n\n                @media(max-width: 480px) {\n                    max-width : 130px;\n                }\n            }\n        }\n    }\n\n    @media(max-width: 767px) {\n        display : block;\n    }\n}\n\n.mb-sidebar {\n    background: #ffffff;\n    height: 100%;\n    width: 320px;\n    position: fixed;\n    top : 0;\n    left: -320px;\n    overflow-y: auto;\n    z-index: 9999;\n    transition: all 400ms cubic-bezier(0.785,0.135,0.15,0.86);\n    display: none;\n    .mb-sidebar-heading {\n        background: ${colors.gr_bg};\n        padding: 25px;\n        h5 {\n            color: #ffffff;\n            text-transform: uppercase;\n        }\n        a#close-mb-sidebar {\n            i {\n                font-size : 22px;\n                color : #ffffff;\n            }\n        }\n    }\n    .mb-sidebar-menu {\n        padding: 25px;\n        .mb-menu-item {\n            border-top: 1px solid ${colors.border1};\n            &:last-child {\n                border-bottom: 1px solid ${colors.border1};\n            }\n            button.mb-menu-button {\n                border       : none;\n                background   : transparent;\n                display      : block;\n                width        : 100%;\n                padding      : 10px 0;\n                text-align   : left;\n\n                p {\n                    font-size  : 14px;\n                    color      : ${colors.black1};\n                    text-transform: uppercase;\n                    i {\n                        font-size: 13px;\n                        float: right;\n                        border: 1px solid ${colors.border3};\n                        border-radius: 25px;\n                        padding: 3px;\n                    }\n                    &:hover {\n                        color      : ${colors.green};\n                        i {\n                            border-color : ${colors.green};\n                        }\n                    }\n                }\n            }\n\n            .mb-menu-content {\n                max-height: 0;\n                overflow  : hidden;\n                transition: max-height 0.2s ease-in-out;\n\n                ul {\n                    li {\n                        border-top: 1px solid ${colors.border1};\n                        a {\n                            font-size  : 13px;\n                            color      : ${colors.black2};\n                            display    : block;\n                            padding    : 10px 0;\n                            padding-left: 15px;\n                            &:hover {\n                                color      : ${colors.green};\n                            }\n                        }\n                    }\n                }\n            }\n\n            .mb-menu-content.show {\n                max-height: 100%;\n            }\n        }\n    }\n\n    @media(max-width: 767px) {\n        display : block;\n    }\n\n    @media(max-width: 480px) {\n        max-width: 275px;\n    }\n}\n\n.mb-sidebar.opened {\n    left: 0 !important;\n}\n\n.mb-sidebar-overlay {\n    position        : fixed;\n    left            : 0;\n    top             : 0;\n    height          : 100%;\n    width           : 100%;\n    display         : block;\n    background-color: rgba(0, 0, 0, 0.8);\n    z-index         : 1111;\n    visibility      : hidden;\n    opacity         : 0;\n    transition      : 0.3s ease;\n}\n\n.mb-sidebar-overlay.visible {\n    visibility: visible;\n    opacity   : 1;\n}\n`;","import React, { useEffect } from 'react';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { Styles } from \"./styles/mobileMenu.js\";\n\nfunction MobileMenu() {\n    useEffect(() => {\n        // Mobile Menu\n        const hmBtn = document.getElementById(\"mb-sidebar-btn\");\n\n        if (hmBtn) {\n            const mdSidebarOverlay = document.getElementById(\"mb-sidebar-overlay\");\n            const mdSidebarBody = document.getElementById(\"mb-sidebar-body\");\n            const mdSidebarExit = document.getElementById(\"close-mb-sidebar\");\n\n            hmBtn.addEventListener(\"click\", function (e) {\n                e.preventDefault();\n                mdSidebarOverlay.classList.toggle(\"visible\");\n                mdSidebarBody.classList.toggle(\"opened\");\n            });\n\n            mdSidebarOverlay.addEventListener(\"click\", function (e) {\n                e.preventDefault();\n                mdSidebarOverlay.classList.remove(\"visible\");\n                mdSidebarBody.classList.remove(\"opened\");\n            });\n\n            mdSidebarExit.addEventListener(\"click\", function (e) {\n                e.preventDefault();\n                mdSidebarOverlay.classList.remove(\"visible\");\n                mdSidebarBody.classList.remove(\"opened\");\n            });\n        }\n\n        // Menu Accordion -----------------\n        const menuButton = document.querySelectorAll(\".mb-menu-button\");\n        menuButton.forEach(button => {\n            button.addEventListener(\"click\", () => {\n                button.classList.toggle(\"active\");\n                const content = button.nextElementSibling;\n\n                if (button.classList.contains(\"active\")) {\n                    content.className = \"mb-menu-content show\";\n                    content.style.maxHeight = content.scrollHeight + \"px\";\n                } else {\n                    content.className = \"mb-menu-content\";\n                    content.style.maxHeight = \"0\";\n                }\n            });\n        });\n    });\n\n    return (\n      <Styles>\n        {/* Mobile Menu */}\n        <section className=\"mobile-menu-area\">\n          <Container>\n            <Row>\n              <Col md=\"0\" sm=\"12\">\n                <div className=\"mb-topbar d-flex justify-content-between\">\n                  <div className=\"topbar-item\">\n                    <p>\n                      <i className=\"las la-phone\"></i>9804588881 / 9193741234\n                    </p>\n                    <p>\n                      <i className=\"las la-envelope\"></i>monalisacollegeofpharmacy@gmail.com\n                    </p>\n                  </div>\n                  <div className=\"topbar-item\">\n                    <ul className=\"list-unstyled list-inline\">\n                    </ul>\n                  </div>\n                </div>\n                <div className=\"mb-logo-area d-flex justify-content-between\">\n                  <div className=\"mb-logo-box d-flex\">\n                    <div className=\"hm-button\">\n                      <a\n                        href={ \"/\"}\n                        id=\"mb-sidebar-btn\"\n                        style={{\n                          fontSize: \"30px\",\n                        }}\n                      >\n                        <i className=\"las la-bars\"></i>\n                      </a>\n                    </div>\n                    <div className=\"mb-logo\">\n                      <Link to={ \"/\"} style={{\n                        display : \"flex\",\n                      }}>\n                        <img\n                          src={\n                      \"https://res.cloudinary.com/da5mimn3m/image/upload/v1712991636/mlc/Monalisa%20D.pharma%20College/WhatsApp_Image_2024-04-07_at_09.25.12_o4jz3m.jpg\"\n                          }\n                          alt=\"\"\n                          style={{\n                            width: \"70px\",\n                            height: \"70px\",\n                            marginTop: \"10px\",\n                          }}\n                        />\n                    <div style={{}}>\n                    <p style={{\n                      fontSize: \"20px\",\n                      fontWeight: \"bold\",\n                      marginLeft: \"10px\",\n                      color: \"#fff\",\n                    }}>\n                    Monalisa Institute of \n                    </p>\n                    <p style={{\n                      fontSize: \"20px\",\n                      fontWeight: \"bold\",\n                      marginLeft: \"10px\",\n                      color: \"#fff\",\n                    }}>\n                   Medical Science\n                    </p>\n                    <p style={{\n                      fontSize: \"12px\",\n                      fontWeight: \"bold\",\n                      color: \"white\",\n                      marginLeft: \"10px\",\n                    }}>\n                      Recognized By PCI Govt. of India\n                    </p>\n                    <p style={{\n                      fontSize: \"12px\",\n                      fontWeight: \"bold\",\n                      color: \"white\",\n                      marginLeft: \"10px\",\n                    }}>\n                      Affiliated to WBSCTVESD, GOVT. of West Bengal\n                    </p>\n                    </div>\n                      </Link>\n                    </div>\n                  </div>\n                </div>\n              </Col>\n            </Row>\n          </Container>\n        </section>\n\n        {/* Mobile Menu Sidebar */}\n        <section className=\"mb-sidebar\" id=\"mb-sidebar-body\">\n          <div className=\"mb-sidebar-heading d-flex justify-content-between\">\n            <div>\n              <h5>Menu</h5>\n            </div>\n            <div>\n              <a href={ \"/\"} id=\"close-mb-sidebar\">\n                <i className=\"las la-times\"></i>\n              </a>\n            </div>\n          </div>\n          <div className=\"mb-sidebar-menu\">\n            <div className=\"mb-menu-item\">\n              <button className=\"mb-menu-button active\">\n                <p>\n                  Home <i className=\"las la-plus\"></i>\n                </p>\n              </button>\n              <div className=\"mb-menu-content show\">\n                {/* <ul className=\"list-unstyled\">\n                  <li>\n                    <Link to={ \"/\"}>Home Style 1</Link>\n                  </li>\n                  <li>\n                    <Link to={ \"/home-two\"}>\n                      Home Style 2\n                    </Link>\n                  </li>\n                </ul> */}\n              </div>\n            </div>\n            <div className=\"mb-menu-item\">\n              <button className=\"mb-menu-button active\">\n                <p>\n                  Pages <i className=\"las la-plus\"></i>\n                </p>\n              </button>\n              <div className=\"mb-menu-content show\">\n                <ul className=\"list-unstyled\">\n                  <li>\n                    <Link to={ \"/about\"}>About Us</Link>\n                  </li>\n                  <li>\n                    <Link to={ \"/gallery\"}>\n                      Gallery\n                    </Link>\n                  </li>\n                  {/* <li>\n                    <Link to={ \"/login\"}>Log In</Link>\n                  </li>\n                  <li>\n                    <Link to={ \"/registration\"}>\n                      Registration\n                    </Link>\n                  </li> */}\n                  <li>\n                    <Link to={ \"/contact\"}>\n                      Contact\n                    </Link>\n                  </li>\n                  <li>\n                    <Link to={ \"/faq\"}>Faq</Link>\n                  </li>\n                  {/* <li>\n                    <Link to={ \"/404\"}>404</Link>\n                  </li>\n                  <li>\n                    <Link to={ \"/coming-soon\"}>\n                      Coming Soon\n                    </Link>\n                  </li> */}\n                </ul>\n              </div>\n            </div>\n            <div className=\"mb-menu-item\">\n              <button className=\"mb-menu-button active\">\n                <p>\n                  Courses <i className=\"las la-plus\"></i>\n                </p>\n              </button>\n              <div className=\"mb-menu-content show\">\n                <ul className=\"list-unstyled\">\n                  {/* <li>\n                    <Link to={ \"/course-grid\"}>\n                      Course Grid\n                    </Link>\n                  </li> */}\n                  <li>\n                    <Link to={ \"/course-list\"}>\n                      Course List\n                    </Link>\n                  </li>\n                  {/* <li>\n                    <Link to={ \"/course-details\"}>\n                      Course Details\n                    </Link>\n                  </li> */}\n                </ul>\n              </div>\n            </div>\n           \n            {/* <div className=\"mb-menu-item\">\n              <button className=\"mb-menu-button\">\n                <p>\n                  Blog <i className=\"las la-plus\"></i>\n                </p>\n              </button>\n              <div className=\"mb-menu-content\">\n                <ul className=\"list-unstyled\">\n                  <li>\n                    <Link to={ \"/blog-classic\"}>\n                      Blog Classic\n                    </Link>\n                  </li>\n                  <li>\n                    <Link to={ \"/blog-grid\"}>\n                      Blog Grid\n                    </Link>\n                  </li>\n                  <li>\n                    <Link to={ \"/blog-details\"}>\n                      Blog Details\n                    </Link>\n                  </li>\n                </ul>\n              </div>\n            </div>\n            <div className=\"mb-menu-item\">\n              <button className=\"mb-menu-button\">\n                <p>\n                  Shop <i className=\"las la-plus\"></i>\n                </p>\n              </button>\n              <div className=\"mb-menu-content\">\n                <ul className=\"list-unstyled\">\n                  <li>\n                    <Link to={ \"/products\"}>\n                      Products\n                    </Link>\n                  </li>\n                  <li>\n                    <Link to={ \"/product-details\"}>\n                      Product Details\n                    </Link>\n                  </li>\n                  <li>\n                    <Link to={ \"/cart\"}>Cart</Link>\n                  </li>\n                </ul>\n              </div>\n            </div> */}\n          </div>\n        </section>\n        <div className=\"mb-sidebar-overlay\" id=\"mb-sidebar-overlay\"></div>\n      </Styles>\n    );\n}\n\nexport default MobileMenu","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .top-bar {\n        background: ${colors.bg1};\n        .bar-left {\n            ul {\n                li {\n                    font-size  : 13px;\n                    color      : ${colors.text4};\n                    border-left: 1px solid ${colors.border2};\n                    padding    : 10px 15px;\n                    margin     : 0;\n                    display    : inline-block;\n\n                    a {\n                        font-size: 13px;\n                        color    : ${colors.text4};\n\n                        &:hover {\n                            color: ${colors.green};\n                        }\n                    }\n\n                    i {\n                        font-size     : 20px;\n                        color         : ${colors.green};\n                        vertical-align: bottom;\n                        margin-right  : 5px;\n                    }\n\n                    &:last-child {\n                        border-right: 1px solid ${colors.border2};\n                    }\n\n                    @media(max-width: 991px) {\n                        border : none;\n                        padding: 10px 0px;\n                        &:last-child {\n                            display : none;\n                        }\n                    }\n                }\n            }\n        }\n\n        .bar-right {\n            ul.bar-social {\n                border-right: 1px solid ${colors.border2};\n                border-left : 1px solid ${colors.border2};\n                padding     : 10px 15px;\n\n                li {\n                    a {\n                        font-size   : 14px;\n                        color       : ${colors.green};\n                        margin-right: 10px;\n\n                        &:hover {\n                            color: #ffffff;\n                        }\n                    }\n\n                    &:last-child {\n                        a {\n                            margin-right: 0;\n                        }\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    display : none;\n                }\n            }\n\n            ul.bar-lang {\n                border-right: 1px solid ${colors.border2};\n                padding     : 10px 15px;\n\n                li {\n                    .dropdown {\n                        a.dropdown-toggle {\n                            font-size: 13px;\n                            color    : ${colors.text4};\n\n                            img {\n                                margin-right: 5px;\n                                max-width   : 21px;\n                            }\n\n                            i {\n                                font-size  : 12px;\n                                margin-left: 3px;\n                            }\n\n                            &::after {\n                                display: none;\n                            }\n\n                            &:hover {\n                                cursor: pointer;\n                                color : ${colors.green};\n                            }\n                        }\n\n                        ul.dropdown-menu {\n                            padding: 0;\n                            margin : 0;\n                            border : none;\n                            background: #ffffff;\n                            border-radius: 5px;\n                            top       : 68% !important;\n                            left      : -16px !important;\n                            box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);\n\n                            li {\n                                display      : block;\n                                background: transparent;\n                                border-bottom: 1px solid ${colors.border1};\n                                padding      : 7px 15px;\n                                color        : ${colors.text2};\n                                cursor       : pointer;\n                                overflow    : hidden;\n\n                                img {\n                                    max-width   : 21px;\n                                    margin-right: 5px;\n                                }\n\n                                &:hover {\n                                    color      : ${colors.bg1};\n                                    font-weight: 500;\n                                }\n\n                                &:last-child {\n                                    border-bottom: none;\n                                }\n                            }\n                        }\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    border-right : none;\n                    padding: 10px 0px;\n                }\n            }\n\n            ul.bar-login {\n                li {\n                    border-right: 1px solid ${colors.border2};\n                    padding     : 10px 15px;\n                    margin      : 0;\n                    display     : inline-block;\n\n                    a {\n                        font-size: 13px;\n                        color    : ${colors.text4};\n\n                        i {\n                            font-size     : 20px;\n                            color         : ${colors.green};\n                            vertical-align: bottom;\n                            margin-right  : 5px;\n                        }\n\n                        &:hover {\n                            color: ${colors.green};\n                        }\n                    }\n\n                    @media(max-width: 991px) {\n                        border-right : none;\n                        padding-right: 0;\n                    }\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            display : none;\n        }\n    }\n\n    .logo-area {\n        padding: 22px 0;\n        .logo {\n            a {\n                img {\n                    @media(max-width: 991px) {\n                        max-width : 100%;\n                        margin-top: 4px;\n                    }\n                }\n            }\n        }\n\n        .logo-contact-box {\n            .emcontact-box {\n                margin-right: 45px;\n\n                .box-icon {\n                    background  : ${colors.green};\n                    height      : 21px;\n                    text-align  : center;\n                    margin-top  : 10px;\n                    margin-right: 12px;\n                    position    : relative;\n\n                    i {\n                        position  : relative;\n                        z-index   : 111;\n                        font-size : 22px;\n                        color     : #ffffff;\n                        width     : 36px;\n                        display   : inline-block;\n                        margin-top: -5px;\n                    }\n\n                    &:before {\n                        content            : \"\";\n                        position           : absolute;\n                        border-width       : 10px 18px;\n                        border-style       : solid;\n                        border-top-color   : transparent;\n                        border-right-color : transparent;\n                        border-bottom-color: ${colors.green};\n                        border-left-color  : transparent;\n                        top                : -20px;\n                        left               : 0;\n                        z-index            : 1;\n                    }\n\n                    &:after {\n                        content            : \"\";\n                        position           : absolute;\n                        border-width       : 10px 18px;\n                        border-style       : solid;\n                        border-top-color   : ${colors.green};\n                        border-right-color : transparent;\n                        border-bottom-color: transparent;\n                        border-left-color  : transparent;\n                        bottom             : -20px;\n                        left               : 0;\n                        z-index            : 1;\n                    }\n\n                    @media(max-width: 991px) {\n                        display : none;\n                    }\n                }\n\n                .box-content {\n                    p {\n                        font-size    : 13px;\n                        color        : ${colors.text3};\n                        margin-bottom: -2px;\n                    }\n\n                    span {\n                        font-size  : 17px;\n                        color      : ${colors.black1};\n                        font-weight: 500;\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    margin-right : 20px;\n                }\n            }\n\n            .apply-btn {\n                margin-left: 40px;\n\n                a {\n                    font-size     : 13px;\n                    color         : #ffffff;\n                    background    : ${colors.gr_bg};\n                    display       : inline-block;\n                    width         : 110px;\n                    height        : 40px;\n                    text-align    : center;\n                    text-transform: uppercase;\n                    font-weight   : 500;\n                    padding       : 11px;\n                    border-radius : 0 5px 5px 0;\n                    position: relative;\n\n                    i {\n                        position : absolute;\n                        font-size: 20px;\n                        left     : -40px;\n                        top      : 0;\n                        padding  : 10px;\n                        width    : 40px;\n                        height   : 100%;\n                        border-radius : 5px 0 0 5px;\n                        background-color: ${colors.green2};\n                    }\n\n                    &:hover {\n                        background: ${colors.gr_bg2};\n                    }\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            display : none;\n        }\n    }\n\n    .main-menu {\n        .main-menu-box {\n            position: relative;\n            z-index : 111;\n\n            .menu-box {\n                position  : absolute;\n                width     : 100%;\n                top       : 20px;\n                left      : 0;\n                padding   : 0 30px;\n                background: ${colors.gr_bg};\n                border-radius : 5px;\n\n                ul.nav.menu-nav {\n                    li.nav-item {\n                        position: relative;\n\n                        a.nav-link {\n                            font-size     : 14px;\n                            color         : #ffffff;\n                            text-transform: uppercase;\n                            font-weight   : 500;\n                            padding       : 18px 25px 15px 0;\n\n                            i {\n                                font-size: 12px;\n                            }\n\n                            &:after {\n                                content: none;\n                            }\n\n                            &:hover {\n                                color: ${colors.black1};\n                            }\n\n                            @media(max-width: 991px) {\n                                padding-right : 10px;\n                            }\n                        }\n\n                        ul.dropdown {\n                            position  : absolute;\n                            left      : -10px;\n                            top       : 100%;\n                            min-width : 190px;\n                            background: #fff;\n                            text-align: left;\n                            padding   : 0;\n                            border-radius : 0 0 5px 5px;\n                            transition : 0.2s ease;\n                            opacity         : 0;\n                            transform       : scaleY(0);\n                            visibility      : hidden;\n                            z-index         : 999;\n                            transform-origin: center top 0;\n\n                            li.nav-item {\n                                position: relative;\n\n                                a.nav-link {\n                                    font-size     : 13px;\n                                    color         : ${colors.text1};\n                                    padding       : 10px 20px;\n                                    text-transform: capitalize;\n                                    margin-right  : 0;\n                                    font-weight   : 400;\n                                    border-bottom : 1px solid ${colors.border1};\n\n                                    &:hover {\n                                        color: ${colors.green};\n\n                                        i {\n                                            color: #fff;\n                                        }\n                                    }\n\n                                    i {\n                                        float     : right;\n                                        margin-top: 4px;\n                                    }\n                                }\n\n                                &:last-child {\n                                    margin-left: 0;\n\n                                    a.nav-link {\n                                        border-bottom: none;\n                                    }\n                                }\n\n                                ul.dropdown2 {\n                                    position  : absolute;\n                                    top       : 0;\n                                    left      : 100%;\n                                    min-width : 180px;\n                                    background: #fff;\n                                    border    : 1px solid ${colors.border1};\n                                    transition : 0.2s ease;\n                                    opacity         : 0;\n                                    transform       : scaleY(0);\n                                    visibility      : hidden;\n                                    z-index         : 999;\n                                    transform-origin: center top 0;\n                                }\n\n                                &:hover {\n                                    ul.dropdown2 {\n                                        opacity   : 1;\n                                        transform : scaleY(1);\n                                        visibility: visible;\n                                    }\n                                }\n                            }\n                        }\n\n                        &:hover {\n                            ul.dropdown {\n                                opacity   : 1;\n                                transform : scaleY(1);\n                                visibility: visible;\n                            }\n                        }\n                    }\n                }\n\n                ul.search-cart-bar {\n                    li.search-box {\n                        i.close-btn {\n                            position : absolute;\n                            top      : 25px;\n                            right    : -12px;\n                            font-size: 26px;\n                            color    : ${colors.green};\n                            cursor   : pointer;\n                        }\n                    }\n\n                    li.cart-box {\n                        a.nav-cart {\n                            padding: 18px 0 0 10px;\n\n                            i {\n                                font-size: 20px;\n                                color    : ${colors.border1};\n                                line-height: 17px;\n                            }\n                        }\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    padding: 0 20px;\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            display : none;\n        }\n    }\n`;","import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { Container, Row, Col } from \"react-bootstrap\";\n// import { Dropdown } from \"react-bootstrap\";\nimport Search from \"./common/Search\";\n// import Sidebar from \"./common/Sidebar\";\nimport StickyMenu from \"./common/StickyMenu\";\nimport MobileMenu from \"./common/MobileMenu\";\nimport { Styles } from \"./styles/header.js\";\n\nclass Header extends Component {\n  render() {\n    return (\n      <Styles>\n        {/* Topbar */}\n        <section className=\"top-bar\">\n          <Container>\n            <Row>\n              <Col lg=\"6\" md=\"5\">\n                <div className=\"bar-left\">\n                  <ul className=\"list-unstyled list-inline\">\n                    <li className=\"list-inline-item\">\n                      <i className=\"las la-map-marker\"></i>DUTTAPUKUR DIST - NORTH 24 PARGANAS, PIN -\n                      743248.\n                    </li>\n                    <li className=\"list-inline-item\">\n                      <Link to={ \"/faq\"}>\n                        Have Questions\n                      </Link>\n                    </li>\n                  </ul>\n                </div>\n              </Col>\n              <Col lg=\"6\" md=\"7\">\n                <div className=\"bar-right d-flex justify-content-end\">\n                  {/* <ul className=\"list-unstyled list-inline bar-social\">\n                    <li className=\"list-inline-item\">\n                      <a href={ \"/\"}>\n                        <i className=\"fab fa-facebook-f\"></i>\n                      </a>\n                    </li>\n                    <li className=\"list-inline-item\">\n                      <a href={ \"/\"}>\n                        <i className=\"fab fa-twitter\"></i>\n                      </a>\n                    </li>\n                    <li className=\"list-inline-item\">\n                      <a href={ \"/\"}>\n                        <i className=\"fab fa-linkedin-in\"></i>\n                      </a>\n                    </li>\n                    <li className=\"list-inline-item\">\n                      <a href={ \"/\"}>\n                        <i className=\"fab fa-instagram\"></i>\n                      </a>\n                    </li>\n                  </ul> */}\n                  {/* <ul className=\"list-unstyled list-inline bar-lang\">\n                    <li className=\"list-inline-item\">\n                      <Dropdown>\n                        <Dropdown.Toggle as=\"a\">\n                          <img\n                            src={\n                               \"/assets/images/us.png\"\n                            }\n                            alt=\"\"\n                          />\n                          English<i className=\"las la-angle-down\"></i>\n                        </Dropdown.Toggle>\n                        <Dropdown.Menu as=\"ul\">\n                          <Dropdown.Item as=\"li\">\n                            <img\n                              src={\n                                 \"/assets/images/us.png\"\n                              }\n                              alt=\"\"\n                            />{\" \"}\n                            English\n                          </Dropdown.Item>\n                          <Dropdown.Item as=\"li\">\n                            <img\n                              src={\n                                \n                                \"/assets/images/fra.png\"\n                              }\n                              alt=\"\"\n                            />{\" \"}\n                            French\n                          </Dropdown.Item>\n                          <Dropdown.Item as=\"li\">\n                            <img\n                              src={\n                                \n                                \"/assets/images/ger.png\"\n                              }\n                              alt=\"\"\n                            />{\" \"}\n                            German\n                          </Dropdown.Item>\n                          <Dropdown.Item as=\"li\">\n                            <img\n                              src={\n                                \n                                \"/assets/images/spa.png\"\n                              }\n                              alt=\"\"\n                            />{\" \"}\n                            Spanish\n                          </Dropdown.Item>\n                          <Dropdown.Item as=\"li\">\n                            <img\n                              src={\n                                \n                                \"/assets/images/bra.png\"\n                              }\n                              alt=\"\"\n                            />{\" \"}\n                            Brazilian\n                          </Dropdown.Item>\n                        </Dropdown.Menu>\n                      </Dropdown>\n                    </li>\n                  </ul> */}\n                  {/* <ul className=\"list-unstyled list-inline bar-login\">\n                    <li className=\"list-inline-item\">\n                      <Link to={ \"/login\"}>\n                        <i className=\"las la-user\"></i>Log In\n                      </Link>\n                    </li>\n                    <li className=\"list-inline-item\">\n                      <Link to={ \"/registration\"}>\n                        <i className=\"las la-user-edit\"></i>Register\n                      </Link>\n                    </li>\n                  </ul> */}\n                </div>\n              </Col>\n            </Row>\n          </Container>\n        </section>\n\n        {/* Logo Area */}\n        <section className=\"logo-area\" style={{\n          width: \"90%\",\n          margin: \"auto\",\n        }} >\n            <Row>\n              <Col md=\"4\">\n                <div className=\"logo\">\n                  <Link to={ \"/\"}>\n                    <img\n                      src={\"https://res.cloudinary.com/da5mimn3m/image/upload/v1712737763/mlc/Monalisa%20D.pharma%20College/WhatsApp_Image_2024-04-07_at_09.25.12_o4jz3m.jpg\"}\n                      alt=\"\"\n                      style={{\n                        width: \"40px\",\n                        height: \"40px\",\n                      }}\n                    />\n                    <span style={{\n                      fontSize: \"20px\",\n                      fontWeight: \"bold\",\n                      color: \"black\",\n                      marginLeft: \"10px\",\n                    }}>\n                    Monalisa B.Ed College\n                    </span>\n                  </Link>\n                </div>\n              </Col>\n              <Col md=\"8\">\n                <div className=\"logo-contact-box d-flex justify-content-end\">\n                  <div className=\"emcontact-box d-flex\">\n                    <div className=\"box-icon\">\n                      <i className=\"flaticon-phone-call\"></i>\n                    </div>\n                    <div className=\"box-content\">\n                      <p>Call Us Now</p>\n                      <span>(+91) 9836922333</span>\n                    </div>\n                  </div>\n                  <div className=\"emcontact-box d-flex\">\n                    <div className=\"box-icon\">\n                      <i className=\"flaticon-envelope\"></i>\n                    </div>\n                    <div className=\"box-content\">\n                      <p>Enquery Us</p>\n                      <span>monalisab.edcollege@gmail.com</span>\n                    </div>\n                  </div>\n                  <div className=\"apply-btn\">\n                    <Link to={ \"/registration\"}>\n                      <i className=\"las la-clipboard-list\"></i>Apply Now\n                    </Link>\n                  </div>\n                </div>\n              </Col>\n            </Row>\n        </section>\n\n        {/* Navbar */}\n        <section className=\"main-menu\">\n          <Container>\n            <Row>\n              <Col md=\"12\">\n                <div className=\"main-menu-box\">\n                  <div className=\"menu-box d-flex justify-content-between\">\n                    <ul className=\"nav menu-nav\">\n                      <li className=\"nav-item dropdown active\">\n                        <Link\n                          className=\"nav-link dropdown-toggle\"\n                          to={ \"/\"}\n                          data-toggle=\"dropdown\"\n                        >\n                          HOME\n                          {/* Home <i className=\"las la-angle-down\"></i> */}\n                        </Link>\n                        {/* <ul className=\"dropdown list-unstyled\">\n                          <li className=\"nav-item active\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/\"}\n                            >\n                              Home Style 1\n                            </Link>\n                          </li>\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/home-two\"}\n                            >\n                              Home Style 2\n                            </Link>\n                          </li>\n                        </ul> */}\n                      </li>\n                      <li className=\"nav-item dropdown\">\n                        <Link\n                          className=\"nav-link dropdown-toggle\"\n                          to={ \"/\"}\n                          data-toggle=\"dropdown\"\n                        >\n                          About us <i className=\"las la-angle-down\"></i>\n                        </Link>\n                        <ul className=\"dropdown list-unstyled\">\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/about\"}\n                            >\n                              About Monalisa\n                            </Link>\n                          </li>\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/gallery\"}\n                            >\n                              Gallery\n                            </Link>\n                          </li>\n                          {/* <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/login\"}\n                            >\n                              Log In\n                            </Link>\n                          </li> */}\n                          {/* <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/registration\"}\n                            >\n                              Registration\n                            </Link>\n                          </li> */}\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/contact\"}\n                            >\n                              Contact\n                            </Link>\n                          </li>\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/faq\"}\n                            >\n                              Faq\n                            </Link>\n                          </li>\n                          {/* <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/404\"}\n                            >\n                              404\n                            </Link>\n                          </li> */}\n                          {/* <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/coming-soon\"}\n                            >\n                              Coming Soon\n                            </Link>\n                          </li> */}\n                        </ul>\n                      </li>\n                      <li className=\"nav-item dropdown\">\n                        <Link\n                          className=\"nav-link dropdown-toggle\"\n                          to={ \"/\"}\n                          data-toggle=\"dropdown\"\n                        >\n                          Courses\n                          <i className=\"las la-angle-down\"></i>\n                        </Link>\n                        <ul className=\"dropdown list-unstyled\">\n                          {/* <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/course-grid\"}\n                            >\n                              Course Grid\n                            </Link>\n                          </li> */}\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/course-list\"}\n                            >\n                              Course List\n                            </Link>\n                          </li>\n                          {/* <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/course-details\"}\n                            >\n                              Course Details\n                            </Link>\n                          </li> */}\n                        </ul>\n                      </li>\n                      {/* <li className=\"nav-item dropdown\">\n                        <Link\n                          className=\"nav-link dropdown-toggle\"\n                          to={ \"/\"}\n                          data-toggle=\"dropdown\"\n                        >\n                          Blog <i className=\"las la-angle-down\"></i>\n                        </Link>\n                        <ul className=\"dropdown list-unstyled\">\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/blog-classic\"}\n                            >\n                              Blog Classic\n                            </Link>\n                          </li>\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/blog-grid\"}\n                            >\n                              Blog Grid\n                            </Link>\n                          </li>\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/blog-details\"}\n                            >\n                              Blog Details\n                            </Link>\n                          </li>\n                        </ul>\n                      </li> */}\n                      {/* <li className=\"nav-item dropdown\">\n                        <Link\n                          className=\"nav-link dropdown-toggle\"\n                          to={ \"/\"}\n                          data-toggle=\"dropdown\"\n                        >\n                          Shop <i className=\"las la-angle-down\"></i>\n                        </Link>\n                        <ul className=\"dropdown list-unstyled\">\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/products\"}\n                            >\n                              Products\n                            </Link>\n                          </li>\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/product-details\"}\n                            >\n                              Product Details\n                            </Link>\n                          </li>\n                          <li className=\"nav-item\">\n                            <Link\n                              className=\"nav-link\"\n                              to={ \"/cart\"}\n                            >\n                              Cart\n                            </Link>\n                          </li>\n                        </ul>\n                      </li> */}\n                    </ul>\n                 \n                  </div>\n                </div>\n              </Col>\n            </Row>\n          </Container>\n        </section>\n\n        {/* Sticky Menu */}\n        <StickyMenu />\n\n        {/* Mobile Menu */}\n        <MobileMenu />\n      </Styles>\n    );\n  }\n}\n\nexport default Header;\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .hero-slider-area {\n        .swiper-container {\n            position: relative;\n\n            .swiper-wrapper {\n                .swiper-slide.slider-item {\n                    position: relative;\n\n                    .image-container {\n                        width   : 100%;\n                        display : block;\n                        overflow: hidden;\n                        position: relative;\n                        height  : 700px;\n\n                        img.slider-image {\n                            width     : auto;\n                            margin-top: 0;\n                            transition : all 6000ms linear;\n                            transform: scale(1);\n                        }\n\n                        @media(max-width: 767px) {\n                            height  : 100%;\n                        }\n\n                        @media(max-width: 575px) {\n                            height  : 100%;\n                        }\n                    }\n\n                    .slider-table {\n                        display : table;\n                        width   : 100%;\n                        height  : 100%;\n                        position: absolute;\n                        top     : 0;\n                        left    : 0;\n                        z-index : 9999;\n\n                        .slider-tablecell {\n                            display       : table-cell;\n                            vertical-align: middle;\n\n                            .slider-box {\n                                .slider-title {\n                                    p {\n                                        font-size     : 18px;\n                                        color         : ${colors.border3};\n                                        text-transform: uppercase;\n                                        margin-bottom : 8px;\n                                    }\n                                }\n\n                                .slider-desc {\n                                    h1 {\n                                        font-size    : 46px;\n                                        color        : #ffffff;\n                                        max-width    : 700px;\n                                        margin-bottom: 32px;\n                                        font-weight  : 600;\n\n                                        @media(max-width: 767px) {\n                                            font-size    : 26px;\n                                            font-weight  : 500;\n                                        }\n                                    }\n                                }\n\n                                .slider-btn {\n                                    a.slider-btn1 {\n                                        font-size : 14px;\n                                        color     : #fff;\n                                        background: ${colors.gr_bg};\n                                        display   : inline-block;\n                                        width     : 145px;\n                                        height    : 40px;\n                                        text-align: center;\n                                        padding   : 11px;\n                                        border-radius : 5px;\n\n                                        &:hover {\n                                            background: ${colors.gr_bg2};\n                                        }\n                                    }\n\n                                    a.slider-btn2 {\n                                        font-size : 14px;\n                                        color     : #fff;\n                                        display   : inline-block;\n                                        background: ${colors.bg1};\n                                        width     : 145px;\n                                        height    : 40px;\n                                        text-align: center;\n                                        padding   : 11px;\n                                        border-radius : 5px;\n                                        margin-left: 15px;\n\n                                        &:hover {\n                                            background: ${colors.gr_bg};\n                                            border    : none;\n                                            color     : #ffffff;\n                                        }\n                                    }\n                                }\n                                @media(max-width: 575px) {\n                                    text-align  : center !important;\n                                }\n                            }\n\n                            .slider-box2 {\n                                .slider-desc {\n                                    h1 {\n                                        margin-left: auto;\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n\n                .swiper-slide.slider-item.swiper-slide-visible.swiper-slide-active {\n                    .image-container {\n                        img.slider-image {\n                            transform: scale(1.15);\n                        }\n                    }\n\n                    .slider-table {\n                        .slider-tablecell {\n                            .slider-title {\n                                animation-name     : fadeInDown;\n                                animation-duration : 1s;\n                                animation-delay    : 0.2s;\n                                animation-fill-mode: both;\n                            }\n\n                            .slider-desc {\n                                animation-name     : fadeInUp;\n                                animation-duration : 1.5s;\n                                animation-delay    : 0.2s;\n                                animation-fill-mode: both;\n                            }\n\n                            .slider-btn {\n                                animation-name     : fadeInUp;\n                                animation-duration : 2s;\n                                animation-delay    : 0.2s;\n                                animation-fill-mode: both;\n                            }\n                        }\n                    }\n                }\n            }\n\n            .swiper-btn {\n                position   : absolute;\n                top        : 50%;\n                left       : 40px;\n                width      : 45px;\n                height     : 45px;\n                font-size  : 24px;\n                color      : ${colors.border1};\n                text-align : center;\n                padding-top: 5px;\n                border-radius : 5px;\n                transition : all 0.3s ease;\n                margin-top: -35px;\n                z-index   : 111;\n\n                i {}\n\n                &:hover {\n                    background: ${colors.gr_bg};\n                    color     : #ffffff;\n                }\n            }\n\n            .swiper-btn.slider-button-next {\n                left : inherit;\n                right: 40px;\n            }\n        }\n    }\n`;","import React, { Component } from \"react\";\nimport Datas from \"../data/hero/hero-slider.json\";\nimport { Link } from \"react-router-dom\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport Swiper from \"react-id-swiper\";\nimport { Styles } from \"./styles/heroSlider.js\";\n\nclass HeroSlider extends Component {\n  render() {\n    const settings = {\n      slidesPerView: 1,\n      loop: true,\n      speed: 3000,\n      autoplay: {\n        delay: 3000,\n        disableOnInteraction: false,\n      },\n      watchSlidesVisibility: true,\n      // effect: \"fade\",\n      navigation: {\n        nextEl: \".slider-button-next\",\n        prevEl: \".slider-button-prev\",\n      },\n      renderPrevButton: () => (\n        <div className=\"swiper-btn slider-button-prev\">\n          <i className=\"flaticon-arrow-left-th\"></i>\n        </div>\n      ),\n      renderNextButton: () => (\n        <div className=\"swiper-btn slider-button-next\">\n          <i className=\"flaticon-arrow-right-th\"></i>\n        </div>\n      ),\n    };\n\n    return (\n      <Styles>\n        {/* Hero Slider */}\n        <section className=\"hero-slider-area\">\n          <Swiper {...settings}>\n            {Datas.map((data, i) => (\n              <div className=\"slider-item\" key={i}>\n                <div className=\"image-container\">\n                  <img\n                    src={`/assets/images/slider/${data.backgroundImage}`}\n                    className=\"slider-image\"\n                    alt={data.backgroundImage}\n                    style={{ width: \"1920px\", height: \"814px\" }}\n                  />\n                </div>\n                <div className=\"slider-table\">\n                  <div className=\"slider-tablecell\">\n                    <Container>\n                      <Row>\n                        <Col md=\"12\">\n                          <div className={data.uniqClass}>\n                            <div className=\"slider-title\">\n                              <p style={{\n                                color : \"black\"\n                              }}>{data.title}</p>\n                            </div>\n                            <div className=\"slider-desc\">\n                              <h1 style={{\n                              }}>{data.desc}</h1>\n                            </div>\n                            <div className=\"slider-btn\">\n                              <Link\n                                className=\"slider-btn1\"\n                                to={\n                                   `/${data.btnOneLink}`\n                                }\n                              >\n                                Our Courses\n                              </Link>\n                              <Link\n                                className=\"slider-btn2\"\n                                to={\n                                   `/${data.btnTwoLink}`\n                                }\n                              >\n                                Contact Us\n                              </Link>\n                            </div>\n                          </div>\n                        </Col>\n                      </Row>\n                    </Container>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </Swiper>\n        </section>\n      </Styles>\n    );\n  }\n}\n\nexport default HeroSlider;\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .icon-box-area {\n        padding-bottom: 80px;\n\n        .full-icon-box {\n            position: relative;\n\n            .icon-box {\n                position  : absolute;\n                top       : -20px;\n                left      : 0;\n                width     : 100%;\n                background: #fff;\n                padding   : 35px 20px 20px;\n                z-index   : 9;\n                box-shadow: 0 12px 25px rgba(0, 0, 0, 0.07);\n                border-radius : 5px;\n\n                .box-icon {\n                    background  : ${colors.bg1};\n                    height      : 36px;\n                    text-align  : center;\n                    margin-right: 20px;\n                    position    : relative;\n\n                    i {\n                        font-size : 34px;\n                        color     : #ffffff;\n                        width     : 60px;\n                        display   : inline-block;\n                        position  : relative;\n                        z-index   : 111;\n                        margin-top: -8px;\n                        \n                        @media(max-width: 991px) {\n                            font-size: 24px;\n                            width : 45px;\n                        }\n                        \n                        @media(max-width: 767px) {\n                            font-size: 34px;\n                            width : 60px;\n                        }\n                    }\n\n                    &::before {\n                        content            : \"\";\n                        position           : absolute;\n                        border-width       : 15px 30px;\n                        border-style       : solid;\n                        border-top-color   : transparent;\n                        border-right-color : transparent;\n                        border-bottom-color: ${colors.bg1};\n                        border-left-color  : transparent;\n                        top                : -30px;\n                        left               : 0;\n                        z-index            : 1;\n\n                        @media(max-width: 991px) {\n                            border-width: 12px 23px;\n                            top: -24px;\n                        }\n\n                        @media(max-width: 767px) {\n                            border-width       : 15px 30px;\n                            top                : -30px;\n                        }\n                    }\n\n                    &:after {\n                        content            : \"\";\n                        position           : absolute;\n                        border-width       : 15px 30px;\n                        border-style       : solid;\n                        border-top-color   : ${colors.bg1};\n                        border-right-color : transparent;\n                        border-bottom-color: transparent;\n                        border-left-color  : transparent;\n                        bottom             : -30px;\n                        left               : 0;\n                        z-index            : 1;\n\n                        @media(max-width: 991px) {\n                            border-width: 12px 23px;\n                            bottom: -24px;\n                        }\n\n                        @media(max-width: 767px) {\n                            border-width       : 15px 30px;\n                            bottom             : -30px;\n                        }\n                    }\n\n                    @media(max-width: 991px) {\n                        height: 22px;\n                        margin-right: 10px;\n                    }\n\n                    @media(max-width: 767px) {\n                        height: 36px;\n                        margin-right: 20px;\n                    }\n                }\n\n                .box-icon.box1 {\n                    background: ${colors.red};\n\n                    &:before {\n                        border-bottom-color: ${colors.red};\n                    }\n\n                    &:after {\n                        border-top-color: ${colors.red};\n                    }\n                }\n\n                .box-icon.box2 {\n                    background: ${colors.purple};\n\n                    &:before {\n                        border-bottom-color: ${colors.purple};\n                    }\n\n                    &:after {\n                        border-top-color: ${colors.purple};\n                    }\n                }\n\n                .box-icon.box3 {\n                    background: ${colors.blue};\n\n                    &:before {\n                        border-bottom-color: ${colors.blue};\n                    }\n\n                    &:after {\n                        border-top-color: ${colors.blue};\n                    }\n                }\n\n                .box-title {\n                    margin-top: -15px;\n\n                    h6 {\n                        color         : ${colors.black1};\n                        text-transform: uppercase;\n                        font-weight   : 600;\n                        margin-bottom : 6px;\n\n                        @media(max-width: 991px) {\n                            font-size: 14px;\n                            letter-spacing: 0;\n                        }\n\n                        @media(max-width: 767px) {\n                            font-size: 16px;\n                            letter-spacing: 0.3px;\n                        }\n                    }\n\n                    p {\n                        font-size: 14px;\n                        color    : ${colors.text3};\n\n                        @media(max-width: 991px) {\n                            font-size: 13px;\n                        }\n\n                        @media(max-width: 767px) {\n                            font-size: 14px;\n                        }\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    padding: 25px 10px 8px;\n                }\n\n                @media(max-width: 767px) {\n                    padding: 35px 20px;\n                    position: unset;\n                    margin-bottom: 25px;\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 40px 0 0;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../data/icon-box/icon-box.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { Styles } from \"./styles/iconBox.js\";\n\nclass IconBox extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Icon Box */}\n                <section className=\"icon-box-area\">\n                    <Container>\n                        <Row>\n                            {\n                                Datas.map((data, i) => (\n                                    <Col md=\"4\" key={i}>\n                                        <div className=\"full-icon-box\">\n                                            <div className=\"icon-box d-flex\">\n                                                <div className={data.uniqClass}>\n                                                    <i className={data.boxIcon}></i>\n                                                </div>\n                                                <div className=\"box-title\">\n                                                    <h6>{data.title}</h6>\n                                                    <p>{data.subTitle}</p>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </Col>\n                                ))\n                            }\n                        </Row>\n                    </Container>\n                </section>\n            </Styles>\n        )\n    }\n}\n\nexport default IconBox\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .about-us {\n        padding: 78px 0 85px;\n\n        .about-image {\n            position: relative;\n\n            img.main-img {\n                width        : 90%;\n                border-radius: 5px;\n\n                @media(max-width: 767px) {\n                    display : none;\n                }\n            }\n\n            img.pattern-img {\n                position: absolute;\n                top     : 100%;\n                left    : 0;\n\n                @media(max-width: 1199px) {\n                    max-width : 100%;\n                }\n\n                @media(max-width: 767px) {\n                    display : none;\n                }\n            }\n\n            .video-player {\n                position           : absolute;\n                bottom             : -83px;\n                right              : 0;\n                width              : 205px;\n                height             : 255px;\n                background-size    : cover;\n                background-position: center;\n                background-repeat  : no-repeat;\n                border-radius      : 5px;\n\n                &::before {\n                    position        : absolute;\n                    content         : '';\n                    background-color: rgba(0, 0, 0, 0.2);\n                    width           : 100%;\n                    height          : 100%;\n                    top             : 0;\n                    left            : 0;\n                    border-radius : 5px;\n                }\n\n                button.play-button {\n                    position  : absolute;\n                    z-index   : 10;\n                    top       : 50%;\n                    left      : 50%;\n                    transform : translateX(-50%) translateY(-50%);\n                    box-sizing: content-box;\n                    display   : block;\n                    width     : 32px;\n                    height    : 44px;\n                    border-radius : 50%;\n\n                    i {\n                        position   : relative;\n                        font-size  : 40px;\n                        color      : ${colors.bg1};\n                        z-index    : 11;\n                        padding-top: 2px;\n                        margin-left: -2px;\n                    }\n\n                    &::before {\n                        content   : \"\";\n                        position  : absolute;\n                        z-index   : 0;\n                        left      : 50%;\n                        top       : 50%;\n                        transform : translateX(-50%) translateY(-50%);\n                        display   : block;\n                        width     : 70px;\n                        height    : 70px;\n                        background: #ffffff;\n                        border-radius : 50%;\n                        animation: pulse-border 1500ms ease-out infinite;\n                    }\n\n                    &:after {\n                        content   : \"\";\n                        position  : absolute;\n                        z-index   : 1;\n                        left      : 50%;\n                        top       : 50%;\n                        transform : translateX(-50%) translateY(-50%);\n                        display   : block;\n                        width     : 70px;\n                        height    : 70px;\n                        background: #ffffff;\n                        border-radius : 50%;\n                        transition : all 200ms;\n                    }\n\n                    &:hover {\n                        i {\n                            color: ${colors.green};\n                        }\n                    }\n\n                    @keyframes pulse-border {\n                        0% {\n                            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);\n                            opacity  : 1;\n                        }\n\n                        100% {\n                            transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);\n                            opacity  : 0;\n                        }\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    bottom: -70%;\n                }\n\n                @media(max-width: 767px) {\n                    position: unset;\n                    width: 100%;\n                    height: 250px;\n                    margin-bottom: 30px;\n                }\n            }\n        }\n\n        .about-content {\n            h4.about-title {\n                color        : ${colors.black1};\n                line-height  : 35px;\n                font-weight  : 600;\n                margin-bottom: 25px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n\n            p.about-para {\n                font-size    : 15px;\n                color        : ${colors.text3};\n                line-height  : 25px;\n                margin-bottom: 40px;\n\n                span {\n                    display   : block;\n                    margin-top: 20px;\n                }\n\n                @media(max-width: 575px) {\n                    margin-bottom : 20px;\n                }\n            }\n\n            .counter-box {\n                h3 {\n                    margin-bottom: 10px;\n\n                    span {\n                        font-weight: 600;\n                    }\n\n                    i {\n                        font-size     : 20px;\n                        vertical-align: middle;\n                    }\n                }\n\n                p {\n                    font-size  : 14px;\n                    color      : ${colors.text3};\n                    font-weight: 500;\n                }\n\n                @media(max-width: 575px) {\n                    display : none;\n                }\n            }\n\n            .counter-box.box1 {\n                h3 {\n                    color: ${colors.red};\n                }\n            }\n\n            .counter-box.box2 {\n                h3 {\n                    color: ${colors.purple};\n                }\n            }\n\n            .counter-box.box3 {\n                h3 {\n                    color: ${colors.blue};\n                }\n            }\n\n            a.readmore-btn {\n                font-size : 14px;\n                color     : #fff;\n                background: ${colors.gr_bg};\n                display   : inline-block;\n                width     : 145px;\n                height    : 40px;\n                text-align: center;\n                padding   : 11px;\n                border-radius : 5px;\n                margin-top: 40px;\n\n                &:hover {\n                    background: ${colors.gr_bg2};\n                }\n\n                @media(max-width: 575px) {\n                    margin-top : 0;\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 30px 0 40px;\n        }\n    }\n`;","import React, { Component } from \"react\";\nimport Datas from \"../data/about-us/about-us.json\";\nimport { Link } from \"react-router-dom\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport ModalVideo from \"react-modal-video\";\nimport CountUp from \"react-countup\";\nimport { Styles } from \"./styles/aboutUs.js\";\n\nclass AboutUs extends Component {\n  constructor() {\n    super();\n    this.state = {\n      isOpen: false,\n    };\n    this.openModal = this.openModal.bind(this);\n  }\n\n  openModal() {\n    this.setState({ isOpen: true });\n  }\n\n  render() {\n    return (\n      <Styles>\n        {/* About Us */}\n        <section className=\"about-us\">\n          <Container>\n            <Row>\n              <Col md=\"6\">\n                <div className=\"about-image\">\n                  <img\n                    src={`/assets/images/${Datas.mainImage}`}\n                    className=\"main-img\"\n                    alt=\"\"\n                  />\n                  <img\n                    src={ \"/assets/images/pattern.png\"}\n                    className=\"pattern-img\"\n                    alt=\"\"\n                  />\n                  <div\n                    className=\"video-player\"\n                    style={{\n                      backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${Datas.videoBackground})`,\n                    }}\n                  >\n                    <ModalVideo\n                      channel=\"youtube\"\n                      isOpen={this.state.isOpen}\n                      videoId=\"uXFUl0KcIkA\"\n                      onClose={() => this.setState({ isOpen: false })}\n                    />\n                    <button onClick={this.openModal} className=\"play-button\">\n                      <i className=\"las la-play\"></i>\n                    </button>\n                  </div>\n                </div>\n              </Col>\n              <Col md=\"6\">\n                <div className=\"about-content\">\n                  <h4 className=\"about-title\">{Datas.title}</h4>\n                  <p className=\"about-para\">\n                    {Datas.desc1}\n                    <span>{Datas.desc2}</span>\n                  </p>\n                  <Row>\n                    <Col sm=\"4\">\n                      <div className=\"counter-box box1 text-center\">\n                        <h3>\n                          <CountUp end={970} duration={5} delay={1.5} />\n                          <i className=\"las la-plus\"></i>\n                        </h3>\n                        <p>Happy Students</p>\n                      </div>\n                    </Col>\n                    <Col sm=\"4\">\n                      <div className=\"counter-box box2 text-center\">\n                        <h3>\n                          <CountUp end={130} duration={5} delay={1.5} />\n                          <i className=\"las la-plus\"></i>\n                        </h3>\n                        <p>Teachers</p>\n                      </div>\n                    </Col>\n                    <Col sm=\"4\">\n                      <div className=\"counter-box box3 text-center\">\n                        <h3>\n                          <CountUp end={340} duration={5} delay={1.5} />\n                          <i className=\"las la-plus\"></i>\n                        </h3>\n                        <p>Courses</p>\n                      </div>\n                    </Col>\n                  </Row>\n                  <Link\n                    className=\"readmore-btn\"\n                    to={ \"/about\"}\n                  >\n                    Read More\n                  </Link>\n                </div>\n              </Col>\n            </Row>\n          </Container>\n        </section>\n      </Styles>\n    );\n  }\n}\n\nexport default AboutUs;\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .course-filter {\n        background: ${colors.bg2};\n        padding   : 62px 0 70px;\n\n        .sec-title {\n            h4 {\n                color        : ${colors.black1};\n                line-height  : 35px;\n                font-weight  : 600;\n                max-width    : 550px;\n                margin       : auto;\n                margin-bottom: 42px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n        }\n\n        .filter-btns {\n            ul.filter-btn-list {\n                background-color: #ffffff;\n                display         : inline-block;\n                border-radius : 5px;\n                box-shadow   : 0 12px 25px rgba(0, 0, 0, 0.07);\n                margin-bottom: 52px;\n\n                li {\n                    font-size    : 14px;\n                    color        : ${colors.black2};\n                    font-weight  : 500;\n                    padding      : 10px 20px;\n                    cursor       : pointer;\n                    border-radius: 5px;\n\n                    @media(max-width: 767px) {\n                        font-size: 13px;\n                        padding: 8px 12px;\n                    }\n                }\n\n                li.active {\n                    background: ${colors.gr_bg};\n                    color     : #ffffff;\n                }\n\n                @media(max-width: 575px) {\n                    margin-bottom: 35px;\n                }\n            }\n        }\n\n        .filter-items {\n            .course-item {\n                transition : all 0.2s ease;\n                margin-bottom: 30px;\n\n                .course-image {\n                    width              : 100%;\n                    height             : 220px;\n                    background-size    : cover;\n                    background-position: center;\n                    background-repeat  : no-repeat;\n                    border-radius : 5px 5px 0 0;\n                    position: relative;\n\n                    .author-img {\n                        position: absolute;\n                        left    : 20px;\n                        bottom  : 20px;\n\n                        img {\n                            max-width: 40px;\n                            border-radius : 50%;\n                            margin-right: 5px;\n                        }\n\n                        .title {\n                            background: #ffffff;\n                            padding   : 3px 8px;\n                            border-radius : 5px;\n\n                            p {\n                                font-size    : 12px;\n                                color        : ${colors.black1};\n                                font-weight  : 500;\n                                margin-bottom: -4px;\n                            }\n\n                            span {\n                                font-size  : 11px;\n                                color      : ${colors.text3};\n                                font-weight: 500;\n                            }\n                        }\n\n                    }\n\n                    .course-price {\n                        p {\n                            font-size  : 16px;\n                            color      : #ffffff;\n                            background : ${colors.bg1};\n                            position   : absolute;\n                            right      : 20px;\n                            bottom     : 20px;\n                            padding    : 8px 10px;\n                            font-weight: 500;\n                            border-radius : 5px;\n                        }\n                    }\n                }\n\n                .course-content {\n                    background: #fff;\n                    padding   : 20px 25px;\n                    border-radius : 0 0 5px 5px;\n\n                    h6.heading {\n                        a {\n                            color        : ${colors.black1};\n                            font-weight  : 600;\n                            display      : inline-block;\n                            margin-bottom: 12px;\n\n                            &:hover {\n                                color: ${colors.green};\n                            }\n                        }\n                    }\n\n                    p.desc {\n                        font-size     : 14px;\n                        color         : ${colors.text3};\n                        line-height   : 25px;\n                        border-bottom : 1px solid ${colors.border1};\n                        padding-bottom: 10px;\n                        margin-bottom : 12px;\n                    }\n\n                    .course-face {\n\n                        .duration,\n                        .student {\n                            p {\n                                font-size: 13px;\n                                color    : ${colors.text3};\n\n                                i {\n                                    font-size     : 16px;\n                                    color         : ${colors.green};\n                                    vertical-align: text-bottom;\n                                    margin-right  : 3px;\n                                }\n                            }\n                        }\n\n                        .rating {\n                            ul {\n                                li {\n                                    margin-right: 0;\n\n                                    i {\n                                        font-size: 14px;\n                                        color    : ${colors.yellow};\n                                    }\n\n                                    &:last-child {\n                                        font-size: 13px;\n                                        color    : ${colors.text3};\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n\n                &:hover {\n                    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.07);\n                }\n            }\n        }\n\n        .viewall-btn {\n            a {\n                font-size     : 15px;\n                color         : #fff;\n                background    : ${colors.gr_bg};\n                display       : inline-block;\n                width         : 200px;\n                height        : 48px;\n                text-transform: uppercase;\n                font-weight   : 500;\n                text-align    : center;\n                padding       : 14px;\n                border-radius : 5px;\n                margin-top: 20px;\n\n                &:hover {\n                    background: ${colors.gr_bg2};\n                }\n\n                @media(max-width: 575px) {\n                    font-size: 13px;\n                    width: 170px;\n                    height: 42px;\n                    padding: 12px;\n                    margin-top: 10px;\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 25px 0 40px;\n        }\n    }\n`;","import React, { useEffect } from 'react';\nimport Datas from '../data/course/filter.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { Styles } from \"./styles/courseFilter.js\";\n\nfunction CourseFilter() {\n    useEffect(() => {\n        const buttons = document.querySelector(\".filter-btn-list\").children;\n        const items = document.querySelector(\".filter-items\").children;\n\n        for (let i = 0; i < buttons.length; i++) {\n            buttons[i].addEventListener(\"click\", function () {\n\n                for (let j = 0; j < buttons.length; j++) {\n                    buttons[j].classList.remove(\"active\");\n                }\n\n                this.classList.add(\"active\");\n                const target = this.getAttribute(\"data-target\");\n\n                for (let k = 0; k < items.length; k++) {\n                    items[k].style.display = \"none\";\n\n                    if (items[k].getAttribute(\"data-id\") === target) {\n                        items[k].style.display = \"block\";\n                    }\n\n                    if (target === \"*\") {\n                        items[k].style.display = \"block\";\n                    }\n                }\n            })\n        }\n    });\n\n    return (\n        <Styles>\n            {/* Course Area */}\n            <section className=\"course-filter\">\n                <Container>\n                    <Row>\n                        <Col md=\"12\">\n                            <div className=\"sec-title text-center\">\n                                <h4>{Datas.secTitle}</h4>\n                            </div>\n                        </Col>\n                        <Col md=\"12\">\n                            <div className=\"filter-btns text-center\">\n                                <ul className=\"filter-btn-list list-unstyled list inline\">\n                                    <li data-target=\"*\" className=\"active list-inline-item\">All Courses</li>\n                                    <li data-target=\"desi\" className=\"list-inline-item\">B.ED</li>\n                                    <li data-target=\"deve\" className=\"list-inline-item\">D.EL.ED</li>\n                                    {/* <li data-target=\"seo\" className=\"list-inline-item\">Seo</li>\n                                    <li data-target=\"prog\" className=\"list-inline-item\">Programming</li> */}\n                                </ul>\n                            </div>\n                            <Row className=\"filter-items\">\n                                {\n                                    Datas.dataList.map((data, i) => (\n                                        <Col lg=\"4\" md=\"6\" key={i} data-id={data.targetId}>\n                                            <div className=\"course-item\">\n                                                <Link to={ data.courseLink}>\n                                                    <div className=\"course-image\" style={{backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${data.imgUrl})`}}>\n                                                        <div className=\"author-img d-flex\">\n                                                            {/* <div className=\"img\">\n                                                                <img src={ `/assets/images/${data.authorImg}`} alt=\"\" />\n                                                            </div> */}\n                                                            {/* <div className=\"title\">\n                                                                <p>{data.authorName}</p>\n                                                                <span>{data.authorCourses}</span>\n                                                            </div> */}\n                                                        </div>\n                                                        {/* <div className=\"course-price\">\n                                                            <p>{data.price}</p>\n                                                        </div> */}\n                                                    </div>\n                                                </Link>\n                                                <div className=\"course-content\">\n                                                    <h6 className=\"heading\"><Link to={ data.courseLink}>{data.courseTitle}</Link></h6>\n                                                    <p className=\"desc\">{data.courseDesc}</p>\n                                                    <div className=\"course-face d-flex justify-content-between\">\n                                                        <div className=\"duration\">\n                                                            <p><i className=\"las la-clock\"></i>120</p>\n                                                        </div>\n                                                        <div className=\"rating\">\n                                                            <ul className=\"list-unstyled list-inline\">\n                                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i>\n                                                                </li>\n                                                                <li className=\"list-inline-item\">(4.5)</li>\n                                                            </ul>\n                                                        </div>\n                                                        <div className=\"student\">\n                                                            <p><i className=\"las la-chair\"></i>60</p>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </Col>\n                                    ))\n                                }\n                            </Row>\n                        </Col>\n                        <Col md=\"12\" className=\"text-center\">\n                            <div className=\"viewall-btn\">\n                                <Link to={ \"/course-grid\"}>View All Courses</Link>\n                            </div>\n                        </Col>\n                    </Row>\n                </Container>\n            </section>\n        </Styles>\n    )\n}\n\nexport default CourseFilter\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .testimonial-area {\n        background-size    : cover;\n        background-position: center;\n        background-repeat  : no-repeat;\n        padding            : 63px 0;\n        position           : relative;\n\n        &:before {\n            position  : absolute;\n            content   : '';\n            background: ${colors.bg1};\n            opacity   : 0.98;\n            width     : 100%;\n            height    : 100%;\n            top       : 0;\n            left      : 0;\n        }\n\n        .sec-title {\n            h4 {\n                color        : #ffffff;\n                line-height  : 35px;\n                font-weight  : 600;\n                max-width    : 550px;\n                margin       : auto;\n                margin-bottom: 43px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n        }\n\n        .testimonial-slider {\n            .slider-item {\n                .desc {\n                    background-color: rgba(255, 255, 255, 0.08);\n                    padding         : 30px 38px;\n                    border-radius : 5px;\n                    position: relative;\n\n                    &::before {\n                        content         : \"\";\n                        position        : absolute;\n                        border-width    : 15px 15px;\n                        border-style    : solid;\n                        border-top-color: rgba(255, 255, 255, 0.08);\n                        ;\n                        border-right-color : transparent;\n                        border-bottom-color: transparent;\n                        border-left-color  : transparent;\n                        top                : 100%;\n                        left               : 47px;\n                        z-index            : 1;\n                    }\n\n                    h5 {\n                        font-size    : 18px;\n                        color        : ${colors.border1};\n                        margin-bottom: 15px;\n                    }\n\n                    p {\n                        font-size  : 13px;\n                        color      : ${colors.border3};\n                        line-height: 25px;\n                    }\n                }\n\n                .writer {\n                    margin-top : 35px;\n                    margin-left: 30px;\n\n                    img {\n                        max-width: 65px;\n                        border-radius : 50%;\n                        float       : left;\n                        margin-right: 15px;\n                    }\n\n                    h6 {\n                        color        : ${colors.border1};\n                        padding-top  : 10px;\n                        margin-bottom: 3px;\n                    }\n\n                    p {\n                        color: ${colors.border3};\n                    }\n                }\n            }\n\n            .slider-dot {\n                margin-top: 48px !important;\n\n                .swiper-pagination-bullet {\n                    width     : 22px;\n                    height    : 9px;\n                    background: ${colors.text4};\n                    display   : inline-block;\n                    margin    : 3px;\n                    opacity   : 1 !important;\n                    border-radius : 5px;\n                }\n\n                .swiper-pagination-bullet.swiper-pagination-bullet-active {\n                    background: ${colors.green};\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 30px 0;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../data/testimonial/testimonial-slider.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport Swiper from 'react-id-swiper';\nimport { Styles } from \"./styles/testimonialSlider.js\";\n\nclass TestimonialSlider extends Component {\n    render() {\n        const settings = {\n            slidesPerView: 2,\n            loop: true,\n            speed: 1000,\n            autoplay: {\n                delay: 3000,\n                disableOnInteraction: false\n            },\n            spaceBetween: 30,\n            watchSlidesVisibility: true,\n            pagination: {\n                el: '.slider-dot.text-center',\n                clickable: true\n            },\n            breakpoints: {\n                0: {\n                    slidesPerView: 1\n                },\n                576: {\n                    slidesPerView: 1\n                },\n                768: {\n                    slidesPerView: 2\n                },\n                992: {\n                    slidesPerView: 2\n                }\n            }\n        };\n\n        return (\n            <Styles>\n                {/* Testimonial Slider */}\n                <section className=\"testimonial-area\" style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${Datas.backgroundImage})` }}>\n                    <Container>\n                        <Row>\n                            <Col md=\"12\">\n                                <div className=\"sec-title text-center\">\n                                    <h4>{Datas.secTitle}</h4>\n                                </div>\n                            </Col>\n                            <Col md=\"12\" className=\"testimonial-slider\">\n                                <Swiper {...settings}>\n                                    {\n                                        Datas.dataList.map((data, i) => (\n                                            <div className=\"slider-item\" key={i}>\n                                                <div className=\"desc\">\n                                                    <h5>{data.testimonialTitle}</h5>\n                                                    <p>{data.testimonialDesc}</p>\n                                                </div>\n                                                <div className=\"writer\">\n                                                    <img src={ `/assets/images/${data.authorImg}`} className=\"slider-image\" alt={data.authorImg} />\n                                                    <h6>{data.authorName}</h6>\n                                                    <p>{data.authorTitle}</p>\n                                                </div>\n                                            </div>\n                                        ))\n                                    }\n                                </Swiper>\n                            </Col>\n                        </Row>\n                    </Container>\n                </section>\n            </Styles>\n        )\n    }\n}\n\nexport default TestimonialSlider\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .event-faq-area {\n        padding: 65px 0;\n\n        .event-area {\n            .sec-title {\n                h4 {\n                    color         : ${colors.black1};\n                    font-weight   : 600;\n                    text-transform: uppercase;\n                    margin-bottom : 37px;\n\n                    span {\n                        color: ${colors.green};\n                    }\n\n                    @media(max-width: 575px) {\n                        margin-bottom: 15px;\n                        font-size: 20px;\n                    }\n                }\n            }\n\n            .event-box {\n                margin-bottom: 35px;\n\n                .event-date {\n                    width : 70px;\n                    height: 70px;\n                    border-radius : 50%;\n                    color       : #fff;\n                    margin-top  : 8px;\n                    margin-right: 30px;\n                    position    : relative;\n\n                    &::before {\n                        content   : \"\";\n                        position  : absolute;\n                        width     : 70px;\n                        height    : 70px;\n                        background: ${colors.green};\n                        top       : 0;\n                        left      : 0;\n                        border-radius : 50% 3px 50% 50%;\n                        transform: rotate(45deg);\n                        z-index  : -1;\n                    }\n\n                    p {\n                        font-size  : 17px;\n                        max-width  : 50px;\n                        margin     : auto;\n                        line-height: 20px;\n                        padding-top: 13px;\n\n                        @media(max-width: 991px) {\n                            font-size: 15px;\n                            max-width: 56px;\n                            padding-left: 14px;\n                        }\n                    }\n                }\n\n                .event-details {\n                    margin-top: 5px;\n\n                    h6 {\n                        a {\n                            color        : ${colors.black1};\n                            display      : inline-block;\n                            font-weight  : 600;\n                            margin-bottom: 10px;\n\n                            &:hover {\n                                color: ${colors.green};\n                            }\n                        }\n                    }\n\n                    ul {\n                        margin-bottom: 5px;\n\n                        li {\n                            font-size  : 14px;\n                            color      : ${colors.text3};\n                            font-weight: 500;\n\n                            i {\n                                font-size   : 15px;\n                                margin-right: 3px;\n                                color       : ${colors.green};\n                            }\n                        }\n                    }\n\n                    p {\n                        color      : ${colors.text3};\n                        line-height: 22px;\n                    }\n                }\n\n                &:last-child {\n                    margin-bottom : 0;\n                }\n\n                @media(max-width: 991px) {\n                    margin-bottom: 17px;\n                }\n            }\n\n            @media(max-width: 767px) {\n                margin-bottom: 30px;\n            }\n\n            @media(max-width: 575px) {\n                margin-bottom: 10px;\n            }\n        }\n\n        .faq-area {\n            .sec-title {\n                h4 {\n                    color         : ${colors.black1};\n                    font-weight   : 600;\n                    text-transform: uppercase;\n                    margin-bottom : 45px;\n\n                    span {\n                        color: ${colors.green};\n                    }\n\n                    @media(max-width: 575px) {\n                        margin-bottom: 15px;\n                        font-size: 20px;\n                    }\n                }\n            }\n\n            .faq-box {\n                .faq-item {\n                    margin-bottom: 22px;\n\n                    button.accordion-button {\n                        border       : none;\n                        background   : transparent;\n                        margin-bottom: 15px;\n                        display      : block;\n                        width        : 100%;\n                        padding      : 0;\n                        text-align   : left;\n                        position     : relative;\n\n                        div.accordion-icon {\n                            background  : ${colors.green};\n                            height      : 18px;\n                            text-align  : center;\n                            float       : left;\n                            margin-right: 12px;\n                            position    : relative;\n\n                            i {\n                                font-size   : 20px;\n                                color       : #ffffff;\n                                width       : 32px;\n                                line-height : 18px;\n                                padding-left: 2px\n                            }\n\n                            &::before {\n                                content            : \"\";\n                                position           : absolute;\n                                border-width       : 8px 16px;\n                                border-style       : solid;\n                                border-top-color   : transparent;\n                                border-right-color : transparent;\n                                border-bottom-color: ${colors.green};\n                                border-left-color  : transparent;\n                                top                : -16px;\n                                left               : 0;\n                                z-index            : 1;\n                            }\n\n                            &::after {\n                                content            : \"\";\n                                position           : absolute;\n                                border-width       : 8px 16px;\n                                border-style       : solid;\n                                border-top-color   : ${colors.green};\n                                border-right-color : transparent;\n                                border-bottom-color: transparent;\n                                border-left-color  : transparent;\n                                bottom             : -16px;\n                                left               : 0;\n                                z-index            : 1;\n                            }\n                        }\n\n                        p {\n                            font-size  : 16px;\n                            color      : ${colors.black1};\n                            font-weight: 500;\n                            line-height: 18px;\n                        }\n                    }\n\n                    .accordion-content {\n                        max-height: 0;\n                        overflow  : hidden;\n                        transition: max-height 0.2s ease-in-out;\n\n                        p {\n                            font-size   : 14px;\n                            color       : ${colors.text3};\n                            line-height : 28px;\n                            padding-left: 45px;\n                        }\n                    }\n\n                    .accordion-content.show {\n                        max-height: 100%;\n                    }\n\n                    &:last-child {\n                        margin-bottom : 0;\n                    }\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 30px 0;\n        }\n    }\n`;","import React, { useEffect } from 'react';\nimport Datas from '../data/faq/faq.json';\n// import { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { Styles } from \"./styles/faqEvent.js\";\n\nfunction FaqEvent() {\n    useEffect(() => {\n        const accordionButton = document.querySelectorAll(\".accordion-button\");\n        accordionButton.forEach(button => {\n            button.addEventListener(\"click\", () => {\n                button.classList.toggle(\"active\");\n                const content = button.nextElementSibling;\n\n                if (button.classList.contains(\"active\")) {\n                    content.className = \"accordion-content show\";\n                    content.style.maxHeight = content.scrollHeight + \"px\";\n                } else {\n                    content.className = \"accordion-content\";\n                    content.style.maxHeight = \"0\";\n                }\n            });\n        });\n    });\n\n    return (\n        <Styles>\n            <section className=\"event-faq-area\">\n                <Container>\n                    <Row>\n                        <Col md=\"6\">\n                            <div className=\"faq-area\">\n                                <div className=\"sec-title\">\n                                    <h4>Frequently Ask <span>Question</span></h4>\n                                </div>\n                                <div className=\"faq-box\">\n                                    {\n                                        Datas?.map((faqData, i) => (\n                                            <div className=\"faq-item\" key={i}>\n                                                <button className=\"accordion-button active\">\n                                                    <div className=\"accordion-icon\"><i className=\"las la-plus\"></i></div>\n                                                    <p style={{\n                                                        marginLeft: \"3.5rem\"\n                                                    }}>{faqData.faqTitle}</p>\n                                                </button>\n                                                <div className=\"accordion-content show\">\n                                                    <p>{faqData.faqDesc}</p>\n                                                </div>\n                                            </div>\n                                        ))\n                                    }\n                                </div>\n                            </div>\n                        </Col>\n                    </Row>\n                </Container>\n            </section>\n        </Styles>\n    )\n}\n\nexport default FaqEvent\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .home-contact-area {\n        background-size    : cover;\n        background-position: center;\n        background-repeat  : no-repeat;\n        padding            : 65px 0 70px;\n        position           : relative;\n\n        &:before {\n            position  : absolute;\n            content   : \"\";\n            background: ${colors.bg1};\n            opacity   : 0.98;\n            width     : 100%;\n            height    : 100%;\n            top       : 0;\n            left      : 0;\n        }\n\n        .sec-title {\n            h4 {\n                color        : #ffffff;\n                line-height  : 35px;\n                font-weight  : 600;\n                max-width    : 550px;\n                margin       : auto;\n                margin-bottom: 45px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n        }\n\n        form.form {\n            p.form-control {\n                padding   : 0;\n                width     : auto;\n                height    : auto;\n                background: transparent;\n                border    : none;\n                position  : relative;\n\n                input {\n                    width           : 100%;\n                    height          : 50px;\n                    background-color: rgba(255, 255, 255, 0.08);\n                    font-size       : 15px;\n                    padding         : 15px 20px;\n                    color           : ${colors.border1};\n                    border          : none;\n                    border-radius : 5px;\n\n                    &:focus {\n                        background-color: #ffffff;\n                        color           : ${colors.black1};\n\n                        &::placeholder {\n                            color: ${colors.black1};\n                        }\n                    }\n\n                    &::placeholder {\n                        font-size  : 15px;\n                        font-style : italic;\n                        color      : ${colors.border1};\n                        font-weight: 300;\n                    }\n                }\n\n                span {\n                    color      : ${colors.border1};\n                    font-weight: 300;\n                    position   : absolute;\n                    bottom     : -22px;\n                    left       : 0;\n                    visibility : hidden;\n                }\n\n                @media(max-width: 767px) {\n                    margin-bottom: 30px;\n                }\n            }\n\n            p.form-control.success {\n                input {\n                    border: 2px solid ${colors.green};\n                }\n\n                &::before {\n                    position   : absolute;\n                    content    : \"\\f058\";\n                    font-family: \"Line Awesome Free\";\n                    font-size  : 24px;\n                    color      : ${colors.green};\n                    font-weight: 900;\n                    top        : 8px;\n                    right      : 10px;\n                }\n            }\n\n            p.form-control.error {\n                input {\n                    border: 2px solid ${colors.red};\n                }\n                &::before {\n                    position   : absolute;\n                    content    : \"\\f06a\";\n                    font-family: \"Line Awesome Free\";\n                    font-size  : 24px;\n                    color      : ${colors.red};\n                    font-weight: 900;\n                    top        : 8px;\n                    right      : 10px;\n                }\n            }\n\n            p.form-control.error {\n                span {\n                    visibility: visible;\n                }\n            }\n\n            button {\n                font-size : 15px;\n                color     : #fff;\n                background: ${colors.gr_bg};\n                width     : 180px;\n                height    : 50px;\n                border    : none;\n                border-radius : 5px;\n                margin-top: 50px;\n\n                &:hover {\n                    background: ${colors.gr_bg2};\n                }\n\n                @media(max-width: 767px) {\n                    margin-top: 5px;\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 30px 0 40px;\n        }\n    }\n`;","import React, { useEffect } from 'react';\nimport Datas from '../data/help-area/help-area.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { Styles } from \"./styles/homeContact.js\";\n\nfunction HelpArea() {\n    useEffect(() => {\n        const form = document.getElementById(\"form1\");\n        const name = document.getElementById(\"name1\");\n        const email = document.getElementById(\"email1\");\n        const subject = document.getElementById(\"subject1\");\n\n        form.addEventListener(\"submit\", formSubmit);\n\n        function formSubmit(e) {\n            e.preventDefault();\n\n            const nameValue = name.value.trim();\n            const emailValue = email.value.trim();\n            const subjectValue = subject.value.trim();\n\n            if (nameValue === \"\") {\n                setError(name, \"Name can't be blank\");\n            } else {\n                setSuccess(name);\n            }\n\n            if (emailValue === \"\") {\n                setError(email, \"Email can't be blank\");\n            } else if (!isEmail(emailValue)) {\n                setError(email, \"Not a valid email\");\n            } else {\n                setSuccess(email);\n            }\n\n            if (subjectValue === \"\") {\n                setError(subject, \"Subject can't be blank\");\n            } else {\n                setSuccess(subject);\n            }\n        }\n\n        function setError(input, message) {\n            const formControl = input.parentElement;\n            const errorMsg = formControl.querySelector(\".input-msg1\");\n            formControl.className = \"form-control error\";\n            errorMsg.innerText = message;\n        }\n\n        function setSuccess(input) {\n            const formControl = input.parentElement;\n            formControl.className = \"form-control success\";\n        }\n\n        function isEmail(email) {\n            return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/.test(email);\n        }\n    });\n\n    return (\n        <Styles>\n            {/* Help Area */}\n            <section className=\"home-contact-area\" style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${Datas.backgroundImage})` }}>\n                <Container>\n                    <Row>\n                        <Col md=\"12\">\n                            <div className=\"sec-title text-center\">\n                                <h4>{Datas.secTitle}</h4>\n                            </div>\n                        </Col>\n                        <Col md=\"12\">\n                            <form id=\"form1\" className=\"form\">\n                                <Row>\n                                    <Col md=\"4\">\n                                        <p className=\"form-control\">\n                                            <input type=\"text\" placeholder=\"Enter your Name\" id=\"name1\" />\n                                            <span className=\"input-msg1\"></span>\n                                        </p>\n                                    </Col>\n                                    <Col md=\"4\">\n                                        <p className=\"form-control\">\n                                            <input type=\"email\" placeholder=\"Enter your Email\" id=\"email1\" />\n                                            <span className=\"input-msg1\"></span>\n                                        </p>\n                                    </Col>\n                                    <Col md=\"4\">\n                                        <p className=\"form-control\">\n                                            <input type=\"text\" placeholder=\"Enter Subject\" id=\"subject1\" />\n                                            <span className=\"input-msg1\"></span>\n                                        </p>\n                                    </Col>\n                                    <Col md=\"12\" className=\"text-center\">\n                                        <button>Send Request</button>\n                                    </Col>\n                                </Row>\n                            </form>\n                        </Col>\n                    </Row>\n                </Container>\n            </section>\n        </Styles>\n    );\n}\n\nexport default HelpArea\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .home-blog-area {\n        padding: 63px 0 42px;\n\n        .sec-title {\n            h4 {\n                color        : ${colors.black1};\n                line-height  : 35px;\n                font-weight  : 600;\n                max-width    : 550px;\n                margin       : auto;\n                margin-bottom: 48px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n        }\n\n        .blog-post {\n            margin-bottom: 30px;\n\n            .blog-img {\n                a {\n                    img {\n                        border-radius : 5px;\n\n                        @media(max-width: 991px) {\n                            width: 100%;\n                            height: 215px;\n                            border-radius: 5px 5px 0 0;\n                        }\n\n                        @media(max-width: 767px) {\n                            height: 250px;\n                        }\n\n                        @media(max-width: 480px) {\n                            display : none;\n                        }\n                    }\n                }\n            }\n\n            .blog-content {\n                position: relative;\n\n                .content-box {\n                    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.08);\n                    padding   : 18px;\n                    background: #ffffff;\n                    border-radius : 5px;\n                    position: absolute;\n                    top     : 20px;\n                    left    : -22%;\n                    z-index : 1;\n\n                    .top-content {\n                        margin-bottom: 12px;\n\n                        .blog-date {\n                            p {\n                                font-size  : 16px;\n                                color      : #fff;\n                                background : ${colors.gr_bg};\n                                padding    : 8px 10px;\n                                line-height: 20px;\n                                border-radius : 5px;\n                                font-weight : 500;\n                                margin-right: 10px;\n                            }\n                        }\n\n                        .blog-title {\n                            h6 {\n                                a {\n                                    color      : ${colors.black1};\n                                    font-weight: 600;\n                                    display: inline-block;\n                                    line-height: 23px;\n                                    padding-top: 5px;\n\n                                    &:hover {\n                                        color: ${colors.green};\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    .blog-desk {\n                        p {\n                            font-size     : 14px;\n                            color         : ${colors.text3};\n                            border-bottom : 1px solid ${colors.border1};\n                            padding-bottom: 10px;\n                            margin-bottom : 10px;\n                        }\n\n                        ul {\n                            li {\n                                margin-right: 15px;\n\n                                a {\n                                    font-size: 12px;\n                                    color    : ${colors.text3};\n\n                                    i {\n                                        font-size     : 16px;\n                                        color         : ${colors.green};\n                                        vertical-align: text-bottom;\n                                    }\n\n                                    &:hover {\n                                        color: ${colors.green};\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    @media(max-width: 1199px) {\n                        top: 9px;\n                        left: -70%;\n                    }\n\n                    @media(max-width: 991px) {\n                        position : unset;\n                        border-radius: 0 0 5px 5px;\n                    }\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 30px 0 10px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../data/blog/home-blog.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { Styles } from \"./styles/homeBlog.js\";\n\nclass HomeBlog extends Component {\n    render() {\n        return (\n          <Styles>\n            {/* Blog Area */}\n            <section className=\"home-blog-area\">\n              <Container>\n                <Row>\n                  <Col md=\"12\">\n                    <div className=\"sec-title text-center\">\n                      <h4>{Datas.secTitle}</h4>\n                    </div>\n                  </Col>\n                  {Datas.dataList.map((data, i) => (\n                    <Col md=\"6\" key={i}>\n                      <div className=\"blog-post\">\n                        <Row>\n                          <Col lg=\"6\" md=\"12\">\n                            <div className=\"blog-img\">\n                              <Link to={ data.postLink}>\n                                <img\n                                  src={\n                                    \n                                    `/assets/images/${data.postImg}`\n                                  }\n                                  alt=\"\"\n                                  className=\"img-fluid\"\n                                  style={{ width: \"580px\", height: \"250px\" }}\n                                />\n                              </Link>\n                            </div>\n                          </Col>\n                          <Col lg=\"6\" md=\"12\">\n                            <div className=\"blog-content\">\n                              <div className=\"content-box\">\n                                <div className=\"top-content d-flex\">\n                                  <div className=\"blog-date text-center\">\n                                    <p>{data.postDate}</p>\n                                  </div>\n                                  <div className=\"blog-title\">\n                                    <h6>\n                                      {/* <Link\n                                        to={\n                                           data.postLink\n                                        }\n                                      > */}\n                                        {data.postTitle}\n                                      {/* </Link> */}\n                                    </h6>\n                                  </div>\n                                </div>\n                                <div className=\"blog-desk\">\n                                  <p>{data.postExcerpt}</p>\n                                  <ul className=\"list-unstyled list-inline\">\n                                    {/* <li className=\"list-inline-item\">\n                                      <Link\n                                        to={\n                                          \n                                          data.authorLink\n                                        }\n                                      >\n                                        <i className=\"las la-user\"></i> Jhon\n                                      </Link>\n                                    </li> */}\n                                    <li className=\"list-inline-item\">\n                                      <Link\n                                        to={\n                                          \n                                          data.commentLink\n                                        }\n                                      >\n                                        <i className=\"las la-comment\"></i> 19\n                                      </Link>\n                                    </li>\n                                    <li className=\"list-inline-item\">\n                                      <Link\n                                        to={\n                                           data.likeLink\n                                        }\n                                      >\n                                        <i className=\"las la-thumbs-up\"></i> 37\n                                      </Link>\n                                    </li>\n                                  </ul>\n                                </div>\n                              </div>\n                            </div>\n                          </Col>\n                        </Row>\n                      </div>\n                    </Col>\n                  ))}\n                </Row>\n              </Container>\n            </section>\n          </Styles>\n        );\n    }\n}\n\nexport default HomeBlog\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .campus-tour {\n        background: ${colors.bg2};\n        padding   : 63px 0 60px;\n\n        .sec-title {\n            h4 {\n                color        : ${colors.black1};\n                line-height  : 35px;\n                font-weight  : 600;\n                max-width    : 550px;\n                margin       : auto;\n                margin-bottom: 48px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n        }\n\n        .tour-box {\n            border-radius : 5px;\n            overflow     : hidden;\n            position     : relative;\n            margin-bottom: 30px;\n\n            img {\n                border-radius : 5px;\n                transition : all 0.3s ease;\n\n                &:hover {\n                    transform: scale(1.1);\n                }\n\n                @media(max-width: 767px) {\n                    width : 100%;\n                }\n            }\n\n            img.__react_modal_image__medium_img {\n                border-radius : 0;\n            }\n        }\n        @media(max-width: 767px) {\n            padding: 30px 0 25px;\n        }\n    }\n`;","import React, { Component } from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport ModalImage from \"react-modal-image\";\nimport { Styles } from \"./styles/campusTour.js\";\n\nclass CampusTour extends Component {\n  state = {\n    secTitle: \"We Have Best Campus In The Region. Let's Explore The Campus.\",\n  };\n\n  render() {\n    return (\n      <Styles>\n        {/* Campus Tour */}\n        <section className=\"campus-tour\">\n          <Container>\n            <Row>\n              <Col md=\"12\">\n                <div className=\"sec-title text-center\">\n                  <h4>{this.state.secTitle}</h4>\n                </div>\n              </Col>\n              <Col lg=\"2.3\" md=\"2\">\n                <div className=\"tour-box\">\n                  <ModalImage\n                    small={\n                      \"/assets/images/BUILDING_01.jpeg\"\n                    }\n                    large={\n                      \"/assets/images/BUILDING_01.jpeg\"\n                    }\n                    alt=\"\"\n                  />\n                </div>\n                <div className=\"tour-box\">\n                  <ModalImage\n                    small={\n                      \"/assets/images/BUILDING_03.jpeg\"\n                    }\n                    large={\n                      \"/assets/images/BUILDING_03.jpeg\"\n                    }\n                    alt=\"\"\n                  />\n                </div>\n              </Col>\n              <Col lg=\"4\" md=\"6\">\n                <Row>\n                  <Col lg=\"6\" md=\"6\">\n                    <div className=\"tour-box\">\n                      <ModalImage\n                        small={\n                          \"/assets/images/sweet.jpeg\"\n                        }\n                        large={\n                          \"/assets/images/sweet.jpeg\"\n                        }\n                        alt=\"\"\n                        style={{ height: \"160px\" }}\n                      />\n                    </div>\n                  </Col>\n                  <Col lg=\"6\" md=\"6\">\n                    <div className=\"tour-box\">\n                      <ModalImage\n                        small={\n                          \n                          \"/assets/images/BUILDING_03.jpeg\"\n                        }\n                        large={\n                          \n                          \"/assets/images/BUILDING_03.jpeg\"\n                        }\n                        alt=\"\"\n                      />\n                    </div>\n                  </Col>\n                  <Col lg=\"12\" h=\"10\">\n                    <div className=\"tour-box\" style={{ height: \"160px\" }}>\n                      <ModalImage\n                        small={\n                          \n                          \"/assets/images/BUILDING_02.jpeg\"\n                        }\n                        large={\n                          \n                          \"/assets/images/BUILDING_02.jpeg\"\n                        }\n                        alt=\"\"\n                      />\n                    </div>\n                  </Col>\n                </Row>\n              </Col>\n              <Col lg=\"2\" md=\"3\">\n                <div className=\"tour-box\">\n                  <ModalImage\n                    small={\"/assets/images/flag.jpg\"}\n                    large={\"/assets/images/flag.jpg\"}\n                    alt=\"\"\n                    \n                  />\n                </div>\n              </Col>\n              <Col lg=\"4\" md=\"12\">\n                <Row>\n                  <Col lg=\"12\" md=\"6\">\n                    <div className=\"tour-box\" style={{ height: \"160px\" }}>\n                      <ModalImage\n                        small={\n                          \"/assets/images/prize.jpeg\"\n                        }\n                        large={\n                          \"/assets/images/prize.jpeg\"\n                        }\n                        alt=\"\"\n                      />\n                    </div>\n                  </Col>\n                  <Col lg=\"6\" md=\"3\">\n                    <div className=\"tour-box\">\n                      <ModalImage\n                        small={\n                          \"/assets/images/yoga.jpeg\"\n                        }\n                        large={\n                          \"/assets/images/yoga.jpeg\"\n                        }\n                        alt=\"\"\n                      />\n                    </div>\n                  </Col>\n                  <Col lg=\"6\" md=\"3\">\n                    <div className=\"tour-box\">\n                      <ModalImage\n                        small={\n                          \"/assets/images/jyn.jpeg\"\n                        }\n                        large={\n                          \"/assets/images/jyn.jpeg\"\n                        }\n                        alt=\"\"\n                      />\n                    </div>\n                  </Col>\n                </Row>\n              </Col>\n            </Row>\n          </Container>\n        </section>\n      </Styles>\n    );\n  }\n}\n\nexport default CampusTour;\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .newsletter-form-area {\n        background-color: ${colors.bg1};\n\n        .newsletter-container {\n            position: relative;\n\n            .newsletter-box {\n                background: ${colors.gr_bg};\n                padding   : 37px 40px 40px;\n                border-radius : 5px;\n                position: absolute;\n                width   : 100%;\n                top     : -20px;\n                left    : 0;\n                z-index : 1;\n\n                .sec-title {\n                    h4 {\n                        color        : #ffffff;\n                        margin-bottom: 35px;\n\n                        @media(max-width: 575px) {\n                            margin-bottom: 15px;\n                            font-size: 20px;\n                        }\n                    }\n                }\n\n                form.form {\n                    p.form-control {\n                        padding   : 0;\n                        width     : auto;\n                        height    : auto;\n                        background: transparent;\n                        border    : none;\n                        position  : relative;\n\n                        input {\n                            width           : 100%;\n                            height          : 50px;\n                            background-color: #ffffff;\n                            font-size       : 14px;\n                            padding         : 15px 20px;\n                            color           : ${colors.black1};\n                            border          : none;\n                            border-radius : 5px;\n\n                            &::placeholder {\n                                font-size : 14px;\n                                font-style: italic;\n                                color     : ${colors.bg1};\n                            }\n\n                            @media(max-width: 480px) {\n                                height: 42px;\n                                padding: 15px;\n                            }\n                        }\n\n                        span {\n                            color      : #ffffff;\n                            font-weight: 300;\n                            position   : absolute;\n                            bottom     : -22px;\n                            left       : 0;\n                            visibility : hidden;\n                        }\n\n                        @media(max-width: 767px) {\n                            margin-bottom: 25px;\n                        }\n                    }\n\n                    p.form-control.success {\n                        input {\n                            border: 2px solid ${colors.green};\n                        }\n\n                        &::before {\n                            position   : absolute;\n                            content    : \"\\f058\";\n                            font-family: \"Line Awesome Free\";\n                            font-size  : 24px;\n                            color      : ${colors.green};\n                            font-weight: 900;\n                            top        : 8px;\n                            right      : 10px;\n                        }\n                    }\n\n                    p.form-control.error {\n                        input {\n                            border: 2px solid ${colors.red};\n                        }\n\n                        &::before {\n                            position   : absolute;\n                            content    : \"\\f06a\";\n                            font-family: \"Line Awesome Free\";\n                            font-size  : 24px;\n                            color      : ${colors.red};\n                            font-weight: 900;\n                            top        : 8px;\n                            right      : 10px;\n                        }\n                    }\n\n                    p.form-control.error {\n                        span {\n                            visibility: visible;\n                        }\n                    }\n\n                    button {\n                        font-size  : 14px;\n                        color      : #fff;\n                        background : ${colors.black1};\n                        width      : 100%;\n                        height     : 50px;\n                        font-weight: 500;\n                        border     : none;\n                        border-radius : 5px;\n                        text-transform: uppercase;\n\n                        i {\n                            font-size     : 22px;\n                            color         : ${colors.green};\n                            margin-right  : 5px;\n                            vertical-align: text-bottom;\n                            line-height   : 19px;\n                        }\n\n                        &:hover {\n                            background: ${colors.green};\n\n                            i {\n                                color: #ffffff;\n                            }\n                        }\n\n                        @media(max-width: 480px) {\n                            height: 42px;\n                        }\n                    }\n                }\n\n                @media(max-width: 767px) {\n                    padding: 25px 35px 35px;\n                }\n            }\n        }\n    }\n`;","import React, { useEffect } from 'react';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { Styles } from \"./styles/newsletterForm.js\";\n\nfunction NewsletterForm() {\n    let data = {\n        secTitle: 'Get The Latest News & Updates On Your Box',\n    }\n\n    useEffect(() => {\n        const form = document.getElementById(\"form2\");\n        const name = document.getElementById(\"name2\");\n        const email = document.getElementById(\"email2\");\n\n        form.addEventListener(\"submit\", formSubmit);\n\n        function formSubmit(e) {\n            e.preventDefault();\n\n            const nameValue = name.value.trim();\n            const emailValue = email.value.trim();\n\n            if (nameValue === \"\") {\n                setError(name, \"Name can't be blank\");\n            } else {\n                setSuccess(name);\n            }\n\n            if (emailValue === \"\") {\n                setError(email, \"Email can't be blank\");\n            } else if (!isEmail(emailValue)) {\n                setError(email, \"Not a valid email\");\n            } else {\n                setSuccess(email);\n            }\n        }\n\n        function setError(input, message) {\n            const formControl = input.parentElement;\n            const errorMsg = formControl.querySelector(\".input-msg2\");\n            formControl.className = \"form-control error\";\n            errorMsg.innerText = message;\n        }\n\n        function setSuccess(input) {\n            const formControl = input.parentElement;\n            formControl.className = \"form-control success\";\n        }\n\n        function isEmail(email) {\n            return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/.test(email);\n        }\n    });\n\n    return (\n        <Styles>\n            {/* Newsletter Form */}\n            <section className=\"newsletter-form-area\">\n                <Container>\n                    <Row>\n                        <Col md=\"12\">\n                            <div className=\"newsletter-container\">\n                                <div className=\"newsletter-box\">\n                                    <div className=\"sec-title text-center\">\n                                        <h4>{data.secTitle}</h4>\n                                    </div>\n                                    <form id=\"form2\" className=\"form\">\n                                        <Row>\n                                            <Col md=\"4\">\n                                                <p className=\"form-control\">\n                                                    <input type=\"text\" placeholder=\"Enter your Name\" id=\"name2\" />\n                                                    <span className=\"input-msg2\"></span>\n                                                </p>\n                                            </Col>\n                                            <Col md=\"4\">\n                                                <p className=\"form-control\">\n                                                    <input type=\"email\" placeholder=\"Enter your Email\" id=\"email2\" />\n                                                    <span className=\"input-msg2\"></span>\n                                                </p>\n                                            </Col>\n                                            <Col md=\"4\">\n                                                <button><i className=\"las la-envelope\"></i>Subscribe Now</button>\n                                            </Col>\n                                        </Row>\n                                    </form>\n                                </div>\n                            </div>\n                        </Col>\n                    </Row>\n                </Container>\n            </section>\n        </Styles>\n    );\n}\n\nexport default NewsletterForm\n","import styled from \"styled-components\";\nimport { colors } from \"../element/elements.js\";\n\nexport const Styles = styled.div`\n    button.totop-btn {\n        background : ${colors.gr_bg};\n        position: fixed;\n        bottom : 1px;\n        right : 30px;\n        width : 45px;\n        height: 45px;\n        border-radius : 5px;\n        display : flex;\n        align-items : center;\n        justify-content : center;\n        font-size : 28px;\n        border : none;\n        color : #ffffff;\n        text-decoration : none;\n        z-index : 1000;\n        opacity: 0;\n        pointer-events : none;\n        transition : all 0.4s;\n        &:hover {\n            background : ${colors.gr_bg2};\n        }\n    }\n\n    button.totop-btn.show {\n        bottom : 40px;\n        opacity: 1;\n        pointer-events : auto;\n    }\n`;","import React, { useEffect } from 'react';\nimport { Styles } from \"./styles/backToTop.js\";\n\nfunction BackToTop() {\n    useEffect(() => {\n        const topBtn = document.querySelector(\".totop-btn\");\n\n        window.addEventListener(\"scroll\", () => {\n            if (window.scrollY > 750) {\n                topBtn.classList.add(\"show\");\n            } else {\n                topBtn.classList.remove(\"show\");\n            }\n        });\n\n        topBtn.addEventListener(\"click\", smoothScrollBackToTop);\n\n        function smoothScrollBackToTop() {\n            const targetPosition = 0;\n            const startPosition = window.pageYOffset;\n            const distance = targetPosition - startPosition;\n            const duration = 750;\n            let start = null;\n\n            window.requestAnimationFrame(step);\n\n            function step(timestamp) {\n                if (!start) start = timestamp;\n                const progress = timestamp - start;\n                window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));\n                if (progress < duration) window.requestAnimationFrame(step);\n            }\n        }\n\n        function easeInOutCubic(t, b, c, d) {\n            t /= d / 2;\n            if (t < 1) return c / 2 * t * t * t + b;\n            t -= 2;\n            return c / 2 * (t * t * t + 2) + b;\n        };\n    });\n\n    return (\n        <Styles>\n            {/* Back To Top */}\n            <button type=\"text\" className=\"totop-btn\">\n                <i className=\"las la-arrow-up\"></i>\n            </button>\n        </Styles>\n    )\n}\n\nexport default BackToTop","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    footer.footer1 {\n        background-size    : cover;\n        background-position: center;\n        background-repeat  : no-repeat;\n        position           : relative;\n        padding            : 235px 0 55px;\n\n        &:before {\n            position  : absolute;\n            content   : \"\";\n            background: ${colors.bg1};\n            opacity   : 0.98;\n            width     : 100%;\n            height    : 100%;\n            top       : 0;\n            left      : 0;\n        }\n\n        .footer-logo-info {\n            img {\n                margin-bottom: 30px;\n\n                @media(max-width: 575px) {\n                    margin-bottom : 20px;\n                }\n            }\n\n            p {\n                font-size    : 14px;\n                color        : ${colors.text3};\n                line-height  : 28px;\n                margin-bottom: 20px;\n            }\n\n            ul {\n                li {\n                    color        : ${colors.text3};\n                    margin-bottom: 12px;\n\n                    i {\n                        font-size     : 18px;\n                        color         : ${colors.green};\n                        width         : 35px;\n                        vertical-align: top;\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                margin-bottom : 30px;\n            }\n        }\n\n        .f-links {\n            h5 {\n                color         : ${colors.border1};\n                text-transform: uppercase;\n                margin-top    : 8px;\n                margin-bottom : 35px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n\n            ul {\n                float: left;\n                width: 50%;\n\n                li {\n                    a {\n                        font-size  : 14px;\n                        color      : ${colors.text3};\n                        line-height: 38px;\n\n                        i {\n                            font-size   : 12px;\n                            color       : ${colors.green};\n                            margin-right: 10px;\n                        }\n\n                        &:hover {\n                            color: ${colors.green};\n                        }\n\n                        @media(max-width: 991px) {\n                            font-size: 13px;\n                            letter-spacing: 0;\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                margin-bottom : 20px;\n                display: inline-block;\n            }\n        }\n\n        .f-post {\n            h5 {\n                color         : ${colors.border1};\n                text-transform: uppercase;\n                margin-top    : 8px;\n                margin-bottom : 45px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n\n            .post-box {\n                margin-bottom: 12px;\n\n                .post-img {\n                    img {\n                        max-width: 80px;\n                        border-radius : 5px;\n                        margin-right: 15px;\n                    }\n                }\n\n                .post-content {\n                    a {\n                        font-size    : 14px;\n                        color        : ${colors.text3};\n                        display      : inline-block;\n                        margin-bottom: 10px;\n\n                        &:hover {\n                            color: ${colors.green};\n                        }\n\n                        @media(max-width: 991px) {\n                            font-size: 13px;\n                            letter-spacing: 0;\n                            margin-bottom: 0;\n                        }\n                    }\n\n                    span {\n                        display: block;\n                        color  : ${colors.text2};\n                    }\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 360px 0 20px;\n        }\n    }\n\n    .copyright-area {\n        padding   : 35px 0 38px;\n        background: ${colors.copy_bg};\n\n        .copy-text {\n            p {\n                color      : ${colors.text3};\n                padding-top: 3px;\n\n                i {\n                    color : ${colors.green};\n                    margin: 0 2px;\n                }\n\n                a {\n                    color: ${colors.green};\n\n                    &:hover {\n                        text-decoration: underline;\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                text-align : center;\n                margin-bottom: 20px;\n            }\n        }\n\n        ul.social {\n            li {\n                a {\n                    text-align: center;\n                    position  : relative;\n\n                    &:before {\n                        content           : \"\";\n                        position          : absolute;\n                        border-width      : 8px 14px;\n                        border-style      : solid;\n                        border-top-color  : transparent;\n                        border-right-color: transparent;\n                        border-left-color : transparent;\n                        top               : -16px;\n                        left              : 0;\n                        z-index           : 1;\n                        transition : all 0.2s ease;\n                    }\n\n                    &:after {\n                        content            : \"\";\n                        position           : absolute;\n                        border-width       : 8px 14px;\n                        border-style       : solid;\n                        border-right-color : transparent;\n                        border-bottom-color: transparent;\n                        border-left-color  : transparent;\n                        bottom             : -16px;\n                        left               : 0;\n                        z-index            : 1;\n                        transition : all 0.2s ease;\n                    }\n\n                    i {\n                        font-size: 14px;\n                        color    : #ffffff;\n                        width    : 28px;\n                    }\n\n                    &:hover {\n                        background-color: ${colors.green} !important;\n\n                        &:before {\n                            border-bottom-color: ${colors.green} !important;\n                        }\n\n                        &:after {\n                            border-top-color: ${colors.green} !important;\n                        }\n                    }\n                }\n\n                &:nth-child(1) {\n                    a {\n                        background-color: #4267B2;\n\n                        &:before {\n                            border-bottom-color: #4267B2;\n                        }\n\n                        &:after {\n                            border-top-color: #4267B2;\n                        }\n                    }\n                }\n\n                &:nth-child(2) {\n                    a {\n                        background-color: #1DA1F2;\n\n                        &:before {\n                            border-bottom-color: #1DA1F2;\n                        }\n\n                        &:after {\n                            border-top-color: #1DA1F2;\n                        }\n                    }\n                }\n\n                &:nth-child(3) {\n                    a {\n                        background-color: #2867B2;\n\n                        &:before {\n                            border-bottom-color: #2867B2;\n                        }\n\n                        &:after {\n                            border-top-color: #2867B2;\n                        }\n                    }\n                }\n\n                &:nth-child(4) {\n                    a {\n                        background-color: #DD1343;\n\n                        &:before {\n                            border-bottom-color: #DD1343;\n                        }\n\n                        &:after {\n                            border-top-color: #DD1343;\n                        }\n                    }\n                }\n\n                &:nth-child(5) {\n                    a {\n                        background-color: #ea4c89;\n\n                        &:before {\n                            border-bottom-color: #ea4c89;\n                        }\n\n                        &:after {\n                            border-top-color: #ea4c89;\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                text-align : center;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../data/footer/footer.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport BackToTop from './common/BackToTop';\nimport { Styles } from \"./styles/footerOne.js\";\n\nclass Footer extends Component {\n    render() {\n        return (\n          <Styles>\n            {/* Footer Area */}\n            <footer\n              className=\"footer1\"\n              style={{\n                backgroundImage: `url(assets/images/${\n                   Datas.backgroundImage\n                })`,\n              }}\n            >\n              <Container>\n                <Row>\n                  <Col md=\"4\">\n                    <div className=\"footer-logo-info\">\n                      <img\n                        src={\"https://res.cloudinary.com/da5mimn3m/image/upload/v1712737763/mlc/Monalisa%20D.pharma%20College/WhatsApp_Image_2024-04-07_at_09.25.12_o4jz3m.jpg\"}\n                        alt=\"\"\n                        style={{\n                          width: \"40px\",\n                          height: \"40px\",\n                        }}\n                        className=\"img-fluid\"\n                      />\n                      <p>\n                        We Have Experienced Professionals & We Do Our Best To\n                        Achieve Your Goal. Your Happiness Is Our First Priority.\n                      </p>\n                      <ul className=\"list-unstyled\">\n                        <li>\n                          <i className=\"las la-map-marker\"></i>VILL + PO -\n                          KASHIMPUR, DUTTAPUKUR DIST - NORTH 24 PARGANAS, PIN -\n                          743248\n                        </li>\n                        <li>\n                          <i className=\"las la-envelope\"></i>\n                          carriermonalisab.edcollege@gmail.com\n                        </li>\n                        <li>\n                          <i className=\"las la-phone\"></i>9193741234 / 9804588881\n                        </li>\n                      </ul>\n                    </div>\n                  </Col>\n                  {/* <Col md=\"4\">\n                    <div className=\"f-links\">\n                      <h5>Useful Links</h5>\n                      <ul className=\"list-unstyled\">\n                        <li>\n                          <Link to={ \"/\"}>\n                            <i className=\"las la-angle-right\"></i>General Info\n                          </Link>\n                        </li>\n                        <li>\n                          <Link to={ \"/\"}>\n                            <i className=\"las la-angle-right\"></i>Help Center\n                          </Link>\n                        </li>\n                        <li>\n                          <Link to={ \"/\"}>\n                            <i className=\"las la-angle-right\"></i>Our Services\n                          </Link>\n                        </li>\n                        <li>\n                          <Link to={ \"/\"}>\n                            <i className=\"las la-angle-right\"></i>Privacy Policy\n                          </Link>\n                        </li>\n                        <li>\n                          <Link to={ \"/\"}>\n                            <i className=\"las la-angle-right\"></i>Online Support\n                          </Link>\n                        </li>\n                      </ul>\n                      <ul className=\"list-unstyled\">\n                        <li>\n                          <Link to={ \"/\"}>\n                            <i className=\"las la-angle-right\"></i>General Info\n                          </Link>\n                        </li>\n                        <li>\n                          <Link to={ \"/\"}>\n                            <i className=\"las la-angle-right\"></i>Help Center\n                          </Link>\n                        </li>\n                        <li>\n                          <Link to={ \"/\"}>\n                            <i className=\"las la-angle-right\"></i>Our Services\n                          </Link>\n                        </li>\n                        <li>\n                          <Link to={ \"/\"}>\n                            <i className=\"las la-angle-right\"></i>Privacy Policy\n                          </Link>\n                        </li>\n                        <li>\n                          <Link to={ \"/\"}>\n                            <i className=\"las la-angle-right\"></i>Online Support\n                          </Link>\n                        </li>\n                      </ul>\n                    </div>\n                  </Col> */}\n                  <Col md=\"4\">\n                    <div className=\"f-post\">\n                      <h5>Recent Post</h5>\n                      <div className=\"post-box d-flex\">\n                        <div className=\"post-img\">\n                          <img\n                            src={\n                              \n                              \"/assets/images/Basanta.jpeg\"\n                            }\n                            alt=\"\"\n                          />\n                        </div>\n                        <div className=\"post-content\">\n                          <Link to={ \"/blog-details\"}>\n                            Basant Utsav celebrates spring with vibrant colors,\n                            music, and cultural festivities.\n                          </Link>\n                          <span>feb 14, 2024</span>\n                        </div>\n                      </div>\n                      <div className=\"post-box d-flex\">\n                        <div className=\"post-img\">\n                          <img\n                            src={\n                              \n                              \"/assets/images/Yoga.jpeg\"\n                            }\n                            alt=\"\"\n                          />\n                        </div>\n                        <div className=\"post-content\">\n                          <Link to={ \"/blog-details\"}>\n                            Yoga promotes wellness, harmony, and mindfulness\n                            through physical and mental practices.\n                          </Link>\n                          <span>jun 21, 2023</span>\n                        </div>\n                      </div>\n                    </div>\n                  </Col>\n                </Row>\n              </Container>\n            </footer>\n\n            {/* Copyright Area */}\n            <section className=\"copyright-area\">\n              <Container>\n                <Row>\n                  <Col md=\"6\">\n                    <div className=\"copy-text\">\n                      <p>\n                        Copyright &copy; 2020 | Designed With{\" \"}\n                        <i className=\"las la-heart\"></i> by{\" \"}\n                        <a\n                          href={ \"/\"}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                        >\n                          SnazzyTheme\n                        </a>\n                      </p>\n                    </div>\n                  </Col>\n                  <Col md=\"6\" className=\"text-right\">\n                    <ul className=\"social list-unstyled list-inline\">\n                      <li className=\"list-inline-item\">\n                        <a href={ \"/\"}>\n                          <i className=\"fab fa-facebook-f\"></i>\n                        </a>\n                      </li>\n                      <li className=\"list-inline-item\">\n                        <a href={ \"/\"}>\n                          <i className=\"fab fa-twitter\"></i>\n                        </a>\n                      </li>\n                      <li className=\"list-inline-item\">\n                        <a href={ \"/\"}>\n                          <i className=\"fab fa-linkedin-in\"></i>\n                        </a>\n                      </li>\n                      <li className=\"list-inline-item\">\n                        <a href={ \"/\"}>\n                          <i className=\"fab fa-youtube\"></i>\n                        </a>\n                      </li>\n                      <li className=\"list-inline-item\">\n                        <a href={ \"/\"}>\n                          <i className=\"fab fa-dribbble\"></i>\n                        </a>\n                      </li>\n                    </ul>\n                  </Col>\n                </Row>\n              </Container>\n\n              {/* Back To Top */}\n              <BackToTop />\n            </section>\n          </Styles>\n        );\n    }\n}\n\nexport default Footer\n","import React, { Component } from 'react';\nimport Header from './components/Header';\nimport HeroSlider from './components/HeroSlider';\nimport IconBox from './components/IconBox';\nimport AboutUs from './components/AboutUs';\nimport CourseFilter from './components/CourseFilter';\nimport TestimonialSlider from './components/TestimonialSlider';\nimport FaqEvent from './components/FaqEvent';\n//import TeamSlider from './components/TeamSlider';\nimport HelpArea from './components/HelpArea';\nimport HomeBlog from './components/HomeBlog';\nimport CampusTour from './components/CampusTour';\nimport NewsletterForm from './components/NewsletterForm';\nimport Footer from './components/Footer';\n\nexport default class HomeOne extends Component {\n    render() {\n        return (\n            <div className=\"main-wrapper\" >\n\n                {/* Header */}\n                <Header />\n\n                {/* Hero Slider */}\n                <HeroSlider />\n\n                {/* Icon Box */}\n                < IconBox />\n\n                {/* About Area */}\n                < AboutUs />\n\n                {/* Course Filter */}\n                < CourseFilter />\n\n                {/* Testimonial Slider */}\n                < TestimonialSlider />\n\n                {/* Faq & Event Area */}\n                < FaqEvent />\n\n                {/* Team Slider */}\n                {/* < TeamSlider /> */}\n\n                {/* Help Area */}\n                < HelpArea />\n\n                {/* Blog Area */}\n                < HomeBlog />\n\n                {/* Campus Tour */}\n                < CampusTour />\n\n                {/* Newsletter Form */}\n                < NewsletterForm />\n\n                {/* Footer */}\n                < Footer />\n\n            </div >\n        )\n    }\n}\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .top-bar2 {\n        height       : 40px;\n        border-bottom: 1px solid ${colors.border1};\n\n        .bar-left {\n            margin-top: 8px;\n\n            ul {\n                li {\n                    font-size   : 14px;\n                    color       : ${colors.text2};\n                    margin-right: 20px;\n                    display     : inline-block;\n\n                    i {\n                        font-size     : 18px;\n                        color         : ${colors.green};\n                        vertical-align: text-bottom;\n                        margin-right  : 5px;\n\n                        @media(max-width: 1199px) {\n                            margin-right : 2px;\n                        }\n                    }\n\n                    @media(max-width: 1199px) {\n                        margin-right : 8px;\n                    }\n\n                    @media(max-width: 991px) {\n                        font-size : 13px;\n                    }\n                }\n            }\n        }\n\n        .bar-right {\n            margin-top: 6px;\n\n            ul.bar-lang {\n                margin-right: 30px;\n                position    : relative;\n                margin-top  : 3px;\n\n                &::before {\n                    position  : absolute;\n                    content   : \"\";\n                    background: ${colors.border1};\n                    width     : 1px;\n                    height    : 20px;\n                    top       : 0;\n                    right     : -15px;\n                }\n\n                li {\n                    .dropdown {\n                        button.dropdown-toggle {\n                            font-size : 13px;\n                            color     : ${colors.text2};\n                            background: transparent;\n                            border    : none;\n                            padding   : 0;\n                            box-shadow: none;\n\n                            img {\n                                margin-right: 5px;\n                                max-width   : 21px;\n                            }\n\n                            i {\n                                font-size  : 12px;\n                                margin-left: 3px;\n                            }\n\n                            &::after {\n                                display: none;\n                            }\n\n                            &:hover {\n                                cursor: pointer;\n                                color : ${colors.green};\n                            }\n                        }\n\n                        ul.dropdown-menu {\n                            padding         : 0;\n                            margin          : 0;\n                            border          : none;\n                            background-color: #ffffff;\n                            border-radius : 5px;\n                            top       : 50% !important;\n                            left      : -16px !important;\n                            box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);\n\n                            li {\n                                display      : block;\n                                border-bottom: 1px solid ${colors.border1};\n                                padding      : 7px 15px;\n                                color        : ${colors.text3};\n                                cursor       : pointer;\n\n                                img {\n                                    max-width   : 21px;\n                                    margin-right: 5px;\n                                }\n\n                                &:hover {\n                                    color           : ${colors.black1};\n                                    font-weight     : 500;\n                                    background-color: transparent;\n                                }\n\n                                &:last-child {\n                                    border-bottom: none;\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n\n            ul.bar-social {\n                margin-right: 30px;\n                position    : relative;\n\n                &::before {\n                    position  : absolute;\n                    content   : '';\n                    background: ${colors.border1};\n                    width     : 1px;\n                    height    : 20px;\n                    top       : 3px;\n                    right     : -15px;\n                }\n\n                li {\n                    a {\n                        font-size  : 13px;\n                        color      : ${colors.green};\n                        background : ${colors.border1};\n                        display    : inline-block;\n                        width      : 25px;\n                        height     : 25px;\n                        text-align : center;\n                        padding-top: 3px;\n                        border-radius : 5px;\n\n                        &:hover {\n                            background: ${colors.green};\n                            color     : #ffffff;\n                        }\n                    }\n\n                    &:last-child {\n                        a {\n                            margin-right: 0;\n                        }\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    display: none;\n                }\n            }\n\n            ul.sidebar-button {\n                li.side-box {\n                    a.nav-link {\n                        font-size  : 20px;\n                        padding    : 0;\n                        line-height: 28px;\n                        i {\n                            color : ${colors.green};\n                        }\n                    }\n                }\n            }\n        }\n        \n        @media(max-width: 767px) {\n            display: none;\n        }\n    }\n\n    .logo-area2 {\n        padding-top: 20px;\n\n        .logo {\n            a {\n                img {\n                    @media(max-width: 991px) {\n                        max-width: 100%;\n                    }\n                }\n            }\n        }\n\n        div.menu-box {\n            ul.nav.menu-nav {\n                li.nav-item {\n                    position: relative;\n\n                    a.nav-link {\n                        font-size     : 14px;\n                        color         : ${colors.black1};\n                        text-transform: uppercase;\n                        font-weight   : 500;\n                        padding       : 10px 10px 20px;\n\n                        i {\n                            font-size: 12px;\n                        }\n\n                        &:after {\n                            content: none;\n                        }\n\n                        &:hover {\n                            color: ${colors.green};\n                        }\n\n                        @media(max-width: 1199px) {\n                            padding: 10px 2px 20px;\n                            letter-spacing: 0;\n                        }\n                    }\n\n                    ul.dropdown {\n                        position  : absolute;\n                        left      : 0;\n                        top       : 100%;\n                        min-width : 190px;\n                        background: #fff;\n                        border    : 1px solid ${colors.border1};\n                        text-align: left;\n                        padding   : 0;\n                        border-radius : 5px;\n                        transition : 0.2s ease;\n                        opacity         : 0;\n                        transform       : scaleY(0);\n                        visibility      : hidden;\n                        z-index         : 999;\n                        transform-origin: center top 0;\n\n                        li.nav-item {\n                            position: relative;\n\n                            a.nav-link {\n                                font-size     : 13px;\n                                color         : ${colors.text1};\n                                padding       : 10px 20px;\n                                text-transform: capitalize;\n                                font-weight   : 400;\n                                margin-right  : 0;\n                                border-bottom : 1px solid ${colors.border1};\n\n                                &:hover {\n                                    color: ${colors.green};\n\n                                    i {\n                                        color: #fff;\n                                    }\n                                }\n\n                                i {\n                                    float     : right;\n                                    margin-top: 4px;\n                                }\n                            }\n\n                            &:last-child {\n                                margin-left: 0;\n\n                                a.nav-link {\n                                    border-bottom: none;\n                                }\n                            }\n\n                            ul.dropdown2 {\n                                position  : absolute;\n                                top       : 0;\n                                left      : 100%;\n                                min-width : 180px;\n                                background: #fff;\n                                border    : 1px solid ${colors.border1};\n                                transition : 0.2s ease;\n                                opacity         : 0;\n                                transform       : scaleY(0);\n                                visibility      : hidden;\n                                z-index         : 999;\n                                transform-origin: center top 0;\n                            }\n\n                            &:hover {\n                                ul.dropdown2 {\n                                    opacity   : 1;\n                                    transform : scaleY(1);\n                                    visibility: visible;\n                                }\n                            }\n                        }\n                    }\n\n                    &:hover {\n                        ul.dropdown {\n                            opacity   : 1;\n                            transform : scaleY(1);\n                            visibility: visible;\n                        }\n                    }\n                }\n            }\n\n            .search-box {\n                margin-left: 18px;\n                margin-top : 11px;\n\n                a {\n                    padding: 0;\n\n                    i {\n                        font-size: 18px;\n                        color    : ${colors.green};\n                    }\n                }\n\n                i.close-btn {\n                    position : absolute;\n                    top      : 25px;\n                    right    : -12px;\n                    font-size: 26px;\n                    color    : ${colors.green};\n                    cursor   : pointer;\n                }\n\n                @media(max-width: 1199px) {\n                    margin-left : 5px;\n                }\n            }\n\n            .apply-btn {\n                margin-left: 70px;\n                margin-top : -1px;\n\n                a {\n                    font-size     : 13px;\n                    color         : #ffffff;\n                    background    : ${colors.gr_bg};\n                    display       : inline-block;\n                    width         : 110px;\n                    height        : 40px;\n                    text-align    : center;\n                    text-transform: uppercase;\n                    font-weight   : 500;\n                    padding       : 11px;\n                    border-radius : 0 5px 5px 0;\n                    position: relative;\n\n                    i {\n                        position : absolute;\n                        font-size: 20px;\n                        left     : -40px;\n                        top      : 0;\n                        padding  : 10px;\n                        width    : 40px;\n                        height   : 100%;\n                        border-radius : 5px 0 0 5px;\n                        background-color: ${colors.green2};\n                    }\n\n                    &:hover {\n                        background: ${colors.gr_bg2};\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    display : none;\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            display: none;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\n// import { Dropdown } from \"react-bootstrap\";\nimport Search from './common/Search';\n// import Sidebar from './common/Sidebar';\nimport StickyMenu from './common/StickyMenu';\nimport MobileMenu from './common/MobileMenu';\nimport { Styles } from \"./styles/headerTwo.js\";\n\nclass HeaderTwo extends Component {\n  render() {\n    return (\n      <Styles>\n        {/* Topbar 2 */}\n        <section className=\"top-bar2\">\n          <Container>\n            <Row>\n              <Col lg=\"12\">\n                <div className=\"bar-left\">\n                  <ul className=\"list-unstyled list-inline\">\n                    <li className=\"list-inline-item\">\n                      <i className=\"las la-phone\"></i>\n                      <a href=\"tel:9193741234\">9193741234</a>/<a href=\"tel:9804588881\">9804588881</a>\n                    </li>\n                    <li className=\"list-inline-item\">\n                      <i className=\"las la-envelope\"></i>\n                      <a href=\"mailto:monalisacollegeofpharmacy@gmail.com\">\n                      monalisacollegeofpharmacy@gmail.com\n                      </a>\n                    </li>\n                    <li className=\"list-inline-item\">\n                      <i className=\"las la-map-marker\"></i> Kolkata, PIN - 743248.\n                    </li>\n                  </ul>\n                </div>\n              </Col>\n            </Row>\n          </Container>\n        </section>\n\n        {/* Logo Area 2 */}\n        <section className=\"logo-area2\">\n          <Row style={{\n            maxWidth: \"90%\",\n            margin: \"auto\",\n          }}>\n            <Col md=\"7\">\n              <div className=\"logo\" style={{\n                display: \"flex\",\n                alignItems: \"center\",\n              }}>\n                <Link to={\"/\"} style={{\n                  display: \"flex\",\n                  alignItems: \"flex-start\",\n                }}>\n                  <img\n                    src={\n                      \"https://res.cloudinary.com/da5mimn3m/image/upload/v1712991636/mlc/Monalisa%20D.pharma%20College/WhatsApp_Image_2024-04-07_at_09.25.12_o4jz3m.jpg\"\n                    }\n                    alt=\"\"\n                    style={{\n                      width: \"120px\",\n                      height: \"120px\",\n                    }}\n                  />\n                  <div>\n                    <p style={{\n                      fontSize: \"30px\",\n                      fontWeight: \"bold\",\n                      color: \"black\",\n                      marginLeft: \"10px\",\n                      letterSpacing: \"0px\",\n                    }}>\n                      Monalisa Institute of Medical Science\n                    </p>\n                    <p style={{\n                      fontSize: \"18px\",\n                      fontWeight: \"bold\",\n                      color: \"black\",\n                      marginLeft: \"10px\",\n                    }}>\n                      Recognized By PCI, Govt. of India\n                    </p>\n                    <p style={{\n                      fontSize: \"18px\",\n                      fontWeight: \"bold\",\n                      color: \"black\",\n                      marginLeft: \"10px\",\n                    }}>\n                      Affiliated to WBSCTVESD, Govt. of West Bengal\n                    </p>\n                  </div>\n                </Link>\n              </div>\n            </Col>\n            <Col md=\"5\">\n              <div className=\"menu-box d-flex justify-content-end\">\n                <ul className=\"nav menu-nav\">\n                  <li className=\"nav-item dropdown active\">\n                    <Link\n                      className=\"nav-link dropdown-toggle\"\n                      to={\"/\"}\n                      data-toggle=\"dropdown\"\n                    >\n                      Home\n                      {/* <i className=\"las la-angle-down\"></i> */}\n                    </Link>\n                    {/* <ul className=\"dropdown list-unstyled\">\n                                                <li className=\"nav-item\"><Link className=\"nav-link\" to={ \"/\"}>Home Style 1</Link></li>\n                                                <li className=\"nav-item\"><Link className=\"nav-link\" to={ \"/home-two\"}>Home Style 2</Link></li>\n                                            </ul> */}\n                  </li>\n                  <li className=\"nav-item dropdown\">\n                    <Link\n                      className=\"nav-link dropdown-toggle\"\n                      to={\"/\"}\n                      data-toggle=\"dropdown\"\n                    >\n                      Pages <i className=\"las la-angle-down\"></i>\n                    </Link>\n                    <ul className=\"dropdown list-unstyled\">\n                      <li className=\"nav-item\">\n                        <Link\n                          className=\"nav-link\"\n                          to={\"/about\"}\n                        >\n                          About Us\n                        </Link>\n                      </li>\n                      <li className=\"nav-item\">\n                        <Link\n                          className=\"nav-link\"\n                          to={\"/gallery\"}\n                        >\n                          Gallery\n                        </Link>\n                      </li>\n                      {/* <li className=\"nav-item\"><Link className=\"nav-link\" to={ \"/login\"}>Log In</Link></li>\n                                                <li className=\"nav-item\"><Link className=\"nav-link\" to={ \"/registration\"}>Registration</Link></li> */}\n                      <li className=\"nav-item\">\n                        <Link\n                          className=\"nav-link\"\n                          to={\"/contact\"}\n                        >\n                          Contact\n                        </Link>\n                      </li>\n                      <li className=\"nav-item\">\n                        <Link\n                          className=\"nav-link\"\n                          to={\"/faq\"}\n                        >\n                          Faq\n                        </Link>\n                      </li>\n                      {/* <li className=\"nav-item\"><Link className=\"nav-link\" to={ \"/404\"}>404</Link></li>\n                                                <li className=\"nav-item\"><Link className=\"nav-link\" to={ \"/coming-soon\"}>Coming Soon</Link></li> */}\n                    </ul>\n                  </li>\n                  <li className=\"nav-item dropdown\">\n                    <Link\n                      className=\"nav-link dropdown-toggle\"\n                      to={\"/\"}\n                      data-toggle=\"dropdown\"\n                    >\n                      Courses <i className=\"las la-angle-down\"></i>\n                    </Link>\n                    <ul className=\"dropdown list-unstyled\">\n                      {/* <li className=\"nav-item\">\n                              <Link\n                                className=\"nav-link\"\n                                to={ \"/course-grid\"}\n                              >\n                                Course Grid\n                              </Link>\n                            </li> */}\n                      <li className=\"nav-item\">\n                        <Link\n                          className=\"nav-link\"\n                          to={\"/course-list\"}\n                        >\n                          Course List\n                        </Link>\n                      </li>\n                      {/* <li className=\"nav-item\">\n                              <Link\n                                className=\"nav-link\"\n                                to={ \"/course-details\"}\n                              >\n                                Course Details\n                              </Link>\n                            </li> */}\n                    </ul>\n                  </li>\n                  {/* <li className=\"nav-item dropdown\">\n                          <Link\n                            className=\"nav-link dropdown-toggle\"\n                            to={ \"/\"}\n                            data-toggle=\"dropdown\"\n                          >\n                            Event <i className=\"las la-angle-down\"></i>\n                          </Link>\n                          <ul className=\"dropdown list-unstyled\">\n                            <li className=\"nav-item\">\n                              <Link\n                                className=\"nav-link\"\n                                to={ \"/events\"}\n                              >\n                                Events\n                              </Link>\n                            </li>\n                            <li className=\"nav-item\">\n                             \n                            </li>\n                          </ul>\n                        </li> */}\n                </ul>\n                {/* <div className=\"search-box\">\n                        <Search />\n                      </div> */}\n                <div className=\"apply-btn\">\n                  <Link to={\"/registration\"}>\n                    <i className=\"las la-clipboard-list\"></i>Apply Now\n                  </Link>\n                </div>\n              </div>\n            </Col>\n          </Row>\n        </section>\n\n        {/* Sticky Menu */}\n        <StickyMenu />\n\n        {/* Mobile Menu */}\n        <MobileMenu />\n      </Styles>\n    );\n  }\n}\n\nexport default HeaderTwo\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .hero-image-area {\n        background-size    : cover;\n        background-position: center;\n        background-repeat  : no-repeat;\n        height             : 700px;\n        position           : relative;\n\n        &::before {\n            position  : absolute;\n            content   : \"\";\n            background: ${colors.black1};\n            opacity   : 0.6;\n            width     : 100%;\n            height    : 100%;\n            top       : 0;\n            left      : 0;\n        }\n\n        .round-shape {\n            background-position: bottom;\n            background-repeat  : no-repeat;\n            background-size    : contain;\n            position           : absolute;\n            bottom             : 0;\n            left               : 0;\n            width              : 100%;\n            height             : 100%;\n        }\n\n        .hero-table {\n            display : table;\n            width   : 100%;\n            height  : 100%;\n            position: relative;\n            z-index : 2;\n\n            .hero-tablecell {\n                display       : table-cell;\n                vertical-align: middle;\n\n                .hero-box {\n\n                    h1 {\n                        font-size    : 46px;\n                        color        : #ffffff;\n                        max-width    : 700px;\n                        margin       : auto;\n                        margin-bottom: 20px;\n                        font-weight  : 600;\n\n                        @media(max-width: 767px) {\n                            font-size: 26px;\n                            font-weight: 500;\n                            max-width: 100%;\n                        }\n                    }\n\n                    p {\n                        font-size    : 16px;\n                        color        : ${colors.border3};\n                        max-width    : 600px;\n                        line-height  : 30px;\n                        margin       : auto;\n                        margin-bottom: 60px;\n\n                        @media(max-width: 575px) {\n                            display    : none;\n                        }\n                    }\n\n                    .video-player {\n\n                        button.play-button {\n                            transform : translateX(0) translateY(-50%);\n                            box-sizing: content-box;\n                            display   : block;\n                            width     : 32px;\n                            height    : 44px;\n                            margin    : auto;\n                            border-radius : 50%;\n\n                            i {\n                                position   : relative;\n                                font-size  : 40px;\n                                color      : #ffffff;\n                                z-index    : 11;\n                                padding-top: 2px;\n                                margin-left: -2px;\n                            }\n\n                            &::before {\n                                content   : \"\";\n                                position  : absolute;\n                                z-index   : 0;\n                                left      : 50%;\n                                top       : 50%;\n                                transform : translateX(-50%) translateY(-50%);\n                                display   : block;\n                                width     : 70px;\n                                height    : 70px;\n                                background: ${colors.green};\n                                border-radius : 50%;\n                                animation: pulse-border 1500ms ease-out infinite;\n                            }\n\n                            &:after {\n                                content   : \"\";\n                                position  : absolute;\n                                z-index   : 1;\n                                left      : 50%;\n                                top       : 50%;\n                                transform : translateX(-50%) translateY(-50%);\n                                display   : block;\n                                width     : 70px;\n                                height    : 70px;\n                                background: ${colors.green};\n                                border-radius : 50%;\n                                transition : all 200ms;\n                            }\n\n                            &:hover {\n                                i {\n                                    color: #ffffff;\n                                }\n                            }\n\n                            @keyframes pulse-border {\n                                0% {\n                                    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);\n                                    opacity  : 1;\n                                }\n\n                                100% {\n                                    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);\n                                    opacity  : 0;\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            height : 450px;\n        }\n\n        @media(max-width: 575px) {\n            height : 360px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../data/hero/hero-image.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport ModalVideo from 'react-modal-video';\nimport { Styles } from \"./styles/heroImage.js\";\n\nclass HeroImage extends Component {\n    constructor() {\n        super()\n        this.state = {\n            isOpen: false\n        }\n        this.openModal = this.openModal.bind(this)\n    }\n\n    openModal() {\n        this.setState({ isOpen: true })\n    }\n\n    render() {\n        return (\n            <Styles>\n                {/* Hero Image */}\n                <section className=\"hero-image-area\" style={{ backgroundImage: `url(${Datas.heroBackground})` }}>\n                <div className=\"round-shape\" style={{ backgroundImage: `url(/assets/images/${Datas.heroRoundShape})` }}></div>\n                    <div className=\"hero-table\">\n                        <div className=\"hero-tablecell\">\n                            <Container>\n                                <Row>\n                                    <Col md=\"12\">\n                                        <div className=\"hero-box text-center\">\n                                            <h1>{Datas.heroTitle}</h1>\n                                            <p>{Datas.heroSubtitle}</p>\n                                        </div>\n                                    </Col>\n                                </Row>\n                            </Container>\n                        </div>\n                    </div>\n                </section>\n            </Styles>\n        )\n    }\n}\n\nexport default HeroImage\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .service-area {\n        padding: 56px 0 42px;\n\n        .sec-title {\n            h4 {\n                color        : ${colors.black1};\n                line-height  : 35px;\n                font-weight  : 600;\n                max-width    : 550px;\n                margin       : auto;\n                margin-bottom: 40px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n        }\n\n        .service-box {\n            padding   : 35px 20px 20px;\n            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.07);\n            border-radius : 5px;\n            margin-bottom: 30px;\n\n            .box-icon {\n                background  : ${colors.green};\n                height      : 36px;\n                text-align  : center;\n                margin-right: 20px;\n                position    : relative;\n\n                i {\n                    font-size : 34px;\n                    color     : #ffffff;\n                    width     : 60px;\n                    display   : inline-block;\n                    position  : relative;\n                    z-index   : 111;\n                    margin-top: -8px;\n\n                    @media(max-width: 991px) {\n                        font-size: 24px;\n                        width: 45px;\n                    }\n\n                    @media(max-width: 767px) {\n                        font-size: 34px;\n                        width: 60px;\n                    }\n                }\n\n                &::before {\n                    content            : \"\";\n                    position           : absolute;\n                    border-width       : 15px 30px;\n                    border-style       : solid;\n                    border-top-color   : transparent;\n                    border-right-color : transparent;\n                    border-bottom-color: ${colors.green};\n                    border-left-color  : transparent;\n                    top                : -30px;\n                    left               : 0;\n                    z-index            : 1;\n\n                    @media(max-width: 991px) {\n                        border-width: 12px 23px;\n                        top: -24px;\n                    }\n\n                    @media(max-width: 767px) {\n                        border-width: 15px 30px;\n                        top: -30px;\n                    }\n                }\n\n                &:after {\n                    content            : \"\";\n                    position           : absolute;\n                    border-width       : 15px 30px;\n                    border-style       : solid;\n                    border-top-color   : ${colors.green};\n                    border-right-color : transparent;\n                    border-bottom-color: transparent;\n                    border-left-color  : transparent;\n                    bottom             : -30px;\n                    left               : 0;\n                    z-index            : 1;\n\n                    @media(max-width: 991px) {\n                        border-width: 12px 23px;\n                        bottom: -24px;\n                    }\n\n                    @media(max-width: 767px) {\n                        border-width: 15px 30px;\n                        bottom: -30px;\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    height: 22px;\n                    margin-right: 10px;\n                }\n\n                @media(max-width: 767px) {\n                    height: 36px;\n                    margin-right: 20px;\n                }\n            }\n\n            .box-title {\n                margin-top: -15px;\n\n                h6 {\n                    color         : ${colors.black1};\n                    text-transform: uppercase;\n                    font-weight   : 600;\n                    margin-bottom : 6px;\n\n                    @media(max-width: 991px) {\n                        font-size: 13px;\n                        letter-spacing: 0;\n                    }\n\n                    @media(max-width: 767px) {\n                        font-size: 16px;\n                        letter-spacing: 0.3px;\n                    }\n\n                    @media(max-width: 575px) {\n                        font-size: 15px;\n                    }\n                }\n\n                p {\n                    font-size: 14px;\n                    color    : ${colors.text3};\n\n                    @media(max-width: 991px) {\n                        font-size: 13px;\n                        letter-spacing: 0;\n                    }\n\n                    @media(max-width: 767px) {\n                        font-size: 14px;\n                        letter-spacing: 0.3px;\n                    }\n                }\n            }\n\n            @media(max-width: 991px) {\n                padding: 25px 10px 8px;\n            }\n\n            @media(max-width: 767px) {\n                padding: 35px 20px;\n                margin-bottom: 25px;\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 30px 0 15px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../data/service/service-box.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { Styles } from \"./styles/serviceBox.js\";\n\nclass ServiceBox extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Service Box */}\n                <section className=\"service-area\">\n                    <Container>\n                        <Row>\n                            <Col md=\"12\">\n                                <div className=\"sec-title text-center\">\n                                    <h4>{Datas.secTitle}</h4>\n                                </div>\n                            </Col>\n                            {\n                                Datas.dataList.map((data, i) => (\n                                    <Col md=\"4\" key={i}>\n                                        <div className=\"service-box d-flex\">\n                                            <div className=\"box-icon\">\n                                                <i className={data.boxIcon}></i>\n                                            </div>\n                                            <div className=\"box-title\">\n                                                <h6>{data.title}</h6>\n                                                <p>{data.subTitle}</p>\n                                            </div>\n                                        </div>\n                                    </Col>\n                                ))\n                            }\n                        </Row>\n                    </Container>\n                </section>\n            </Styles>\n        )\n    }\n}\n\nexport default ServiceBox\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .about-us2 {\n        background: ${colors.bg2};\n        padding   : 70px 0;\n\n        .about-content {\n            h4.about-title {\n                color        : ${colors.black1};\n                line-height  : 35px;\n                font-weight  : 600;\n                margin-bottom: 25px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n\n            p.about-para {\n                font-size    : 15px;\n                color        : ${colors.text3};\n                line-height  : 28px;\n                margin-bottom: 30px;\n\n                @media(max-width: 991px) {\n                    font-size    : 14px;\n                }\n            }\n\n            .cta-box {\n                margin-bottom: 15px;\n\n                .cta-icon {\n                    margin-right: 15px;\n\n                    i {\n                        font-size: 20px;\n                        color    : ${colors.green};\n                        width    : 35px;\n                        height   : 35px;\n                        border   : 1px solid ${colors.green};\n                        border-radius : 50%;\n                        padding-top: 7px;\n                    }\n                }\n\n                .cta-content {\n                    h6 {\n                        color        : ${colors.black1};\n                        margin-top   : 5px;\n                        margin-bottom: 5px;\n                    }\n\n                    p {\n                        font-size  : 14px;\n                        color      : ${colors.text3};\n                        line-height: 25px;\n\n                        @media(max-width: 991px) {\n                            font-size    : 13px;\n                        }\n                    }\n                }\n            }\n        }\n\n        .about-image {\n            position: relative;\n            height  : 100%;\n\n            img.main-img1 {\n                position : absolute;\n                bottom   : 0;\n                left     : 0;\n                max-width: 68%;\n                border-radius : 5px;\n                box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);\n\n                @media(max-width: 991px) {\n                    bottom: 42%;\n                }\n            }\n\n            img.main-img2 {\n                max-width: 50%;\n                border-radius : 5px;\n                float     : right;\n                box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);\n\n                @media(max-width: 991px) {\n                    max-width: 65%;\n                }\n            }\n\n            p.exp-box {\n                font-size    : 14px;\n                color        : #ffffff;\n                background   : ${colors.gr_bg};\n                position     : absolute;\n                bottom       : 15%;\n                right        : 20%;\n                margin-bottom: -30px;\n                margin-right : -20px;\n                width        : 120px;\n                height       : 120px;\n                z-index      : 1;\n                border-radius : 50%;\n                text-align : center;\n                font-weight: 500;\n                padding-top: 24px;\n\n                span {\n                    display      : block;\n                    font-size    : 30px;\n                    font-weight  : 800;\n                    margin-bottom: -5px;\n\n                    i {\n                        font-size     : 15px;\n                        vertical-align: middle;\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    bottom: 48%;\n                    right: 11%;\n                }\n            }\n\n            @media(max-width: 767px) {\n                display : none;\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding : 30px 0 20px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../data/about-us/about-us2.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { Styles } from \"./styles/aboutUsTwo.js\";\n\nclass AboutUsTwo extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* About Us 2 */}\n                <section className=\"about-us2\">\n                    <Container>\n                        <Row>\n                            <Col md=\"6\">\n                                <div className=\"about-content\">\n                                    <h4 className=\"about-title\">{Datas.secTitle}</h4>\n                                    <p className=\"about-para\">{Datas.secDesc}</p>\n\n                                    {\n                                        Datas.dataList.map((data, i) => (\n                                            <div className=\"cta-box d-flex\" key={i}>\n                                                <div className=\"cta-icon text-center\">\n                                                    <i className=\"las la-thumbs-up\"></i>\n                                                </div>\n                                                <div className=\"cta-content\">\n                                                    <h6>{data.iconTitle}</h6>\n                                                    <p>{data.iconSubtitle}</p>\n                                                </div>\n                                            </div>\n                                        ))\n                                    }\n\n                                </div>\n                            </Col>\n                            <Col md=\"6\">\n                                <div className=\"about-image\">\n                                    <img src={`/assets/images/${Datas.aboutImageOne}`} className=\"main-img1\" alt=\"\" />\n                                    <img src={`/assets/images/${Datas.aboutImageTwo}`} className=\"main-img2\" alt=\"\" />\n                                    <p className=\"exp-box\"><span>{Datas.experianceYear}<i className=\"las la-plus\"></i></span> Yrs Exprience</p>\n                                </div>\n                            </Col>\n                        </Row>\n                    </Container>\n                </section>\n            </Styles>\n        )\n    }\n}\n\nexport default AboutUsTwo\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .course-slider-area {\n        padding: 63px 0;\n\n        .sec-title {\n            h4 {\n                color        : ${colors.black1};\n                line-height  : 35px;\n                font-weight  : 600;\n                max-width    : 550px;\n                margin       : auto;\n                margin-bottom: 42px;\n                \n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n        }\n\n        .course-slider {\n            position: relative;\n\n            .course-item {\n                border: 1px solid ${colors.border1};\n                border-radius : 5px;\n                transition : all 0.2s ease;\n                margin-bottom: 30px;\n\n                .course-image {\n                    width              : 100%;\n                    height             : 220px;\n                    background-size    : cover;\n                    background-position: center;\n                    background-repeat  : no-repeat;\n                    border-radius : 5px 5px 0 0;\n                    position: relative;\n\n                    .author-img {\n                        position: absolute;\n                        left    : 20px;\n                        bottom  : 20px;\n\n                        img {\n                            max-width: 40px;\n                            border-radius : 50%;\n                            margin-right: 5px;\n                        }\n\n                        .title {\n                            background: #ffffff;\n                            padding   : 3px 8px;\n                            border-radius : 5px;\n\n                            p {\n                                font-size    : 12px;\n                                color        : ${colors.black1};\n                                font-weight  : 500;\n                                margin-bottom: -4px;\n                            }\n\n                            span {\n                                font-size  : 11px;\n                                color      : ${colors.text3};\n                                font-weight: 500;\n                            }\n                        }\n\n                    }\n\n                    .course-price {\n                        p {\n                            font-size  : 16px;\n                            color      : #ffffff;\n                            background : ${colors.bg1};\n                            position   : absolute;\n                            right      : 20px;\n                            bottom     : 20px;\n                            padding    : 8px 10px;\n                            font-weight: 500;\n                            border-radius : 5px;\n                        }\n                    }\n                }\n\n                .course-content {\n                    background: #fff;\n                    padding   : 20px 25px;\n                    border-radius : 0 0 5px 5px;\n\n                    h6.heading {\n                        a {\n                            color        : ${colors.black1};\n                            font-weight  : 600;\n                            display      : inline-block;\n                            margin-bottom: 12px;\n\n                            &:hover {\n                                color: ${colors.green};\n                            }\n                        }\n                    }\n\n                    p.desc {\n                        font-size     : 14px;\n                        color         : ${colors.text3};\n                        line-height   : 25px;\n                        border-bottom : 1px solid ${colors.border1};\n                        padding-bottom: 10px;\n                        margin-bottom : 12px;\n                    }\n\n                    .course-face {\n\n                        .duration,\n                        .student {\n                            p {\n                                font-size: 13px;\n                                color    : ${colors.text3};\n\n                                i {\n                                    font-size     : 16px;\n                                    color         : ${colors.green};\n                                    vertical-align: text-bottom;\n                                    margin-right  : 3px;\n                                }\n                            }\n                        }\n\n                        .rating {\n                            ul {\n                                li {\n                                    margin-right: 0;\n\n                                    i {\n                                        font-size: 14px;\n                                        color    : ${colors.yellow};\n                                    }\n\n                                    &:last-child {\n                                        font-size: 13px;\n                                        color    : ${colors.text3};\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n\n                &:hover {\n                    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.07);\n                }\n            }\n\n            .slider-dot {\n                margin-top: 18px !important;\n\n                .swiper-pagination-bullet {\n                    width     : 22px;\n                    height    : 9px;\n                    background: ${colors.text4};\n                    display   : inline-block;\n                    margin    : 3px;\n                    opacity   : 1 !important;\n                    border-radius : 5px;\n                }\n\n                .swiper-pagination-bullet.swiper-pagination-bullet-active {\n                    background: ${colors.green};\n                }\n\n                @media(max-width: 575px) {\n                    margin-top: 0 !important;\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding : 30px 0;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../data/course/slider.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport Swiper from 'react-id-swiper';\nimport { Styles } from \"./styles/courseSlider.js\";\n\nclass CourseSlider extends Component {\n    render() {\n        const settings = {\n            slidesPerView: 3,\n            loop: true,\n            speed: 1000,\n            autoplay: {\n                delay: 3000,\n                disableOnInteraction: false\n            },\n            spaceBetween: 30,\n            watchSlidesVisibility: true,\n            pagination: {\n                el: '.slider-dot.text-center',\n                clickable: true\n            },\n            breakpoints: {\n                0: {\n                    slidesPerView: 1\n                },\n                576: {\n                    slidesPerView: 1\n                },\n                768: {\n                    slidesPerView: 2\n                },\n                992: {\n                    slidesPerView: 3\n                }\n            }\n        };\n\n        return (\n            <Styles>\n                {/* Course Slider */}\n                <section className=\"course-slider-area\">\n                    <Container>\n                        <Row>\n                            <Col md=\"12\">\n                                <div className=\"sec-title text-center\">\n                                    <h4>{Datas.secTitle}</h4>\n                                </div>\n                            </Col>\n                            <Col md=\"12\" className=\"course-slider\">\n                                <Swiper {...settings}>\n                                    {\n                                        Datas.dataList.map((data, i) => (\n\n                                            <div className=\"course-item\" key={i}>\n                                                <Link to={ data.courseLink}>\n                                                    <div className=\"course-image\" style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${data.imgUrl})` }}>\n                                                        <div className=\"author-img d-flex\">\n                                                            <div className=\"img\">\n                                                                <img src={ `/assets/images/${data.authorImg}`} alt=\"\" />\n                                                            </div>\n                                                            <div className=\"title\">\n                                                                <p>{data.authorName}</p>\n                                                                <span>{data.authorCourses}</span>\n                                                            </div>\n                                                        </div>\n                                                        <div className=\"course-price\">\n                                                            <p>{data.price}</p>\n                                                        </div>\n                                                    </div>\n                                                </Link>\n                                                <div className=\"course-content\">\n                                                    <h6 className=\"heading\"><Link to={ data.courseLink}>{data.courseTitle}</Link></h6>\n                                                    <p className=\"desc\">{data.courseDesc}</p>\n                                                    <div className=\"course-face d-flex justify-content-between\">\n                                                        <div className=\"duration\">\n                                                            <p><i className=\"las la-clock\"></i>120</p>\n                                                        </div>\n                                                        <div className=\"rating\">\n                                                            <ul className=\"list-unstyled list-inline\">\n                                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i>\n                                                                </li>\n                                                                <li className=\"list-inline-item\">(4.5)</li>\n                                                            </ul>\n                                                        </div>\n                                                        <div className=\"student\">\n                                                            <p><i className=\"las la-chair\"></i>60</p>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        ))\n                                    }\n                                </Swiper>\n                            </Col>\n                        </Row>\n                    </Container>\n                </section>\n            </Styles>\n        )\n    }\n}\n\nexport default CourseSlider\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .counter-area {\n        background-size    : cover;\n        background-position: center;\n        background-repeat  : no-repeat;\n        padding            : 63px 0 70px;\n        position           : relative;\n\n        &:before {\n            position  : absolute;\n            content   : '';\n            background: ${colors.bg1};\n            opacity   : 0.98;\n            width     : 100%;\n            height    : 100%;\n            top       : 0;\n            left      : 0;\n        }\n\n        .sec-title {\n            h4 {\n                color        : #ffffff;\n                line-height  : 35px;\n                font-weight  : 600;\n                max-width    : 550px;\n                margin       : auto;\n                margin-bottom: 43px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n        }\n\n        .counter-box {\n            position: relative;\n\n            .counter-icon {\n                border      : 1px dashed ${colors.green};\n                border-right: none;\n                width       : 95px;\n                height      : 85px;\n                border-radius : 5px;\n                text-align : center;\n                padding-top: 17px;\n                position   : relative;\n\n                i {\n                    font-size: 52px;\n                    color    : ${colors.green};\n\n                    @media(max-width: 991px) {\n                        font-size: 36px;\n                        margin-left: -10px;\n                    }\n\n                    @media(max-width: 767px) {\n                        margin-left: 0;\n                    }\n                }\n\n                &::before {\n                    position    : absolute;\n                    content     : '';\n                    border-right: 1px dashed ${colors.green};\n                    width       : 1px;\n                    height      : 12px;\n                    top         : 2px;\n                    right       : 0;\n\n                    @media(max-width: 991px) {\n                        height: 8px;\n                    }\n                }\n\n                &::after {\n                    position    : absolute;\n                    content     : '';\n                    border-right: 1px dashed ${colors.green};\n                    width       : 1px;\n                    height      : 12px;\n                    bottom      : 2px;\n                    right       : 0;\n\n                    @media(max-width: 991px) {\n                        height: 8px;\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    width: 70px;\n                    height: 70px;\n                    padding-top: 17px;\n                }\n            }\n\n            .counter-number {\n                position: absolute;\n                top     : 19px;\n                left    : 34%;\n\n                h4 {\n                    color: #ffffff;\n\n                    span {\n                        letter-spacing: 3px;\n\n                        @media(max-width: 575px) {\n                            font-size: 20px;\n                            letter-spacing: 1px;\n                        }\n                    }\n                }\n\n                p {\n                    font-size  : 15px;\n                    color      : ${colors.border3};\n                    font-weight: 500;\n\n                    @media(max-width: 991px) {\n                        font-size: 12px;\n                        font-weight: 400;\n                        letter-spacing: 0;\n                    }\n\n                    @media(max-width: 575px) {\n                        font-size: 11px;\n                    }\n                }\n\n                @media(max-width: 1199px) {\n                    left: 36%;\n                }\n\n                @media(max-width: 991px) {\n                    left: 33%;\n                    top: 10px;\n                }\n\n                @media(max-width: 575px) {\n                    left: 65px;\n                }\n            }\n\n            @media(max-width: 767px) {\n                margin-bottom: 20px;\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 30px 0 25px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../data/counter/number-counter.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport CountUp from 'react-countup';\nimport { Styles } from \"./styles/numberCounter.js\";\n\nclass NumberCounter extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Counter Area */}\n                <section className=\"counter-area\" style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${Datas.backgroundImage})` }}>\n                    <Container>\n                        <Row>\n                            <Col md=\"12\">\n                                <div className=\"sec-title text-center\">\n                                    <h4>{Datas.secTitle}</h4>\n                                </div>\n                            </Col>\n                            <Col md=\"3\" xs=\"6\">\n                                <div className=\"counter-box\">\n                                    <div className=\"counter-icon\">\n                                        <i className=\"las la-university\"></i>\n                                    </div>\n                                    <div className=\"counter-number\">\n                                        <h4><CountUp end={6} duration={5} delay={1.5} />+</h4>\n                                        <p>University Courses</p>\n                                    </div>\n                                </div>\n                            </Col>\n                            <Col md=\"3\" xs=\"6\">\n                                <div className=\"counter-box\">\n                                    <div className=\"counter-icon\">\n                                        <i className=\"las la-graduation-cap\"></i>\n                                    </div>\n                                    <div className=\"counter-number\">\n                                        <h4><CountUp end={2309} duration={5} delay={1.5} />+</h4>\n                                        <p>Total Students</p>\n                                    </div>\n                                </div>\n                            </Col>\n                            <Col md=\"3\" xs=\"6\">\n                                <div className=\"counter-box\">\n                                    <div className=\"counter-icon\">\n                                        <i className=\"las la-award\"></i>\n                                    </div>\n                                    <div className=\"counter-number\">\n                                        <h4><CountUp end={100} duration={5} delay={1.5} />+</h4>\n                                        <p>Awards Wins</p>\n                                    </div>\n                                </div>\n                            </Col>\n                            <Col md=\"3\" xs=\"6\">\n                                <div className=\"counter-box\">\n                                    <div className=\"counter-icon\">\n                                        <i className=\"las la-book-reader\"></i>\n                                    </div>\n                                    <div className=\"counter-number\">\n                                        <h4><CountUp end={3790} duration={5} delay={1.5} />+</h4>\n                                        <p>Library Books</p>\n                                    </div>\n                                </div>\n                            </Col>\n                        </Row>\n                    </Container>\n                </section>\n            </Styles>\n        )\n    }\n}\n\nexport default NumberCounter\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .free-course-area {\n        padding: 70px 0;\n\n        .course-text {\n            padding-right: 50px;\n            margin-top   : 40px;\n\n            h4 {\n                color        : ${colors.black1};\n                line-height  : 35px;\n                font-weight  : 600;\n                margin-bottom: 25px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n\n            p {\n                font-size    : 15px;\n                color        : ${colors.text3};\n                line-height  : 28px;\n                margin-bottom: 45px;\n\n                @media(max-width: 575px) {\n                    font-size: 14px;\n                    margin-bottom: 20px;\n                }\n            }\n\n            @media(max-width: 767px) {\n                margin-top   : 0;\n            }\n        }\n\n        .countdown-timer {\n            p {\n                display       : inline-block;\n                border-right  : 1px solid ${colors.border1};\n                padding       : 0 25px;\n                font-size     : 14px;\n                color         : ${colors.text2};\n                font-weight   : 500;\n                text-transform: capitalize;\n\n                span {\n                    font-size     : 48px;\n                    color         : ${colors.green};\n                    display       : block;\n                    letter-spacing: 0;\n                    margin-top    : -12px;\n                    margin-bottom : -10px;\n\n                    @media(max-width: 991px) {\n                        font-size     : 32px;\n                    }\n                }\n\n                &:first-child {\n                    border-left: 1px solid ${colors.border1};\n                }\n\n                @media(max-width: 991px) {\n                    padding       : 0 20px;\n                }\n            }\n\n            @media(max-width: 767px) {\n                margin-bottom   : 40px;\n            }\n        }\n\n        .register-form {\n            background-size    : cover;\n            background-position: center;\n            background-repeat  : no-repeat;\n            position           : relative;\n            border-radius : 5px;\n            overflow: hidden;\n\n            &::before {\n                position  : absolute;\n                content   : \"\";\n                background: ${colors.green2};\n                opacity   : 0.93;\n                width     : 100%;\n                height    : 100%;\n                top       : 0;\n                left      : 0;\n            }\n\n            .form-box {\n                padding : 30px 40px 40px;\n                position: relative;\n                z-index : 111;\n\n                h4.title {\n                    color         : #ffffff;\n                    text-transform: uppercase;\n                    font-weight   : 500;\n                    margin-bottom : 6px;\n\n                    @media(max-width: 575px) {\n                        font-size: 20px;\n                    }\n                }\n\n                p.desc {\n                    font-size    : 14px;\n                    color        : #ffffff;\n                    margin-bottom: 20px;\n\n                    @media(max-width: 575px) {\n                        font-size: 13px;\n                    }\n                }\n\n                form.form {\n                    p.form-control {\n                        padding      : 0;\n                        width        : auto;\n                        height       : auto;\n                        background   : transparent;\n                        border       : none;\n                        margin-bottom: 28px;\n                        position     : relative;\n\n                        input {\n                            width           : 100%;\n                            height          : 48px;\n                            background-color: #ffffff;\n                            font-size       : 14px;\n                            padding         : 15px 20px;\n                            color           : ${colors.black1};\n                            border          : none;\n                            border-radius : 5px;\n\n                            &::placeholder {\n                                font-size : 14px;\n                                font-style: italic;\n                                color     : ${colors.bg1};\n                            }\n                        }\n\n                        span {\n                            color      : #ffffff;\n                            font-weight: 300;\n                            position   : absolute;\n                            bottom     : -20px;\n                            left       : 0;\n                            visibility : hidden;\n                        }\n                    }\n\n                    p.form-control.success {\n                        input {\n                            border: 2px solid ${colors.green};\n                        }\n\n                        &::before {\n                            position   : absolute;\n                            content    : \"\\f058\";\n                            font-family: \"Line Awesome Free\";\n                            font-size  : 24px;\n                            color      : ${colors.green};\n                            font-weight: 900;\n                            top        : 8px;\n                            right      : 10px;\n                        }\n                    }\n\n                    p.form-control.error {\n                        input {\n                            border: 2px solid ${colors.red};\n                        }\n\n                        &::before {\n                            position   : absolute;\n                            content    : \"\\f06a\";\n                            font-family: \"Line Awesome Free\";\n                            font-size  : 24px;\n                            color      : ${colors.red};\n                            font-weight: 900;\n                            top        : 8px;\n                            right      : 10px;\n                        }\n                    }\n\n                    p.form-control.error {\n                        span {\n                            visibility: visible;\n                        }\n                    }\n\n                    button {\n                        font-size  : 14px;\n                        color      : #fff;\n                        background : ${colors.black1};\n                        width      : 100%;\n                        height     : 48px;\n                        font-weight: 500;\n                        border     : none;\n                        border-radius : 5px;\n                        text-transform: uppercase;\n\n                        &:hover {\n                            background: ${colors.green};\n\n                            i {\n                                color: #ffffff;\n                            }\n                        }\n                    }\n                }\n\n                @media(max-width: 575px) {\n                    padding: 20px 25px 25px;\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 30px 0 40px;\n        }\n    }\n`;","import React, { useEffect } from 'react';\nimport Datas from '../data/free-course/free-course.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport Timer from 'react-compound-timer';\nimport { Styles } from \"./styles/freeCourse.js\";\n\nfunction FreeCourse() {\n    useEffect(() => {\n        const form = document.getElementById(\"form3\");\n        const name = document.getElementById(\"name3\");\n        const email = document.getElementById(\"email3\");\n        const phone = document.getElementById(\"phone3\");\n\n        form.addEventListener(\"submit\", formSubmit);\n\n        function formSubmit(e) {\n            e.preventDefault();\n\n            const nameValue = name.value.trim();\n            const emailValue = email.value.trim();\n            const phoneValue = phone.value.trim();\n\n            if (nameValue === \"\") {\n                setError(name, \"Name can't be blank\");\n            } else {\n                setSuccess(name);\n            }\n\n            if (emailValue === \"\") {\n                setError(email, \"Email can't be blank\");\n            } else if (!isEmail(emailValue)) {\n                setError(email, \"Not a valid email\");\n            } else {\n                setSuccess(email);\n            }\n\n            if (phoneValue === \"\") {\n                setError(phone, \"Phone number can't be blank\");\n            } else if (isNaN(phoneValue)) {\n                setError(phone, \"Not a valid phone number\");\n            } else {\n                setSuccess(phone);\n            }\n        }\n\n        function setError(input, message) {\n            const formControl = input.parentElement;\n            const errorMsg = formControl.querySelector(\".input-msg3\");\n            formControl.className = \"form-control text-left error\";\n            errorMsg.innerText = message;\n        }\n\n        function setSuccess(input) {\n            const formControl = input.parentElement;\n            formControl.className = \"form-control success\";\n        }\n\n        function isEmail(email) {\n            return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/.test(email);\n        }\n    });\n\n    return (\n        <Styles>\n            {/* Free Course */}\n            <section className=\"free-course-area\">\n                <Container>\n                    <Row>\n                        <Col md=\"7\">\n                            <div className=\"course-text\">\n                                <h4>{Datas.secTitle}</h4>\n                                <p>{Datas.subTitle}</p>\n                            </div>\n                            {/* <div className=\"countdown-timer\">\n                                <Timer initialTime={10440 * 2970 * 980} direction=\"backward\">\n                                    <p><span><Timer.Days /></span>Days</p>\n                                    <p><span><Timer.Hours /></span>Hours</p>\n                                    <p><span><Timer.Minutes /></span>Minutes</p>\n                                    <p><span><Timer.Seconds /></span>Seconds</p>\n                                </Timer>\n                            </div> */}\n                        </Col>\n                        <Col md=\"5\">\n                            <div className=\"register-form text-center\" style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${Datas.formBackground})` }}>\n                                <div className=\"form-box\">\n                                    <h4 className=\"title\" style={{\n                                        marginBottom: '20px'\n                                    }}>Apply Now</h4>\n                                    <form id=\"form3\" className=\"form\">\n                                        <p className=\"form-control\">\n                                            <input type=\"text\" placeholder=\"Enter your Name\" id=\"name3\" />\n                                            <span className=\"input-msg3\"></span>\n                                        </p>\n                                        <p className=\"form-control\">\n                                            <input type=\"email\" placeholder=\"Enter your Email\" id=\"email3\" />\n                                            <span className=\"input-msg3\"></span>\n                                        </p>\n                                        <p className=\"form-control\">\n                                            <input type=\"text\" placeholder=\"Enter Phone NUmber\" id=\"phone3\" />\n                                            <span className=\"input-msg3\"></span>\n                                        </p>\n                                        <button>Send Request</button>\n                                    </form>\n                                </div>\n                            </div>\n                        </Col>\n                    </Row>\n                </Container>\n            </section>\n        </Styles>\n    );\n}\n\nexport default FreeCourse\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .team-member-area {\n        background: ${colors.bg2};\n        padding   : 63px 0;\n\n        .sec-title {\n            h4 {\n                color        : ${colors.black1};\n                line-height  : 35px;\n                font-weight  : 600;\n                max-width    : 550px;\n                margin       : auto;\n                margin-bottom: 50px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 15px;\n                    font-size: 20px;\n                }\n            }\n        }\n\n        .team-slider {\n            position: relative;\n\n            .team-item {\n                position     : relative;\n                margin-bottom: 55px;\n\n                img {\n                    border-radius : 5px;\n                }\n\n                .img-content {\n                    background: #ffffff;\n                    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);\n                    position  : absolute;\n                    bottom    : -30px;\n                    left      : 10%;\n                    width     : 80%;\n                    z-index   : 1;\n                    border-radius : 5px;\n                    padding: 15px 0;\n\n                    h5 {\n                        color        : ${colors.black1};\n                        font-weight  : 600;\n                        margin-bottom: 5px;\n                    }\n\n                    p {\n                        font-size    : 14px;\n                        color        : ${colors.text3};\n                        font-weight  : 500;\n                        margin-bottom: 5px;\n                    }\n\n                    ul {\n                        li {\n                            a {\n                                i {\n                                    font-size: 14px;\n                                    color    : #ffffff;\n                                    width    : 33px;\n                                    height   : 33px;\n                                    border-radius : 50%;\n                                    padding-top: 10px;\n                                    transition : all 0.2s ease;\n\n                                    &:hover {\n                                        background-color: ${colors.green} !important;\n                                    }\n                                }\n\n                                i.fa-facebook-f {\n                                    background-color: #4267B2;\n                                }\n\n                                i.fa-twitter {\n                                    background-color: #1DA1F2;\n                                }\n\n                                i.fa-youtube {\n                                    background-color: #DD1343;\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n\n            .slider-dot {\n                margin-top: 25px !important;\n\n                .swiper-pagination-bullet {\n                    width     : 22px;\n                    height    : 9px;\n                    background: ${colors.text4};\n                    display   : inline-block;\n                    margin    : 3px;\n                    opacity   : 1 !important;\n                    border-radius : 5px;\n                }\n\n                .swiper-pagination-bullet.swiper-pagination-bullet-active {\n                    background: ${colors.green};\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 25px 0;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../data/team/team-slider.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport Swiper from 'react-id-swiper';\nimport { Styles } from \"./styles/teamSlider.js\";\n\nclass TeamSlider extends Component {\n    render() {\n        const settings = {\n            slidesPerView: 4,\n            loop: true,\n            speed: 1000,\n            autoplay: {\n                delay: 3000,\n                disableOnInteraction: false\n            },\n            spaceBetween: 30,\n            watchSlidesVisibility: true,\n            pagination: {\n                el: '.slider-dot.text-center',\n                clickable: true\n            },\n            breakpoints: {\n                0: {\n                    slidesPerView: 1\n                },\n                576: {\n                    slidesPerView: 2\n                },\n                768: {\n                    slidesPerView: 3\n                },\n                992: {\n                    slidesPerView: 4\n                }\n            }\n        };\n\n        return (\n            <Styles>\n                {/* Team Slider */}\n                <section className=\"team-member-area\">\n                    <Container>\n                        <Row>\n                            <Col md=\"12\">\n                                <div className=\"sec-title text-center\">\n                                    <h4>{Datas.secTitle}</h4>\n                                </div>\n                            </Col>\n                            <Col md=\"12\" className=\"team-slider\">\n                                <Swiper {...settings}>\n                                    {\n                                        Datas.dataList.map((data, i) => (\n                                            <div className=\"team-item\" key={i}>\n                                                <img src={ `/assets/images/${data.personImage}`} alt=\"\" className=\"img-fluid\" />\n                                                <div className=\"img-content text-center\">\n                                                    <h5>{data.personName}</h5>\n                                                    <p>{data.personTitle}</p>\n                                                    <ul className=\"list-unstyled list-inline\">\n                                                        <li className=\"list-inline-item\"><a href={ data.socialLinks.facebook}><i className=\"fab fa-facebook-f\"></i></a></li>\n                                                        <li className=\"list-inline-item\"><a href={ data.socialLinks.twitter}><i className=\"fab fa-twitter\"></i></a></li>\n                                                        <li className=\"list-inline-item\"><a href={ data.socialLinks.youtube}><i className=\"fab fa-youtube\"></i></a></li>\n                                                    </ul>\n                                                </div>\n                                            </div>\n                                        ))\n                                    }\n                                </Swiper>\n                            </Col>\n                        </Row>\n                    </Container>\n                </section>\n            </Styles>\n        )\n    }\n}\n\nexport default TeamSlider\n","import styled from \"styled-components\";\n\nexport const Styles = styled.div`\n    .gallery-area {\n        .gallery-box {\n            overflow: hidden;\n            position: relative;\n            img {\n                transition : all 0.3s ease;\n                &:hover {\n                    transform: scale(1.1);\n                }\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../data/gallery/gallery.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport ModalImage from \"react-modal-image\";\nimport { Styles } from \"./styles/imageGallery.js\";\n\nclass ImageGallery extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Campus Tour */}\n                <section className=\"gallery-area\">\n                    <Container fluid>\n                        <Row>\n                            {\n                                Datas.map((data, i) => (\n                                    <Col md=\"3\" sm=\"6\" className=\"padding-fix\" key={i}>\n                                        <div className=\"gallery-box\">\n                                            <ModalImage small={ `/assets/images/${data.galleryImage}`} large={ `/assets/images/${data.galleryImage}`} alt=\"\" />\n                                        </div>\n                                    </Col>\n                                ))\n                            }\n                        </Row>\n                    </Container>\n                </section>\n            </Styles>\n        )\n    }\n}\n\nexport default ImageGallery\n","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n    footer.footer2 {\n        background-size    : cover;\n        background-position: center;\n        background-repeat  : no-repeat;\n        position           : relative;\n        padding            : 70px 0 80px;\n\n        a {\n            color: ${colors.text3}  \n        }\n\n        &:before {\n            position  : absolute;\n            content   : \"\";\n            background: ${colors.bg1};\n            opacity   : 0.98;\n            width     : 100%;\n            height    : 100%;\n            top       : 0;\n            left      : 0;\n        }\n\n        .footer-logo-info {\n            img {\n                max-width : 100%;\n                margin-bottom: 30px;\n\n                @media(max-width: 767px) {\n                    margin-bottom: 18px;\n                }\n            }\n\n            p {\n                font-size    : 14px;\n                color        : ${colors.text3};\n                line-height  : 28px;\n                margin-bottom: 20px;\n\n                @media(max-width: 991px) {\n                    line-height: 25px;\n                    margin-bottom: 12px;\n                }\n            }\n\n            ul {\n                li {\n                    color        : ${colors.text3};\n                    margin-bottom: 12px;\n\n                    i {\n                        font-size     : 18px;\n                        color         : ${colors.green};\n                        width         : 35px;\n                        vertical-align: top;\n\n                        @media(max-width: 991px) {\n                            width : 20px;\n                        }\n                    }\n\n                    &:last-child {\n                        margin-bottom : 0;\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                margin-bottom: 30px;\n            }\n        }\n\n        .f-links {\n            padding-left: 25px;\n\n            h5 {\n                color         : ${colors.border1};\n                text-transform: uppercase;\n                margin-top    : 8px;\n                margin-bottom : 35px;\n\n                @media(max-width: 991px) {\n                    font-size: 18px;\n                    margin-bottom: 29px;\n                }\n\n                @media(max-width: 767px) {\n                    margin-bottom: 10px;\n                }\n            }\n\n            ul {\n                li {\n                    a {\n                        font-size  : 14px;\n                        color      : ${colors.text3};\n                        line-height: 39px;\n\n                        i {\n                            font-size   : 12px;\n                            color       : ${colors.green};\n                            margin-right: 10px;\n\n                            @media(max-width: 991px) {\n                                margin-right: 5px;\n                            }\n                        }\n\n                        &:hover {\n                            color: ${colors.green};\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 991px) {\n                padding-left : 0;\n            }\n\n            @media(max-width: 767px) {\n                margin-bottom: 30px;\n            }\n        }\n\n        .f-post {\n            h5 {\n                color         : ${colors.border1};\n                text-transform: uppercase;\n                margin-top    : 8px;\n                margin-bottom : 42px;\n\n                @media(max-width: 991px) {\n                    font-size: 18px;\n                    margin-bottom: 39px;\n                }\n\n                @media(max-width: 767px) {\n                    margin-bottom: 10px;\n                }\n            }\n\n            .post-box {\n                margin-bottom: 22px;\n\n                .po-icon {\n                    i {\n                        font-size   : 26px;\n                        color       : ${colors.green};\n                        line-height : 30px;\n                        margin-right: 10px;\n                    }\n                }\n\n                .po-content {\n                    a {\n                        font-size    : 14px;\n                        color        : ${colors.text3};\n                        display      : inline-block;\n                        margin-bottom: 3px;\n\n                        &:hover {\n                            color: ${colors.green};\n                        }\n                    }\n\n                    span {\n                        display: block;\n                        color  : ${colors.text2};\n                    }\n                }\n\n                &:last-child {\n                    margin-bottom: 0;\n                }\n\n                @media(max-width: 991px) {\n                    margin-bottom: 10px;\n                }\n            }\n\n            @media(max-width: 767px) {\n                margin-bottom: 30px;\n            }\n        }\n\n        .f-newsletter {\n            h5 {\n                color         : ${colors.border1};\n                text-transform: uppercase;\n                margin-top    : 8px;\n                margin-bottom : 38px;\n\n                @media(max-width: 991px) {\n                    font-size: 18px;\n                    margin-bottom: 37px;\n                }\n\n                @media(max-width: 767px) {\n                    margin-bottom: 10px;\n                }\n            }\n\n            p {\n                font-size    : 14px;\n                color        : ${colors.text3};\n                line-height  : 25px;\n                margin-bottom: 22px;\n            }\n\n            form.form {\n                p.form-control {\n                    padding      : 0;\n                    width        : auto;\n                    height       : auto;\n                    background   : transparent;\n                    border       : none;\n                    margin-bottom: 25px;\n                    position     : relative;\n\n                    input {\n                        width       : 100%;\n                        height      : 40px;\n                        border      : 1px solid ${colors.text2};\n                        background  : transparent;\n                        color       : ${colors.border1};\n                        padding-left: 15px;\n                        border-radius : 5px;\n\n                        &::placeholder {\n                            font-style: italic;\n                            color     : ${colors.text3};\n                        }\n                    }\n\n                    span {\n                        font-size: 13px;\n                        color      : ${colors.green};\n                        font-weight: 300;\n                        position   : absolute;\n                        bottom     : -22px;\n                        left       : 0;\n                        visibility : hidden;\n                    }\n                }\n\n                p.form-control.success {\n                    input {\n                        border: 2px solid ${colors.green};\n                    }\n\n                    &::before {\n                        position   : absolute;\n                        content    : \"\\f058\";\n                        font-family: \"Line Awesome Free\";\n                        font-size  : 24px;\n                        color      : ${colors.green};\n                        font-weight: 900;\n                        top        : 8px;\n                        right      : 10px;\n                    }\n                }\n\n                p.form-control.error {\n                    input {\n                        border: 2px solid ${colors.red};\n                    }\n\n                    &::before {\n                        position   : absolute;\n                        content    : \"\\f06a\";\n                        font-family: \"Line Awesome Free\";\n                        font-size  : 24px;\n                        color      : ${colors.red};\n                        font-weight: 900;\n                        top        : 8px;\n                        right      : 10px;\n                    }\n                }\n\n                p.form-control.error {\n                    span {\n                        visibility: visible;\n                    }\n                }\n\n                button {\n                    font-size  : 15px;\n                    color      : ${colors.border1};\n                    background : ${colors.gr_bg};\n                    width      : 100%;\n                    height     : 40px;\n                    font-weight: 500;\n                    border     : none;\n                    border-radius : 5px;\n\n                    &:hover {\n                        background: ${colors.gr_bg2};\n                    }\n                }\n            }\n        }\n\n        .copytext-area {\n            border-top : 1px solid ${colors.black2};\n            padding-top: 45px;\n            margin-top : 40px;\n\n            p {\n                font-size    : 14px;\n                color        : ${colors.text3};\n                margin-bottom: 25px;\n\n                i {\n                    color : ${colors.green};\n                    margin: 0 2px;\n                }\n\n                a {\n                    color: ${colors.green};\n\n                    &:hover {\n                        text-decoration: underline;\n                    }\n                }\n            }\n\n            ul.social {\n                li {\n                    a {\n                        text-align: center;\n                        position  : relative;\n                        height    : 18px;\n                        display   : inline-block;\n\n                        &:before {\n                            content           : \"\";\n                            position          : absolute;\n                            border-width      : 9px 17px;\n                            border-style      : solid;\n                            border-top-color  : transparent;\n                            border-right-color: transparent;\n                            border-left-color : transparent;\n                            top               : -18px;\n                            left              : 0;\n                            z-index           : 1;\n                            transition : all 0.2s ease;\n                        }\n\n                        &:after {\n                            content            : \"\";\n                            position           : absolute;\n                            border-width       : 9px 17px;\n                            border-style       : solid;\n                            border-right-color : transparent;\n                            border-bottom-color: transparent;\n                            border-left-color  : transparent;\n                            bottom             : -18px;\n                            left               : 0;\n                            z-index            : 1;\n                            transition : all 0.2s ease;\n                        }\n\n                        i {\n                            font-size: 14px;\n                            color    : #ffffff;\n                            width    : 34px;\n                        }\n\n                        &:hover {\n                            background-color: ${colors.green} !important;\n\n                            &:before {\n                                border-bottom-color: ${colors.green} !important;\n                            }\n\n                            &:after {\n                                border-top-color: ${colors.green} !important;\n                            }\n                        }\n                    }\n\n                    &:nth-child(1) {\n                        a {\n                            background-color: #4267B2;\n\n                            &:before {\n                                border-bottom-color: #4267B2;\n                            }\n\n                            &:after {\n                                border-top-color: #4267B2;\n                            }\n                        }\n                    }\n\n                    &:nth-child(2) {\n                        a {\n                            background-color: #1DA1F2;\n\n                            &:before {\n                                border-bottom-color: #1DA1F2;\n                            }\n\n                            &:after {\n                                border-top-color: #1DA1F2;\n                            }\n                        }\n                    }\n\n                    &:nth-child(3) {\n                        a {\n                            background-color: #2867B2;\n\n                            &:before {\n                                border-bottom-color: #2867B2;\n                            }\n\n                            &:after {\n                                border-top-color: #2867B2;\n                            }\n                        }\n                    }\n\n                    &:nth-child(4) {\n                        a {\n                            background-color: #DD1343;\n\n                            &:before {\n                                border-bottom-color: #DD1343;\n                            }\n\n                            &:after {\n                                border-top-color: #DD1343;\n                            }\n                        }\n                    }\n\n                    &:nth-child(5) {\n                        a {\n                            background-color: #ea4c89;\n\n                            &:before {\n                                border-bottom-color: #ea4c89;\n                            }\n\n                            &:after {\n                                border-top-color: #ea4c89;\n                            }\n                        }\n                    }\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 50px 0;\n        }\n    }\n`;","import React, { useEffect } from \"react\";\nimport Datas from \"../data/footer/footer2.json\";\n// import { Link } from 'react-router-dom';\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport BackToTop from \"./common/BackToTop\";\nimport { Styles } from \"./styles/footerTwo.js\";\n\nfunction FooterTwo() {\n\n  return (\n    <Styles>\n      {/* Footer Two */}\n      <footer\n        className=\"footer2\"\n     \n      >\n        <Container>\n          <Row>\n              <Col>\n              <div className=\"footer-logo-info\">\n                <div style={{ display: \"flex\" }}>\n                <img\n                  src={\"https://res.cloudinary.com/da5mimn3m/image/upload/v1712737763/mlc/Monalisa%20D.pharma%20College/WhatsApp_Image_2024-04-07_at_09.25.12_o4jz3m.jpg\"}\n                  alt=\"\"\n                  style={{\n                    width: \"50px\",\n                    height: \"50px\",\n                    marginRight: \"10px\",\n                  }}\n                  className=\"img-fluid\"\n                />\n                <h2 style={{\n                  color: \"white\"\n                }}>\n                MONALISA INSTITUTE OF MEDICAL SCIENCE\n                </h2>\n                </div>\n                <p>\n                  We Have Experienced Professionals & We Do Our Best To Achieve\n                  Your Goal. Your Happiness Is Our First Priority.\n                </p>\n                <ul className=\"list-unstyled\">\n                  <li>\n                    <i className=\"las la-map-marker\"></i>\n                    VILL + PO - KASHIMPUR,\n                    DUTTAPUKUR DIST - NORTH 24 PARGANAS, PIN - 743248\n                  </li>\n                  <li>\n                    <i className=\"las la-envelope\"></i>\n                    <a href=\"mailto:monalisacollegeofpharmacy@gmail.com\">\n                    monalisacollegeofpharmacy@gmail.com\n                    </a>\n                     / <a href=\"mailto:principalmims126@gmail.com\">\n                    principalmims126@gmail.com\n                     </a>\n                  </li>\n                  <li>\n                    <i className=\"las la-phone\"></i>\n                    <a href=\"tel:9193741234\">9193741234</a>\n                     / <a href=\"tel:9804588881\">9804588881</a>\n                  </li>\n                </ul>\n              </div>\n              </Col>\n          </Row>\n          <Row>\n          <Col md=\"12\">\n              <div className=\"copytext-area text-center\">\n                <p>\n                  Copyright &copy; {\n                    new Date().getFullYear()\n                  } | Designed With{\" \"}\n                  <i className=\"las la-heart\"></i> by{\" \"}\n                  <a\n                    href={\"https://www.myleadingcampus.com/\"}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    MyLeading Campus\n                  </a>\n                </p>\n                <ul className=\"social list-unstyled list-inline\">\n                  <li className=\"list-inline-item\">\n                    <a href={ \"/\"}>\n                      <i className=\"fab fa-facebook-f\"></i>\n                    </a>\n                  </li>\n                  <li className=\"list-inline-item\">\n                    <a href={ \"/\"}>\n                      <i className=\"fab fa-twitter\"></i>\n                    </a>\n                  </li>\n                  <li className=\"list-inline-item\">\n                    <a href={ \"/\"}>\n                      <i className=\"fab fa-linkedin-in\"></i>\n                    </a>\n                  </li>\n                  <li className=\"list-inline-item\">\n                    <a href={ \"/\"}>\n                      <i className=\"fab fa-youtube\"></i>\n                    </a>\n                  </li>\n                  <li className=\"list-inline-item\">\n                    <a href={ \"/\"}>\n                      <i className=\"fab fa-dribbble\"></i>\n                    </a>\n                  </li>\n                </ul>\n              </div>\n            </Col>\n          </Row>\n        </Container>\n\n        {/* Back To Top  */}\n        <BackToTop />\n      </footer>\n    </Styles>\n  );\n}\n\nexport default FooterTwo;\n","import React, { Component } from 'react';\nimport HeaderTwo from './components/HeaderTwo';\nimport HeroImage from './components/HeroImage';\nimport ServiceBox from './components/ServiceBox';\nimport AboutUsTwo from './components/AboutUsTwo';\nimport CourseSlider from './components/CourseSlider';\nimport NumberCounter from './components/NumberCounter';\nimport FreeCourse from './components/FreeCourse';\nimport TeamSlider from './components/TeamSlider';\nimport TestimonialSlider from './components/TestimonialSlider';\nimport HomeBlog from './components/HomeBlog';\nimport ImageGallery from './components/ImageGallery';\nimport FooterTwo from './components/FooterTwo';\nimport HeroSlider from './components/HeroSlider';\n\nexport default class HomeTwo extends Component {\n    render() {\n        return (\n            <div className=\"main-wrapper\">\n\n                {/* Header 2 */}\n                <HeaderTwo />\n\n                {/* Hero Image */}\n                {/* <HeroImage /> */}\n                <HeroSlider />\n\n                {/* Service Box */}\n                <ServiceBox />\n\n                {/* About Us 2 */}\n                <AboutUsTwo />\n\n                {/* Course Slider */}\n                {/* <CourseSlider /> */}\n\n                {/* Counter Area */}\n                <NumberCounter />\n\n                {/* Free Course Area */}\n                <FreeCourse />\n\n                {/* Team Slider */}\n                {/* <TeamSlider /> */}\n\n                {/* Testimonial Slider */}\n                <TestimonialSlider />\n\n                {/* Blog Area */}\n                {/* <HomeBlog /> */}\n\n                {/* Image Gallery Area */}\n                <ImageGallery />\n\n                {/* Footer 2 */}\n                <FooterTwo />\n\n            </div>\n        )\n    }\n}\n","import styled from \"styled-components\";\nimport { colors } from \"../element/elements.js\";\n\nexport const Styles = styled.div`\n    .breadcrumb-area {\n        background-size    : cover;\n        background-position: center;\n        background-repeat  : no-repeat;\n        padding            : 60px 0;\n        position           : relative;\n\n        &:before {\n            position  : absolute;\n            content   : '';\n            background: ${colors.bg1};\n            opacity   : 0.5;\n            width     : 100%;\n            height    : 100%;\n            top       : 0;\n            left      : 0;\n        }\n\n        .breadcrumb-box {\n            background: ${colors.bg1};\n            display   : inline-block;\n            padding   : 30px 45px;\n            border-radius : 5px;\n\n            h2.breadcrumb-title {\n                color         : #ffffff;\n                font-weight   : 600;\n                text-transform: uppercase;\n                margin-bottom : 5px;\n\n                @media(max-width: 767px) {\n                    font-size : 20px;\n                }\n            }\n\n            nav {\n                ol.breadcrumb {\n                    display         : inline-flex;\n                    padding         : 0;\n                    margin-bottom   : 0;\n                    background-color: transparent;\n                    border-radius : 0;\n\n                    li.breadcrumb-item {\n                        a {\n                            color: ${colors.green};\n\n                            &:hover {\n                                color: #ffffff;\n                            }\n                        }\n                    }\n\n                    li.breadcrumb-item.active {\n                        color: ${colors.border3};\n\n                        &::before {\n                            color: ${colors.border3};\n                        }\n                    }\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 30px 0;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport { Container, Row, Col, Breadcrumb } from 'react-bootstrap';\nimport { Styles } from \"./styles/breadcrumb.js\";\n\nexport class BreadcrumbBox extends Component {\n    state = {\n        backgroundImage: 'BUILDING_01.jpeg',\n    }\n\n    render() {\n        return (\n            <Styles>\n                <section className=\"breadcrumb-area\" style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${this.state.backgroundImage})` }}>\n                    <Container>\n                        <Row>\n                            <Col md=\"12\" className=\"text-center\">\n                                <div className=\"breadcrumb-box\">\n                                    <h2 className=\"breadcrumb-title\">{this.props.title}</h2>\n                                    <Breadcrumb>\n                                        <Breadcrumb.Item>Home</Breadcrumb.Item>\n                                        <Breadcrumb.Item active>{this.props.title}</Breadcrumb.Item>\n                                    </Breadcrumb>\n                                </div>\n                            </Col>\n                        </Row>\n                    </Container>\n                </section>\n            </Styles>\n        )\n    }\n}","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n\n    .tab-section {\n        background: ${colors.bg2};\n        padding   : 70px 0 65px;\n\n        .nav {\n            background-color: #ffffff;\n            border-radius : 5px;\n            border  : 1px solid ${colors.border1};\n            overflow: hidden;\n\n            .nav-item {\n                a.nav-link {\n                    font-size    : 15px;\n                    color        : ${colors.black1};\n                    border-bottom: 1px solid ${colors.border1};\n                    padding      : 18px 25px;\n\n                    i {\n                        color: ${colors.green};\n                    }\n                }\n\n                a.nav-link.active {\n                    background: ${colors.gr_bg};\n                    color     : #ffffff;\n\n                    i {\n                        color: #ffffff;\n                    }\n                }\n\n                &:last-child {\n                    a.nav-link {\n                        border-bottom: none;\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                margin-bottom : 30px;\n            }\n        }\n\n        .tab-content {\n            .tab-pane {\n                h4.tab-title {\n                    color        : ${colors.black1};\n                    font-weight  : 600;\n                    margin-bottom: 25px;\n\n                    @media(max-width: 575px) {\n                        margin-bottom: 15px;\n                        font-size: 20px;\n                    }\n                }\n\n                p.tab-desc {\n                    font-size    : 15px;\n                    color        : ${colors.text2};\n                    line-height  : 30px;\n                    margin-bottom: 25px;\n\n                    @media(max-width: 575px) {\n                        font-size: 14px;\n                    }\n                }\n\n                ul.check-list {\n                    li {\n                        font-size    : 15px;\n                        color        : ${colors.text3};\n                        margin-bottom: 20px;\n                        line-height  : 25px;\n\n                        i {\n                            float : left;\n                            color : ${colors.green};\n                            border: 1px solid ${colors.border3};\n                            width : 35px;\n                            height: 35px;\n                            border-radius : 50%;\n                            text-align  : center;\n                            padding-top : 9px;\n                            margin-top  : 7px;\n                            margin-right: 15px;\n                        }\n\n                        &:last-child {\n                            margin-bottom: 0;\n                        }\n\n                        @media(max-width: 575px) {\n                            font-size: 14px;\n                        }\n                    }\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 35px 0 30px;\n        }\n    }\n`;","import React, { Component } from \"react\";\nimport { Container, Row, Col, Tab, Nav } from \"react-bootstrap\";\nimport { Styles } from \"./styles/tabBox.js\";\n\nclass TabBox extends Component {\n  render() {\n    return (\n      <Styles>\n        {/* Tab Box Area */}\n        <section className=\"tab-section\">\n          <Container>\n            <Tab.Container defaultActiveKey=\"why\">\n              <Row>\n                <Col lg=\"3\" md=\"4\">\n                  <Nav className=\"flex-column\">\n                    <Nav.Item>\n                      <Nav.Link eventKey=\"why\">\n                        <i className=\"las la-arrow-right\"></i> Why Monalisa B.ed\n                        college\n                      </Nav.Link>\n                    </Nav.Item>\n                    <Nav.Item>\n                      <Nav.Link eventKey=\"mission\">\n                        <i className=\"las la-arrow-right\"></i> Our Mission\n                      </Nav.Link>\n                    </Nav.Item>\n                    <Nav.Item>\n                      <Nav.Link eventKey=\"vision\">\n                        <i className=\"las la-arrow-right\"></i> Our Vision\n                      </Nav.Link>\n                    </Nav.Item>\n                    {/* <Nav.Item>\n                      <Nav.Link eventKey=\"ranking\">\n                        <i className=\"las la-arrow-right\"></i> Our Ranking\n                      </Nav.Link>\n                    </Nav.Item> */}\n                    {/* <Nav.Item>\n                                            <Nav.Link eventKey=\"research\"><i className=\"las la-arrow-right\"></i> Our Research</Nav.Link>\n                                        </Nav.Item> */}\n                  </Nav>\n                </Col>\n                <Col lg=\"9\" md=\"8\">\n                  <Tab.Content>\n                    <Tab.Pane eventKey=\"why\">\n                      <h4 className=\"tab-title\">Why Monalisa Institute of Medical Science\n                      </h4>\n                      <p className=\"tab-desc\">\n                        exceptional faculty members who bring years of expertise\n                        and passion to the classroom. With a commitment to\n                        academic excellence, they go above and beyond to ensure\n                        that each student receives personalized attention and\n                        support tailored to their unique goals and aspirations.\n                      </p>\n                      <ul className=\"list-unstyled check-list\">\n                        <li>\n                          <i className=\"fa fa-check\"></i>Exceptional faculty\n                          dedicated to personalized support for student success.\n                        </li>\n                        <li>\n                          <i className=\"fa fa-check\"></i>Nurturing environment\n                          fostering student empowerment and happiness as top\n                          priority.\n                        </li>\n                        <li>\n                          <i className=\"fa fa-check\"></i>Academic excellence\n                          guided by passionate mentors, unlocking students' full\n                          potential.\n                        </li>\n                      </ul>\n                    </Tab.Pane>\n                    <Tab.Pane eventKey=\"mission\">\n                      <h4 className=\"tab-title\">Our Mission</h4>\n                      <p className=\"tab-desc\">\n                        At our college, our mission is to cultivate aspiring\n                        educators who are not only proficient in their subject\n                        matter but also equipped with the necessary pedagogical\n                        skills and passion for teaching. We are committed to\n                        fostering a dynamic learning environment that promotes\n                        critical thinking, creativity, and innovation in\n                        educational practices. Our goal is to empower our\n                        graduates to become compassionate and effective teachers\n                        who can inspire and motivate students to reach their\n                        full potential, contribute to their communities, and\n                        become lifelong learners.\n                      </p>\n                      <ul className=\"list-unstyled check-list\">\n                        <li>\n                          <i className=\"fa fa-check\"></i>Promote excellence in\n                          teaching by providing rigorous academic training and\n                          practical experiences.\n                        </li>\n                        <li>\n                          <i className=\"fa fa-check\"></i>Foster a supportive and\n                          inclusive learning environment that nurtures the\n                          growth and development of every student.\n                        </li>\n                        <li>\n                          <i className=\"fa fa-check\"></i>Empower graduates to\n                          make meaningful contributions to the field of\n                          education through innovative teaching methodologies\n                          and a commitment to lifelong learning.\n                        </li>\n                      </ul>\n                    </Tab.Pane>\n                    <Tab.Pane eventKey=\"vision\">\n                      <h4 className=\"tab-title\">Our Vision</h4>\n                      <p className=\"tab-desc\">\n                        Our vision at the college is to be a beacon of\n                        excellence in teacher education, recognized for our\n                        innovative approaches, transformative learning\n                        experiences, and impactful contributions to the field of\n                        education. We aspire to nurture a community of educators\n                        who are forward-thinking, adaptable, and dedicated to\n                        promoting equity, diversity, and inclusion in education.\n                        Through our commitment to continuous improvement and\n                        collaboration with stakeholders, we aim to shape the\n                        future of education by producing compassionate and\n                        competent teachers who can inspire positive change in\n                        society.\n                      </p>\n                      <ul className=\"list-unstyled check-list\">\n                        <li>\n                          <i className=\"fa fa-check\"></i>\n                          Empower educators to be agents of change, driving\n                          social impact and educational equity.\n                        </li>\n                        <li>\n                          <i className=\"fa fa-check\"></i>Strive to be a leader\n                          in teacher education through innovative practices and\n                          research.\n                        </li>\n                        <li>\n                          <i className=\"fa fa-check\"></i>Cultivate a diverse and\n                          inclusive community that values collaboration,\n                          respect, and empathy.\n                        </li>\n                      </ul>\n                    </Tab.Pane>\n                    {/* <Tab.Pane eventKey=\"ranking\">\n                      <h4 className=\"tab-title\">Our Ranking</h4>\n                      <p className=\"tab-desc\">\n                        Lorem ipsum dolor sit amet, consectetur adipisicing\n                        elit. Voluptatum amet quo eius saepe et quis\n                        necessitatibus hic natus facere a nisi fuga rem quas\n                        molestias, eveniet minima molestiae. Lorem ipsum dolor,\n                        sit amet consectetur adipisicing elit. Ea, recusandae?\n                        Assumenda, error. Quam dicta iusto saepe. Odit minus\n                        voluptas, fuga ipsum quia debitis totam, tempore\n                        laudantium quasi dicta dolorem deleniti.\n                      </p>\n                      <ul className=\"list-unstyled check-list\">\n                        <li>\n                          <i className=\"fa fa-check\"></i>Lorem ipsum dolor sit\n                          amet, consectetur adipisicing elit. Voluptatum amet\n                          quo eius saepe et quis necessitatibus hic natus\n                          facere.\n                        </li>\n                        <li>\n                          <i className=\"fa fa-check\"></i>Lorem ipsum dolor sit\n                          amet, consectetur adipisicing elit. Voluptatum amet\n                          quo eius saepe et quis necessitatibus hic natus\n                          facere.\n                        </li>\n                        <li>\n                          <i className=\"fa fa-check\"></i>Lorem ipsum dolor sit\n                          amet, consectetur adipisicing elit. Voluptatum amet\n                          quo eius saepe et quis necessitatibus hic natus\n                          facere.\n                        </li>\n                      </ul>\n                    </Tab.Pane> */}\n                    {/* <Tab.Pane eventKey=\"research\">\n                      <h4 className=\"tab-title\">Our Research</h4>\n                      <p className=\"tab-desc\">\n                        Lorem ipsum dolor sit amet, consectetur adipisicing\n                        elit. Voluptatum amet quo eius saepe et quis\n                        necessitatibus hic natus facere a nisi fuga rem quas\n                        molestias, eveniet minima molestiae. Lorem ipsum dolor,\n                        sit amet consectetur adipisicing elit. Ea, recusandae?\n                        Assumenda, error. Quam dicta iusto saepe. Odit minus\n                        voluptas, fuga ipsum quia debitis totam, tempore\n                        laudantium quasi dicta dolorem deleniti.\n                      </p>\n                      <ul className=\"list-unstyled check-list\">\n                        <li>\n                          <i className=\"fa fa-check\"></i>Lorem ipsum dolor sit\n                          amet, consectetur adipisicing elit. Voluptatum amet\n                          quo eius saepe et quis necessitatibus hic natus\n                          facere.\n                        </li>\n                        <li>\n                          <i className=\"fa fa-check\"></i>Lorem ipsum dolor sit\n                          amet, consectetur adipisicing elit. Voluptatum amet\n                          quo eius saepe et quis necessitatibus hic natus\n                          facere.\n                        </li>\n                        <li>\n                          <i className=\"fa fa-check\"></i>Lorem ipsum dolor sit\n                          amet, consectetur adipisicing elit. Voluptatum amet\n                          quo eius saepe et quis necessitatibus hic natus\n                          facere.\n                        </li>\n                      </ul>\n                    </Tab.Pane> */}\n                  </Tab.Content>\n                </Col>\n              </Row>\n            </Tab.Container>\n          </Container>\n        </section>\n      </Styles>\n    );\n  }\n}\n\nexport default TabBox;\n","import styled from \"styled-components\";\n\nexport const Styles = styled.div`\n    .about-page {\n        .icon-box-area {\n            padding-bottom : 72px;\n            .full-icon-box {\n                .icon-box {\n                    position: inherit;\n                    top: 0;\n                    left: 0;\n                    width: unset;\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding: 0 0 10px;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport AboutUs from '../../components/AboutUs';\nimport IconBox from '../../components/IconBox';\nimport TabBox from './../../components/TabBox';\nimport TestimonialSlider from '../../components/TestimonialSlider';\nimport FaqEvent from '../../components/FaqEvent';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from \"./styles/about.js\";\n\nclass About extends Component {\n\n    render() {\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper about-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"About Us\" />\n\n                    {/* About Area */}\n                    <AboutUs />\n\n                    {/* Icon Box Area */}\n                    <IconBox />\n\n                    {/* Tab Section */}\n                    {/* <TabBox /> */}\n\n                    {/* Testimonial Slider */}\n                    <TestimonialSlider />\n\n                    {/* Faq & Event Area */}\n                    <FaqEvent />\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default About","import styled from \"styled-components\";\nimport { colors } from \"../common/element/elements.js\";\n\nexport const Styles = styled.div`\n\n    /* Pagination */\n    ul.pagination-box {\n        margin-top: 20px;\n        li {\n            margin-right : 15px;\n            a {\n                font-size: 16px;\n                color: ${colors.green};\n                width: 38px;\n                height: 38px;\n                border: 1px solid ${colors.border3};\n                background-color: #fff;\n                display: block;\n                padding-top: 7px;\n                border-radius: 50%;\n                i {\n\n                }\n                &:hover {\n                    background-color: ${colors.green};\n                    color: #ffffff;\n                    border-color : ${colors.green};\n                }\n\n                @media(max-width: 575px) {\n                    font-size: 14px;\n                    width: 30px;\n                    height: 30px;\n                    padding-top: 4px;\n                }\n            }\n            &:last-child {\n                margin-right : 0;\n            }\n        }\n        li.active {\n            a {\n                background-color: ${colors.green};\n                color: #fff;\n                border-color : ${colors.green};\n            }\n        }\n\n        @media(max-width: 767px) {\n            margin-top: 5px;\n        }\n    }\n`;","import React, { Component } from 'react';\n// import { Link } from 'react-router-dom';\nimport { Styles } from \"./styles/pagination.js\";\n\nclass Pagination extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Pagination */}\n                {/* <ul className=\"pagination-box list-unstyled list-inline\">\n                    <li className=\"list-inline-item\"><Link to={ \"/\"}><i className=\"las la-angle-double-left\"></i></Link></li>\n                    <li className=\"list-inline-item\"><Link to={ \"/\"}>1</Link></li>\n                    <li className=\"list-inline-item\"><Link to={ \"/\"}>2</Link></li>\n                    <li className=\"active list-inline-item\"><Link to={ \"/\"}>3</Link></li>\n                    <li className=\"list-inline-item\"><Link to={ \"/\"}>...</Link></li>\n                    <li className=\"list-inline-item\"><Link to={ \"/\"}>13</Link></li>\n                    <li className=\"list-inline-item\"><Link to={ \"/\"}><i className=\"las la-angle-double-right\"></i></Link></li>\n                </ul> */}\n            </Styles>\n        )\n    }\n}\n\nexport default Pagination\n","import React, { Component, Fragment } from 'react';\nimport Datas from '../../../data/course/item.json';\nimport { Link } from 'react-router-dom';\nimport { Col } from 'react-bootstrap';\nimport Pagination from './../../../components/Pagination';\n\nclass CourseItemGrid extends Component {\n    render() {\n        return (\n            <Fragment>\n                {/* Course Item */}\n                {\n                    Datas.map((data, i) => (\n                        <Col lg=\"6\" md=\"12\" key={i}>\n                            <div className=\"course-item\">\n                                <Link to={ data.courseLink}>\n                                    <div className=\"course-image\" style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${data.imgUrl})` }}>\n                                        <div className=\"author-img d-flex\">\n                                            <div className=\"img\">\n                                                <img src={ `/assets/images/${data.authorImg}`} alt=\"\" />\n                                            </div>\n                                            <div className=\"title\">\n                                                <p>{data.authorName}</p>\n                                                <span>{data.authorCourses}</span>\n                                            </div>\n                                        </div>\n                                        <div className=\"course-price\">\n                                            <p>{data.price}</p>\n                                        </div>\n                                    </div>\n                                </Link>\n                                <div className=\"course-content\">\n                                    <h6 className=\"heading\"><Link to={ data.courseLink}>{data.courseTitle}</Link></h6>\n                                    <p className=\"desc\">{data.courseDesc}</p>\n                                    <div className=\"course-face d-flex justify-content-between\">\n                                        <div className=\"duration\">\n                                            <p><i className=\"las la-clock\"></i>120</p>\n                                        </div>\n                                        <div className=\"rating\">\n                                            <ul className=\"list-unstyled list-inline\">\n                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i>\n                                                </li>\n                                                <li className=\"list-inline-item\">(4.5)</li>\n                                            </ul>\n                                        </div>\n                                        <div className=\"student\">\n                                            <p><i className=\"las la-chair\"></i>60</p>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </Col>\n                    ))\n                }\n\n                <Col md=\"12\" className=\"text-center\">\n                    <Pagination />\n                </Col>\n            </Fragment>\n        )\n    }\n}\n\nexport default CourseItemGrid\n","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n\n    /* Course Grid */\n    .course-grid-area {\n        padding: 70px 0;\n        .course-items {\n            .course-item {\n                border: 1px solid ${colors.border1};\n                border-radius : 5px;\n                transition : all 0.2s ease;\n                overflow : hidden;\n                margin-bottom: 30px;\n\n                .course-image {\n                    width              : 100%;\n                    height             : 240px;\n                    background-size    : cover;\n                    background-position: center;\n                    background-repeat  : no-repeat;\n                    border-radius : 5px 5px 0 0;\n                    position: relative;\n\n                    .author-img {\n                        position: absolute;\n                        left    : 20px;\n                        bottom  : 20px;\n\n                        img {\n                            max-width: 40px;\n                            border-radius : 50%;\n                            margin-right: 5px;\n                        }\n\n                        .title {\n                            background: #ffffff;\n                            padding   : 3px 8px;\n                            border-radius : 5px;\n\n                            p {\n                                font-size    : 12px;\n                                color        : ${colors.black1};\n                                font-weight  : 500;\n                                margin-bottom: -4px;\n                            }\n\n                            span {\n                                font-size  : 11px;\n                                color      : ${colors.text3};\n                                font-weight: 500;\n                            }\n                        }\n\n                    }\n\n                    .course-price {\n                        p {\n                            font-size  : 16px;\n                            color      : #ffffff;\n                            background : ${colors.bg1};\n                            position   : absolute;\n                            right      : 20px;\n                            bottom     : 20px;\n                            padding    : 8px 10px;\n                            font-weight: 500;\n                            border-radius : 5px;\n                        }\n                    }\n\n                    @media(max-width: 767px) {\n                        height: 185px;\n                    }\n                }\n\n                .course-content {\n                    background: #fff;\n                    padding   : 20px 25px;\n\n                    h6.heading {\n                        a {\n                            color        : ${colors.black1};\n                            font-weight  : 600;\n                            display      : inline-block;\n                            margin-bottom: 12px;\n\n                            &:hover {\n                                color: ${colors.green};\n                            }\n                        }\n                    }\n\n                    p.desc {\n                        font-size     : 14px;\n                        color         : ${colors.text3};\n                        line-height   : 25px;\n                        border-bottom : 1px solid ${colors.border1};\n                        padding-bottom: 10px;\n                        margin-bottom : 12px;\n                    }\n\n                    .course-face {\n\n                        .duration,\n                        .student {\n                            p {\n                                font-size: 13px;\n                                color    : ${colors.text3};\n\n                                i {\n                                    font-size     : 16px;\n                                    color         : ${colors.green};\n                                    vertical-align: text-bottom;\n                                    margin-right  : 3px;\n                                }\n                            }\n                        }\n\n                        .rating {\n                            ul {\n                                li {\n                                    margin-right: 0;\n\n                                    i {\n                                        font-size: 14px;\n                                        color    : ${colors.yellow};\n                                    }\n\n                                    &:last-child {\n                                        font-size: 13px;\n                                        color    : ${colors.text3};\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n\n                &:hover {\n                    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.07);\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 40px 0 30px;\n        }\n    }\n\n    /* Course List */\n    .course-list-area {\n        padding: 70px 0;\n        .course-items2 {\n            .course-item {\n                border-radius : 5px;\n                transition : all 0.2s ease;\n                overflow : hidden;\n                box-shadow: 0 8px 20px 5px rgba(0,0,0,0.07);\n                margin-bottom: 30px;\n\n                .course-image-box {\n                    .course-image {\n                        width              : 290px;\n                        height             : 230px;\n                        background-size    : cover;\n                        background-position: center;\n                        background-repeat  : no-repeat;\n                        border-radius : 5px 5px 0 0;\n                        position: relative;\n\n                        .author-img {\n                            position: absolute;\n                            left    : 20px;\n                            top  : 20px;\n\n                            img {\n                                max-width: 40px;\n                                border-radius : 50%;\n                                margin-right: 5px;\n                            }\n\n                            .title {\n                                background: #ffffff;\n                                padding   : 3px 8px;\n                                border-radius : 5px;\n\n                                p {\n                                    font-size    : 12px;\n                                    color        : ${colors.black1};\n                                    font-weight  : 500;\n                                    margin-bottom: -4px;\n                                }\n\n                                span {\n                                    font-size  : 11px;\n                                    color      : ${colors.text3};\n                                    font-weight: 500;\n                                }\n                            }\n\n                            @media(max-width: 991px) {\n                                top  : unset;\n                                bottom : 20px;\n                            }\n                        }\n\n                        .course-price {\n                            p {\n                                font-size  : 16px;\n                                color      : #ffffff;\n                                background : ${colors.bg1};\n                                position   : absolute;\n                                right      : 20px;\n                                top     : 20px;\n                                padding    : 8px 10px;\n                                font-weight: 500;\n                                border-radius : 5px;\n\n                                @media(max-width: 991px) {\n                                    top  : unset;\n                                    bottom : 20px;\n                                }\n                            }\n                        }\n\n                        @media(max-width: 991px) {\n                            width: 100%;\n                        }\n                    }\n                }\n\n                .course-content {\n                    background: #fff;\n                    padding   : 20px 25px;\n\n                    h6.heading {\n                        padding-bottom: 12px;\n                        margin-bottom: 20px;\n                        position: relative;\n                        &:before {\n                            position: absolute;\n                            content: \"\";\n                            background: ${colors.green};\n                            width: 50px;\n                            height: 2px;\n                            bottom: 0;\n                            left: 0;\n                        }\n\n                        a {\n                            color        : ${colors.black1};\n                            font-weight  : 600;\n                            display      : inline-block;\n\n                            &:hover {\n                                color: ${colors.green};\n                            }\n                        }\n                    }\n\n                    .rating {\n                        margin-bottom: 6px;\n                        ul {\n                            li {\n                                margin-right: 0;\n\n                                i {\n                                    font-size: 14px;\n                                    color    : ${colors.yellow};\n                                }\n\n                                &:last-child {\n                                    font-size: 13px;\n                                    color    : ${colors.text3};\n                                }\n                            }\n                        }\n                    }\n\n                    p.desc {\n                        font-size     : 14px;\n                        color         : ${colors.text3};\n                        line-height   : 25px;\n                        margin-bottom : 15px;\n                    }\n\n                    a.details-btn {\n                        font-size : 13px;\n                        color : ${colors.green};\n                        border : 1px solid ${colors.border3};\n                        padding: 7px 15px;\n                        border-radius: 5px;\n                        font-weight: 500;\n                        &:hover {\n                            color : #ffffff;\n                            background : ${colors.gr_bg};\n                            border-color : ${colors.green};\n                        }\n                    }\n                }\n\n                &:hover {\n                    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);\n                }\n\n                @media(max-width: 991px) {\n                    display : block !important;\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 40px 0 30px;\n        }\n    }\n\n    /* Course Details */\n    .course-details-area {\n        padding : 70px 0 78px;\n        .course-details-top {\n            .heading {\n                h4 {\n                    color : ${colors.black1};\n                    font-weight: 600;\n                    line-height: 35px;\n                    margin-bottom: 25px;\n\n                    @media(max-width: 575px) {\n                        font-size : 20px;\n                    }\n                }\n            }\n            .course-top-overview {\n                margin-bottom : 25px;\n                .overviews {\n                    .author {\n                        margin-right : 20px;\n                        padding-right : 20px;\n                        margin-top: -3px;\n                        border-right : 1px solid ${colors.border3};\n                        img {\n                            float : left;\n                            max-width: 50px;\n                            border-radius: 50%;\n                            margin-right: 10px;\n                        }\n                        .author-name {\n                            float : left;\n                            margin-top: 3px;\n                            h6 {\n                                color : ${colors.black2};\n                                font-weight: 600;\n                                text-transform: uppercase;\n                                margin-bottom: 5px;\n\n                                @media(max-width: 767px) {\n                                    font-size : 14px;\n                                }\n                            }\n                            p {\n                                font-size : 15px;\n                                color : ${colors.text3};\n                                font-weight: 500;\n\n                                @media(max-width: 767px) {\n                                    font-size : 14px;\n                                }\n                            }\n                        }\n                    }\n\n                    .category {\n                        margin-right : 20px;\n                        padding-right : 20px;\n                        border-right : 1px solid ${colors.border3};\n                        h6 {\n                            color : ${colors.black2};\n                            font-weight: 600;\n                            text-transform: uppercase;\n                            margin-bottom: 5px;\n\n                            @media(max-width: 767px) {\n                                font-size : 14px;\n                            }\n                        }\n                        p {\n                            font-size : 15px;\n                            color : ${colors.text3};\n                            font-weight: 500;\n\n                            @media(max-width: 767px) {\n                                font-size : 14px;\n                            }\n                        }\n                    }\n\n                    .rating {\n                        margin-right : 20px;\n                        padding-right : 20px;\n                        border-right : 1px solid ${colors.border3};\n                        h6 {\n                            color : ${colors.black2};\n                            font-weight: 600;\n                            text-transform: uppercase;\n                            margin-bottom: 5px;\n\n                            @media(max-width: 767px) {\n                                font-size : 14px;\n                            }\n                        }\n                        ul {\n                            li {\n                                margin-right: 1px;\n                                i {\n                                    font-size: 16px;\n                                    color: ${colors.yellow};\n                                }\n                                &:last-child {\n                                    font-size : 15px;\n                                    color : ${colors.text3};\n                                    font-weight: 500;\n                                    margin-left: 5px;\n\n                                    @media(max-width: 767px) {\n                                        font-size : 14px;\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    .price {\n                        h6 {\n                            color : ${colors.black2};\n                            font-weight: 600;\n                            text-transform: uppercase;\n                            margin-bottom: 5px;\n\n                            @media(max-width: 767px) {\n                                font-size : 14px;\n                            }\n                        }\n                        p {\n                            font-size : 15px;\n                            color : ${colors.text3};\n                            font-weight: 500;\n\n                            @media(max-width: 767px) {\n                                font-size : 14px;\n                            }\n                        }\n                    }\n                }\n\n                @media(max-width: 480px) {\n                    display : none;\n                }\n            }\n            .course-details-banner {\n                margin-bottom: 40px;\n                img {\n                    border-radius : 5px;\n                }\n            }\n            .course-tab-list {\n                .nav {\n                    display: inline-block;\n                    border-radius: 5px;\n                    box-shadow: 0 8px 25px rgba(0,0,0,0.1);\n                    margin-bottom: 35px;\n                    .nav-item {\n                        display: inline-block;\n                        a.nav-link {\n                            font-size: 14px;\n                            color: ${colors.black2};\n                            font-weight: 500;\n                            text-transform : uppercase;\n                            padding: 12px 30px 10px;\n                            border-radius: 5px;\n\n                            @media(max-width: 991px) {\n                                padding: 12px 16px 9px;\n                            }\n                        }\n                        a.nav-link.active {\n                            background : ${colors.gr_bg};\n                            color : #ffffff;\n                        }\n                    }\n                }\n                .tab-content {\n                    .overview-tab {\n                        h5 {\n                            color: ${colors.black2};\n                            font-weight: 600;\n                            padding-bottom: 10px;\n                            margin-bottom: 20px;\n                            position: relative;\n                            &:before {\n                                position: absolute;\n                                content: \"\";\n                                background: ${colors.green};\n                                width: 50px;\n                                height: 2px;\n                                bottom: 0;\n                                left: 0;\n                            }\n\n                            @media(max-width: 575px) {\n                                font-size : 17px;\n                            }                            \n                        }\n                        p {\n                            font-size: 15px;\n                            color: ${colors.text2};\n                            line-height: 25px;\n\n                            @media(max-width: 575px) {\n                                font-size : 14px;\n                            }\n                        }\n\n                        .course-desc {\n                            margin-bottom: 40px;\n                        }\n\n                        .course-feature {\n                            margin-bottom: 40px;\n                            ul {\n                                margin-top: 20px;\n                                li {\n                                    font-size : 14px;\n                                    color: ${colors.text3};\n                                    line-height : 25px;\n                                    margin-bottom : 10px;\n                                    i {\n                                        font-size : 20px;\n                                        color: ${colors.green};\n                                        float: left;\n                                        height: 40px;\n                                        line-height: 27px;\n                                        margin-right: 10px;\n                                    }\n                                    &:last-child {\n                                        margin-bottom: 0;\n                                    }\n                                }\n                            }\n                        }\n                        .course-learn {\n                            margin-bottom: 40px;\n                            ul {\n                                margin-top: 20px;\n                                li {\n                                    font-size: 14px;\n                                    color: ${colors.text3};\n                                    line-height: 25px;\n                                    margin-bottom: 15px;\n                                    i {\n                                        float: left;\n                                        color: ${colors.green};\n                                        border: 1px solid ${colors.border3};\n                                        width: 35px;\n                                        height: 35px;\n                                        border-radius: 50%;\n                                        text-align: center;\n                                        padding-top: 9px;\n                                        margin-top: 8px;\n                                        margin-right: 15px;\n                                    }\n                                    &:last-child {\n                                        margin-bottom: 0;\n                                    }\n                                }\n                            }\n                        }\n                        .course-share {\n                            ul.social {\n                                margin-top: 30px;\n                                li {\n                                    a {\n                                        text-align: center;\n                                        position  : relative;\n                                        height    : 18px;\n                                        display   : inline-block;\n\n                                        &:before {\n                                            content           : \"\";\n                                            position          : absolute;\n                                            border-width      : 9px 17px;\n                                            border-style      : solid;\n                                            border-top-color  : transparent;\n                                            border-right-color: transparent;\n                                            border-left-color : transparent;\n                                            top               : -18px;\n                                            left              : 0;\n                                            z-index           : 1;\n                                            transition : all 0.2s ease;\n                                        }\n\n                                        &:after {\n                                            content            : \"\";\n                                            position           : absolute;\n                                            border-width       : 9px 17px;\n                                            border-style       : solid;\n                                            border-right-color : transparent;\n                                            border-bottom-color: transparent;\n                                            border-left-color  : transparent;\n                                            bottom             : -18px;\n                                            left               : 0;\n                                            z-index            : 1;\n                                            transition : all 0.2s ease;\n                                        }\n\n                                        i {\n                                            font-size: 14px;\n                                            color    : #ffffff;\n                                            width    : 34px;\n                                        }\n\n                                        &:hover {\n                                            background-color: ${colors.green} !important;\n\n                                            &:before {\n                                                border-bottom-color: ${colors.green} !important;\n                                            }\n\n                                            &:after {\n                                                border-top-color: ${colors.green} !important;\n                                            }\n                                        }\n                                    }\n\n                                    &:nth-child(1) {\n                                        a {\n                                            background-color: #4267B2;\n\n                                            &:before {\n                                                border-bottom-color: #4267B2;\n                                            }\n\n                                            &:after {\n                                                border-top-color: #4267B2;\n                                            }\n                                        }\n                                    }\n\n                                    &:nth-child(2) {\n                                        a {\n                                            background-color: #1DA1F2;\n\n                                            &:before {\n                                                border-bottom-color: #1DA1F2;\n                                            }\n\n                                            &:after {\n                                                border-top-color: #1DA1F2;\n                                            }\n                                        }\n                                    }\n\n                                    &:nth-child(3) {\n                                        a {\n                                            background-color: #2867B2;\n\n                                            &:before {\n                                                border-bottom-color: #2867B2;\n                                            }\n\n                                            &:after {\n                                                border-top-color: #2867B2;\n                                            }\n                                        }\n                                    }\n\n                                    &:nth-child(4) {\n                                        a {\n                                            background-color: #DD1343;\n\n                                            &:before {\n                                                border-bottom-color: #DD1343;\n                                            }\n\n                                            &:after {\n                                                border-top-color: #DD1343;\n                                            }\n                                        }\n                                    }\n\n                                    &:nth-child(5) {\n                                        a {\n                                            background-color: #ea4c89;\n\n                                            &:before {\n                                                border-bottom-color: #ea4c89;\n                                            }\n\n                                            &:after {\n                                                border-top-color: #ea4c89;\n                                            }\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n                    .curriculum-tab {\n                        .course-curriculum {\n                            margin-bottom: 40px;\n                            h5 {\n                                color: ${colors.black2};\n                                font-weight: 600;\n                                padding-bottom: 10px;\n                                margin-bottom: 20px;\n                                position: relative;\n                                &:before {\n                                    position: absolute;\n                                    content: \"\";\n                                    background: ${colors.green};\n                                    width: 50px;\n                                    height: 2px;\n                                    bottom: 0;\n                                    left: 0;\n                                }\n\n                                @media(max-width: 575px) {\n                                    font-size : 17px;\n                                }  \n                            }\n                            p {\n                                font-size: 15px;\n                                color: ${colors.text2};\n                                line-height: 25px;\n\n                                @media(max-width: 575px) {\n                                    font-size : 14px;\n                                }\n                            }\n                        }\n                        .course-element {\n                            h5 {\n                                color: ${colors.black2};\n                                font-weight: 600;\n                                padding-bottom: 10px;\n                                margin-bottom: 20px;\n                                position: relative;\n                                &:before {\n                                    position: absolute;\n                                    content: \"\";\n                                    background: ${colors.green};\n                                    width: 50px;\n                                    height: 2px;\n                                    bottom: 0;\n                                    left: 0;\n                                }\n\n                                @media(max-width: 575px) {\n                                    font-size : 17px;\n                                }\n                            }\n                            .course-item {\n                                margin-bottom: 10px;\n                                button.course-button {\n                                    border: none;\n                                    background: transparent;\n                                    margin-bottom: 15px;\n                                    display: block;\n                                    width: 100%;\n                                    text-align : left;\n                                    padding: 0;\n                                    font-size : 18px;\n                                    color: ${colors.black2};\n                                    font-weight: 500;\n                                    span {\n                                        float: right;\n                                        font-size: 14px;\n                                        color: ${colors.text3};\n                                        font-weight: 400;\n                                    }\n                                }\n\n                                .course-content {\n                                    max-height: 0;\n                                    overflow  : hidden;\n                                    transition: max-height 0.2s ease-in-out;\n                                    ul {\n                                        li {\n                                            border-bottom : 1px solid ${colors.border3};\n                                            margin-left: 25px;\n                                            padding: 12px 0;\n                                            span.play-icon {\n                                                font-size : 14px;\n                                                color: ${colors.text3};\n                                                margin-right: 20px;\n                                                i {\n                                                    color: ${colors.green};\n                                                    border: 1px solid ${colors.green};\n                                                    font-size: 22px;\n                                                    width: 30px;\n                                                    height: 30px;\n                                                    border-radius: 50%;\n                                                    padding-left: 3px;\n                                                    text-align: center;\n                                                    line-height: 29px;\n                                                    vertical-align: middle;\n                                                    margin-right: 10px;\n                                                }\n                                            }\n                                            span.lecture-title {\n                                                font-size : 15px;\n                                                color: ${colors.black2};\n\n                                                @media(max-width: 575px) {\n                                                    font-size : 14px;\n                                                }\n                                            }\n                                            span.lecture-duration {\n                                                float: right;\n                                                font-size: 14px;\n                                                color: ${colors.text3};\n                                                line-height: 28px;\n                                                font-weight: 400;\n                                            }\n                                        }\n                                    }\n                                }\n\n                                .course-content.show {\n                                    max-height: 100%;\n                                    margin-bottom: 40px;\n                                }\n\n                                &:last-child {\n                                    margin-bottom: 40px;\n                                }\n                            }\n                        }\n                    }\n\n                    .instructor-tab {\n                        h5 {\n                            color: ${colors.black2};\n                            font-weight: 600;\n                            padding-bottom: 10px;\n                            margin-bottom: 35px;\n                            position: relative;\n                            &:before {\n                                position: absolute;\n                                content: \"\";\n                                background: ${colors.green};\n                                width: 50px;\n                                height: 2px;\n                                bottom: 0;\n                                left: 0;\n                            }\n\n                            @media(max-width: 575px) {\n                                font-size : 17px;\n                            }\n                        }\n\n                        .instructor-item {\n                            margin-bottom: 30px;\n\n                            .instructor-img {\n                                img {\n                                    border-radius : 5px;\n                                }\n                            }\n\n                            .instructor-content {\n                                position: relative;\n\n                                .instructor-box {\n                                    box-shadow: 0 0px 20px rgba(0, 0, 0, 0.08);\n                                    padding   : 25px;\n                                    background: #ffffff;\n                                    border-radius : 5px;\n                                    position: absolute;\n                                    top     : 32px;\n                                    left    : -11%;\n                                    z-index : 1;\n\n                                    .top-content {\n                                        margin-bottom: 20px;\n\n                                        .instructor-name {\n                                            h6 {\n                                                color      : ${colors.black2};\n                                                font-weight: 600;\n                                                text-transform: uppercase;\n                                                margin-bottom: 12px;\n\n                                                @media(max-width: 575px) {\n                                                    font-size : 14px;\n                                                }\n                                            }\n                                            p {\n                                                font-size  : 14px;\n                                                color      : ${colors.text3};\n                                                font-weight: 500;\n                                            }\n                                        }\n                                        .instructor-social {\n                                            margin-top: 25px;\n                                            ul.social {\n                                                li {\n                                                    a {\n                                                        text-align: center;\n                                                        position  : relative;\n\n                                                        &:before {\n                                                            content           : \"\";\n                                                            position          : absolute;\n                                                            border-width      : 8px 14px;\n                                                            border-style      : solid;\n                                                            border-top-color  : transparent;\n                                                            border-right-color: transparent;\n                                                            border-left-color : transparent;\n                                                            top               : -16px;\n                                                            left              : 0;\n                                                            z-index           : 1;\n                                                            transition : all 0.2s ease;\n                                                        }\n\n                                                        &:after {\n                                                            content            : \"\";\n                                                            position           : absolute;\n                                                            border-width       : 8px 14px;\n                                                            border-style       : solid;\n                                                            border-right-color : transparent;\n                                                            border-bottom-color: transparent;\n                                                            border-left-color  : transparent;\n                                                            bottom             : -16px;\n                                                            left               : 0;\n                                                            z-index            : 1;\n                                                            transition : all 0.2s ease;\n                                                        }\n\n                                                        i {\n                                                            font-size: 13px;\n                                                            color    : #ffffff;\n                                                            width    : 28px;\n                                                        }\n\n                                                        &:hover {\n                                                            background-color: ${colors.green} !important;\n\n                                                            &:before {\n                                                                border-bottom-color: ${colors.green} !important;\n                                                            }\n\n                                                            &:after {\n                                                                border-top-color: ${colors.green} !important;\n                                                            }\n                                                        }\n                                                    }\n\n                                                    &:nth-child(1) {\n                                                        a {\n                                                            background-color: #4267B2;\n\n                                                            &:before {\n                                                                border-bottom-color: #4267B2;\n                                                            }\n\n                                                            &:after {\n                                                                border-top-color: #4267B2;\n                                                            }\n                                                        }\n                                                    }\n\n                                                    &:nth-child(2) {\n                                                        a {\n                                                            background-color: #1DA1F2;\n\n                                                            &:before {\n                                                                border-bottom-color: #1DA1F2;\n                                                            }\n\n                                                            &:after {\n                                                                border-top-color: #1DA1F2;\n                                                            }\n                                                        }\n                                                    }\n\n                                                    &:nth-child(3) {\n                                                        a {\n                                                            background-color: #2867B2;\n\n                                                            &:before {\n                                                                border-bottom-color: #2867B2;\n                                                            }\n\n                                                            &:after {\n                                                                border-top-color: #2867B2;\n                                                            }\n                                                        }\n                                                    }\n\n                                                    &:nth-child(4) {\n                                                        a {\n                                                            background-color: #DD1343;\n\n                                                            &:before {\n                                                                border-bottom-color: #DD1343;\n                                                            }\n\n                                                            &:after {\n                                                                border-top-color: #DD1343;\n                                                            }\n                                                        }\n                                                    }\n                                                }\n                                            }\n                                        }\n                                    }\n\n                                    .instructor-desk {\n                                        p {\n                                            font-size : 15px;\n                                            color      : ${colors.text2};\n                                            line-height: 25px;\n\n                                            @media(max-width: 575px) {\n                                                font-size : 14px;\n                                            }\n                                        }\n                                    }\n                                }\n                            }\n\n                            &:last-child {\n                                margin-bottom: 0;\n                            }\n                        }\n                    }\n\n                    .review-tab {\n                        .review-comments {\n                            margin-bottom: 40px;\n                            h5 {\n                                color: ${colors.black2};\n                                font-weight: 600;\n                                padding-bottom: 10px;\n                                margin-bottom: 35px;\n                                position: relative;\n                                &:before {\n                                    position: absolute;\n                                    content: \"\";\n                                    background: ${colors.green};\n                                    width: 50px;\n                                    height: 2px;\n                                    bottom: 0;\n                                    left: 0;\n                                }\n\n                                @media(max-width: 575px) {\n                                    font-size : 17px;\n                                }\n                            }\n                            .comment-box {\n                                border-bottom: 1px solid ${colors.border1};\n                                padding-bottom: 20px;\n                                margin-bottom: 25px;\n                                .comment-image {\n                                    img {\n                                        max-width : 100px;\n                                        border-radius : 5px;\n                                        margin-right : 20px;\n                                    }\n                                }\n                                .comment-content {\n                                    .content-title {\n                                        .comment-writer {\n                                            h6 {\n                                                color: ${colors.black2};\n                                                font-weight: 600;\n                                                margin-bottom : 10px;\n\n                                                @media(max-width: 575px) {\n                                                    font-size : 14px;\n                                                }\n                                            }\n                                            p {\n                                                font-size : 12px;\n                                                color: ${colors.text3};\n                                                margin-bottom: 5px;\n                                            }\n                                            ul {\n                                                margin-bottom: 8px;\n                                                li {\n                                                    margin-right: 1px;\n                                                    i {\n                                                        font-size: 16px;\n                                                        color: ${colors.yellow};\n                                                    }\n                                                    &:last-child {\n                                                        font-size: 13px;\n                                                        color: ${colors.text2};\n                                                        margin-left: 5px;\n                                                    }\n                                                }\n                                            }\n                                        }\n                                        .reply-btn {\n                                            button {\n                                                font-size : 14px;\n                                                color: ${colors.green};\n                                                background : transparent;\n                                                border : 1px solid ${colors.border3};\n                                                font-weight: 500;\n                                                border-radius: 25px;\n                                                padding: 4px 12px 3px;\n                                                margin-top : 10px;\n                                                i {\n                                                    font-size: 17px;\n                                                    vertical-align: text-top;\n                                                }\n                                                &:hover {\n                                                    color : #ffffff;\n                                                    background : ${colors.gr_bg};\n                                                    border-color : ${colors.green};\n                                                }\n                                            }\n                                        }\n                                    }\n                                    .comment-desc {\n                                        p {\n                                            font-size: 14px;\n                                            color: ${colors.text3};\n                                            line-height: 25px;\n                                        }\n                                    }\n                                }\n                                &:last-child {\n                                    border-bottom : none;\n                                    padding-bottom : 0;\n                                    margin-bottom : 0;\n                                }\n                            }\n                        }\n\n                        .review-form {\n                            h5 {\n                                color: ${colors.black2};\n                                font-weight: 600;\n                                padding-bottom: 10px;\n                                margin-bottom: 25px;\n                                position: relative;\n                                &:before {\n                                    position: absolute;\n                                    content: \"\";\n                                    background: ${colors.green};\n                                    width: 50px;\n                                    height: 2px;\n                                    bottom: 0;\n                                    left: 0;\n                                }\n\n                                @media(max-width: 575px) {\n                                    font-size : 17px;\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                margin-bottom: 40px;\n            }\n        }\n\n        .single-details-sidbar {\n            .course-details-feature {\n                box-shadow: 0 8px 25px rgba(0,0,0,0.1);\n                border-radius: 5px;\n                padding: 15px 20px 20px;\n                h5.title {\n                    color: ${colors.black1};\n                    font-weight: 600;\n                    padding-bottom: 10px;\n                    margin-bottom: 20px;\n                    position: relative;\n                    &:before {\n                        position: absolute;\n                        content: \"\";\n                        background: ${colors.green};\n                        width: 50px;\n                        height: 2px;\n                        bottom: 0;\n                        left: 0;\n                    }\n\n                    @media(max-width: 575px) {\n                        font-size : 17px;\n                    }\n                }\n\n                ul.feature-list {\n                    margin-bottom: 20px;\n                    li {\n                        border-top: 1px dashed ${colors.border3};\n                        padding: 12px 0;\n                        font-size : 14px;\n                        color : ${colors.black2};\n                        font-weight: 500;\n                        i {\n                            font-size : 20px;\n                            color: ${colors.green};\n                            vertical-align: top;\n                            margin-right : 2px;\n                        }\n                        span {\n                            float : right;\n                            font-size: 13px;\n                            color: ${colors.text3};\n                            font-weight: 400;\n                            line-height: 20px;\n                        }\n                        &:first-child {\n                            border-top : none;\n                            padding-top : 0;\n                        }\n                        &:last-child {\n                            padding-bottom : 0;\n                        }\n                    }\n                }\n\n                button.enroll-btn {\n                    font-size: 16px;\n                    color: #fff;\n                    background: ${colors.gr_bg};\n                    display: inline-block;\n                    width: 100%;\n                    height: 40px;\n                    font-weight : 500;\n                    border : none;\n                    padding: 9px;\n                    border-radius: 5px;\n                    &:hover {\n                        background: ${colors.gr_bg2};\n                    }\n\n                    @media(max-width: 575px) {\n                        font-size : 14px;\n                    }\n                }\n\n                @media(max-width: 1199px) {\n                    padding: 12px 15px 15px;\n                }\n            }\n        }\n\n        @media(max-width: 767px) {\n            padding: 20px 0 5px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\n// import CourseSidebar from './components/CourseSidebar';\nimport CourseItemGrid from './components/CourseItemsGrid';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/course.js';\n\nclass CourseGrid extends Component {\n\n    render() {\n        return (\n            <div className=\"main-wrapper course-page\">\n\n                {/* Header 2 */}\n                <HeaderTwo />\n\n                {/* Breadcroumb */}\n                <BreadcrumbBox title=\"Courses\" />\n\n                <Styles>\n                    {/* Course Grid */}\n                    <section className=\"course-grid-area\">\n                        <Container>\n                            <Row>\n                                {/* <Col lg=\"3\" md=\"4\" sm=\"5\">\n                                    <CourseSidebar />\n                                </Col> */}\n                                <Col lg=\"9\" md=\"8\" sm=\"7\">\n                                    <div className=\"course-items\">\n                                        <Row>\n                                            <CourseItemGrid />\n                                        </Row>\n                                    </div>\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n                </Styles>\n\n                {/* Footer 2 */}\n                <FooterTwo />\n\n            </div>\n        )\n    }\n}\n\nexport default CourseGrid","import React, { Component, Fragment } from 'react';\nimport Datas from '../../../data/course/item.json';\nimport { Link } from 'react-router-dom';\nimport { Col } from 'react-bootstrap';\n// import Pagination from './../../../components/Pagination';\n\nclass CourseItemList extends Component {\n    render() {\n        return (\n            <Fragment>\n                {/* Course Item */}\n                {\n                    Datas.map((data, i) => (\n                        <Col md=\"12\" key={i}>\n                            <div className=\"course-item d-flex\">\n                                <div className=\"course-image-box\">\n                                    <div className=\"course-image\" style={{ backgroundImage: `url(/assets/images/${data.imgUrl})` }}>\n                                        {/* <div className=\"author-img d-flex\">\n                                            <div className=\"img\">\n                                                <Link to={ data.courseLink}>\n                                                    <img src={ `/assets/images/${data.authorImg}`} alt=\"\" />\n                                                </Link>\n                                            </div>\n                                            <div className=\"title\">\n                                                <p>{data.authorName}</p>\n                                                <span>{data.authorCourses}</span>\n                                            </div>\n                                        </div>\n                                        <div className=\"course-price\">\n                                            <p>{data.price}</p>\n                                        </div> */}\n                                    </div>\n                                </div>\n                                <div className=\"course-content\">\n                                    <h6 className=\"heading\"><Link to={ data.courseLink}>{data.courseTitle}</Link></h6>\n                                    <div className=\"rating\">\n                                        <ul className=\"list-unstyled list-inline\">\n                                            <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                            <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                            <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                            <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                            <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i>\n                                            </li>\n                                            <li className=\"list-inline-item\">(4.5)</li>\n                                        </ul>\n                                    </div>\n                                    <p className=\"desc\">{data.courseDesc}</p>\n                                    {/* <Link className=\"details-btn\" to={ data.courseLink}>View Details</Link> */}\n                                </div>\n                            </div>\n                        </Col>\n                    ))\n                }\n                \n                {/* <Col md=\"12\"  className=\"text-center \">\n                    <Pagination />\n                </Col> */}\n\n            </Fragment>\n        )\n    }\n}\n\nexport default CourseItemList\n","import React, { Component } from 'react';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\n// import CourseSidebar from './components/CourseSidebar';\nimport CourseItemList from './components/CourseItemsList';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/course.js';\n\nclass CourseList extends Component {\n\n    render() {\n        return (\n            <div className=\"main-wrapper course-page\">\n\n                {/* Header 2 */}\n                <HeaderTwo />\n\n                {/* Breadcroumb */}\n                <BreadcrumbBox title=\"Courses\" />\n\n                <Styles>\n                    {/* Course Grid */}\n                    <section className=\"course-list-area\">\n                        <Container>\n                            <Row>\n                                {/* <Col lg=\"3\" md=\"4\" sm=\"5\">\n                                    <CourseSidebar />\n                                </Col> */}\n                                <Col lg=\"9\" md=\"8\" sm=\"7\">\n                                    <div className=\"course-items2\">\n                                        <Row>\n                                            <CourseItemList />\n                                        </Row>\n                                    </div>\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n                </Styles>\n\n                {/* Footer 2 */}\n                <FooterTwo />\n\n            </div>\n        )\n    }\n}\n\nexport default CourseList","import styled from \"styled-components\";\nimport { colors } from './../../../components/common/element/elements.js';\n\nexport const Styles = styled.div`\n    form.form.review-comment-form {\n        .star-rating {\n            display: inline-block;\n            margin-bottom: 15px;\n\n            input {\n                display: none;\n            }\n\n            label {\n                font-size: 30px;\n                color: ${colors.text4};\n                margin-right: 5px;\n                float: right;\n                transition: all 0.1s ease;\n                cursor: pointer;\n            }\n\n            input:checked ~ label,\n            input:not(:checked) ~ label:hover,\n            input:not(:checked) ~ label:hover ~ label{\n                color: ${colors.yellow};\n            }\n        }\n\n        p.form-control {\n            padding   : 0;\n            width     : auto;\n            height    : auto;\n            background: transparent;\n            border    : none;\n            margin-bottom : 30px;\n            position  : relative;\n\n            textarea {\n                width           : 100%;\n                height          : 150px;\n                background      : transparent;\n                border          : 1px solid ${colors.border3};\n                font-size       : 15px;\n                padding         : 15px 20px;\n                color           : ${colors.black2};\n                border-radius   : 5px;\n\n                &:focus {\n                    border-color: ${colors.green};\n                }\n\n                &::placeholder {\n                    font-size  : 15px;\n                    color      : ${colors.text2};\n                }\n            }\n\n            input {\n                width           : 100%;\n                height          : 50px;\n                background      : transparent;\n                border          : 1px solid ${colors.border3};\n                font-size       : 15px;\n                padding         : 15px 20px;\n                color           : ${colors.black2};\n                border-radius   : 5px;\n\n                &:focus {\n                    border-color: ${colors.green};\n                }\n\n                &::placeholder {\n                    font-size  : 15px;\n                    color      : ${colors.text2};\n                }\n            }\n\n            span {\n                color      : ${colors.red};\n                font-weight: 500;\n                position   : absolute;\n                bottom     : -22px;\n                left       : 0;\n                visibility : hidden;\n            }\n        }\n\n        p.form-control.success {\n            textarea,\n            input {\n                border: 2px solid ${colors.green};\n            }\n\n            &::before {\n                position   : absolute;\n                content    : \"\\f058\";\n                font-family: \"Line Awesome Free\";\n                font-size  : 24px;\n                color      : ${colors.green};\n                font-weight: 900;\n                top        : 8px;\n                right      : 10px;\n            }\n        }\n\n        p.form-control.error {\n            textarea,\n            input {\n                border: 2px solid ${colors.red};\n            }\n\n            &::before {\n                position   : absolute;\n                content    : \"\\f06a\";\n                font-family: \"Line Awesome Free\";\n                font-size  : 24px;\n                color      : ${colors.red};\n                font-weight: 900;\n                top        : 8px;\n                right      : 10px;\n            }\n        }\n\n        p.form-control.error {\n            span {\n                visibility: visible;\n            }\n        }\n\n        button {\n            font-size : 15px;\n            color     : #fff;\n            background: ${colors.gr_bg};\n            width     : 200px;\n            height    : 50px;\n            border    : none;\n            font-weight: 500;\n            border-radius : 5px;\n            margin-top: 5px;\n\n            &:hover {\n                background: ${colors.gr_bg2};\n            }\n        }\n    }\n`;","import React, { useEffect } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport { Styles } from '../styles/reviewForm.js';\n\nfunction ReviewForm() {\n    useEffect(() => {\n        const form = document.getElementById(\"form6\");\n        const desc = document.getElementById(\"desc6\");\n        const name = document.getElementById(\"name6\");\n        const email = document.getElementById(\"email6\");\n\n        form.addEventListener(\"submit\", formSubmit);\n\n        function formSubmit(e) {\n            e.preventDefault();\n\n            const descValue = desc.value.trim();\n            const nameValue = name.value.trim();\n            const emailValue = email.value.trim();\n\n            if (descValue === \"\") {\n                setError(desc, \"Comment can't be blank\");\n            } else {\n                setSuccess(desc);\n            }\n\n            if (nameValue === \"\") {\n                setError(name, \"Name can't be blank\");\n            } else {\n                setSuccess(name);\n            }\n\n            if (emailValue === \"\") {\n                setError(email, \"Email can't be blank\");\n            } else if (!isEmail(emailValue)) {\n                setError(email, \"Not a valid email\");\n            } else {\n                setSuccess(email);\n            }\n        }\n\n        function setError(input, message) {\n            const formControl = input.parentElement;\n            const errorMsg = formControl.querySelector(\".input-msg6\");\n            formControl.className = \"form-control error\";\n            errorMsg.innerText = message;\n        }\n\n        function setSuccess(input) {\n            const formControl = input.parentElement;\n            formControl.className = \"form-control success\";\n        }\n\n        function isEmail(email) {\n            return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/.test(email);\n        }\n    });\n\n    return (\n        <Styles>\n            <form id=\"form6\" className=\"form review-comment-form\">\n                <Row>\n                    <Col md=\"12\">\n                        <div className=\"star-rating\">\n                            <input type=\"radio\" name=\"rate\" id=\"rate-5\" />\n                            <label htmlFor=\"rate-5\" className=\"las la-star\"></label>\n                            <input type=\"radio\" name=\"rate\" id=\"rate-4\" />\n                            <label htmlFor=\"rate-4\" className=\"las la-star\"></label>\n                            <input type=\"radio\" name=\"rate\" id=\"rate-3\" />\n                            <label htmlFor=\"rate-3\" className=\"las la-star\"></label>\n                            <input type=\"radio\" name=\"rate\" id=\"rate-2\" />\n                            <label htmlFor=\"rate-2\" className=\"las la-star\"></label>\n                            <input type=\"radio\" name=\"rate\" id=\"rate-1\" />\n                            <label htmlFor=\"rate-1\" className=\"las la-star\"></label>\n                        </div>\n                    </Col>\n                    <Col md=\"12\">\n                        <p className=\"form-control\">\n                            <textarea name=\"comment\" id=\"desc6\" placeholder=\"Enter your review\"></textarea>\n                            <span className=\"input-msg6\"></span>\n                        </p>\n                    </Col>\n                    <Col md=\"6\">\n                        <p className=\"form-control\">\n                            <input type=\"name\" placeholder=\"Enter your name\" id=\"name6\" />\n                            <span className=\"input-msg6\"></span>\n                        </p>\n                    </Col>\n                    <Col md=\"6\">\n                        <p className=\"form-control\">\n                            <input type=\"email\" placeholder=\"Enter your email\" id=\"email6\" />\n                            <span className=\"input-msg6\"></span>\n                        </p>\n                    </Col>\n                    <Col md=\"12\">\n                        <button>Submit Review</button>\n                    </Col>\n                </Row>\n            </form>\n        </Styles>\n    )\n}\n\nexport default ReviewForm","import styled from \"styled-components\";\nimport { colors } from './../../../components/common/element/elements.js';\n\nexport const Styles = styled.div`\n    /* Popular Course */\n    .popular-course {\n        border : 1px solid ${colors.border1};\n        padding: 15px 20px 20px;\n        border-radius : 5px;\n        margin: 30px 0;\n        h5 {\n            color : ${colors.black1};\n            font-weight : 600;\n            padding-bottom: 10px;\n            margin-bottom: 20px;\n            position : relative;\n            &:before {\n                position : absolute;\n                content : \"\";\n                background : ${colors.green};\n                width : 50px;\n                height: 2px;\n                bottom : 0;\n                left : 0;\n            }\n\n            @media(max-width: 575px) {\n                font-size  : 17px;\n            }\n        }\n\n        .popular-items {\n            .item-box {\n                margin-bottom: 15px;\n                .item-img {\n                    a {\n                        img {\n                            max-width: 85px;\n                            border-radius: 5px;\n                            margin-right: 15px;\n\n                            @media(max-width: 1199px) {\n                                max-width: 60px;\n                                margin-right: 12px;\n                            }\n                        }\n                    }\n                }\n\n                .item-content {\n                    p.title {\n                        margin-bottom: 3px;\n                        a {\n                            font-size: 13px;\n                            color: ${colors.black2};\n                            font-weight: 500;\n                            &:hover {\n                                color : ${colors.green};\n                            }\n                        }\n                    }\n\n                    ul.rating {\n                        margin-bottom: 3px;\n                        li {\n                            margin-right : 0;\n                            i {\n                                font-size: 14px;\n                                color: ${colors.yellow};\n                            }\n                        }\n                    }\n\n                    p.price {\n                        font-size : 15px;\n                        color : ${colors.green};\n                        font-weight : 500;\n                    }\n                }\n\n                &:last-child {\n                    margin-bottom: 0;\n                }\n            }\n        }\n\n        @media(max-width: 1199px) {\n            padding: 12px 15px 15px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../../../data/course/popular.json';\nimport { Link } from 'react-router-dom';\nimport { Styles } from '../styles/popularCourse.js';\n\nclass PopularCourse extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Popular Course */}\n                <div className=\"popular-course\">\n                    <h5>Popular Course</h5>\n                    <div className=\"popular-items\">\n                        {\n                            Datas.map((data, i) => (\n\n                                <div className=\"item-box d-flex\" key={i}>\n                                    <div className=\"item-img\">\n                                        <Link to={ data.courseLink}><img src={ `/assets/images/${data.imgUrl}`} alt=\"\" /></Link>\n                                    </div>\n                                    <div className=\"item-content\">\n                                        <p className=\"title\"><Link to={ data.courseLink}>{data.courseTitle}</Link></p>\n                                        <ul className=\"list-unstyled list-inline rating\">\n                                            <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                            <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                            <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                            <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                            <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                        </ul>\n                                        <p className=\"price\">{data.price}</p>\n                                    </div>\n                                </div>\n\n                            ))\n                        }\n                    </div>\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default PopularCourse\n","import styled from \"styled-components\";\nimport { colors } from './../../../components/common/element/elements.js';\n\nexport const Styles = styled.div`\n    /* Course Tag */\n    .course-tag {\n        border : 1px solid ${colors.border1};\n        padding: 15px 20px 12px;\n        border-radius : 5px;\n        h5 {\n            color : ${colors.black1};\n            font-weight : 600;\n            padding-bottom: 10px;\n            margin-bottom: 20px;\n            position : relative;\n            &:before {\n                position : absolute;\n                content : \"\";\n                background : ${colors.green};\n                width : 50px;\n                height: 2px;\n                bottom : 0;\n                left : 0;\n            }\n\n            @media(max-width: 575px) {\n                font-size  : 17px;\n            }\n        }\n        .tag-box {\n            a {\n                font-size: 13px;\n                color : ${colors.text1};\n                border: 1px solid ${colors.border3};\n                padding: 6px 8px 5px;\n                margin: 0 8px 10px 0;\n                display: inline-block;\n                border-radius: 5px;\n                &:hover {\n                    color : #ffffff;\n                    background : ${colors.gr_bg};\n                    border-color : ${colors.green};\n                }\n            }\n        }\n\n        @media(max-width: 1199px) {\n            padding: 12px 15px 6px;\n        }\n\n        @media(max-width: 575px) {\n            margin-bottom : 30px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport { Link } from 'react-router-dom';\nimport { Styles } from '../styles/courseTag.js';\n\nclass CourseTag extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Course Tag */}\n                <div className=\"course-tag\">\n                    <h5>Course Tag</h5>\n                    <div className=\"tag-box\">\n                        <Link to={ \"/\"}>HTML</Link>\n                        <Link to={ \"/\"}>CSS</Link>\n                        <Link to={ \"/\"}>Photoshop</Link>\n                        <Link to={ \"/\"}>Jquery</Link>\n                        <Link to={ \"/\"}>PHP</Link>\n                        <Link to={ \"/\"}>Wordpress</Link>\n                        <Link to={ \"/\"}>Bootstrap</Link>\n                        <Link to={ \"/\"}>Javascript</Link>\n                    </div>\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default CourseTag\n","import React, { useEffect } from 'react';\nimport { Container, Row, Col, Tab, Nav } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport ReviewForm from './components/ReviewForm';\nimport PopularCourse from './components/PopularCourse';\nimport CourseTag from './components/CourseTag';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/course.js';\n\nfunction CourseDetails() {\n    useEffect(() => {\n        const courseButton = document.querySelectorAll(\".course-button\");\n        courseButton.forEach(button => {\n            button.addEventListener(\"click\", () => {\n                button.classList.toggle(\"active\");\n                const content = button.nextElementSibling;\n\n                if (button.classList.contains(\"active\")) {\n                    content.className = \"course-content show\";\n                    content.style.maxHeight = content.scrollHeight + \"px\";\n                } else {\n                    content.className = \"course-content\";\n                    content.style.maxHeight = \"0\";\n                }\n            });\n        });\n    });\n\n    return (\n        <div className=\"main-wrapper course-details-page\" >\n\n            {/* Header 2 */}\n            < HeaderTwo />\n\n            {/* Breadcroumb */}\n            < BreadcrumbBox title=\"Course Details\" />\n\n            <Styles>\n                {/* Course Details */}\n                <section className=\"course-details-area\">\n                    <Container>\n                        <Row>\n                            <Col lg=\"9\" md=\"8\" sm=\"12\">\n                                <div className=\"course-details-top\">\n                                    <div className=\"heading\">\n                                        <h4>Javascript Programming From Scretch For Beginers To Advanced With Top Rated Author (Andy Robert).</h4>\n                                    </div>\n                                    <div className=\"course-top-overview\">\n                                        <div className=\"d-flex overviews\">\n                                            <div className=\"author\">\n                                                <img src={ `/assets/images/author.jpg`} alt=\"\" />\n                                                <div className=\"author-name\">\n                                                    <h6>Author</h6>\n                                                    <p>Andy Robert</p>\n                                                </div>\n                                            </div>\n                                            <div className=\"category\">\n                                                <h6>Category</h6>\n                                                <p>Social Science</p>\n                                            </div>\n                                            <div className=\"rating\">\n                                                <h6>Rating</h6>\n                                                <ul className=\"list-unstyled list-inline\">\n                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                    <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i>\n                                                    </li>\n                                                    <li className=\"list-inline-item\">(4.5)</li>\n                                                </ul>\n                                            </div>\n                                            <div className=\"price\">\n                                                <h6>Price</h6>\n                                                <p>$29.00</p>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div className=\"course-details-banner\">\n                                        <img src={ `/assets/images/details-banner.jpg`} alt=\"\" className=\"img-fluid\" />\n                                    </div>\n                                    <div className=\"course-tab-list\">\n                                        <Tab.Container defaultActiveKey=\"overview\">\n                                            <Nav className=\"flex-column\">\n                                                <Nav.Item>\n                                                    <Nav.Link eventKey=\"overview\">Overview</Nav.Link>\n                                                </Nav.Item>\n                                                <Nav.Item>\n                                                    <Nav.Link eventKey=\"curriculum\">Curriculum</Nav.Link>\n                                                </Nav.Item>\n                                                <Nav.Item>\n                                                    <Nav.Link eventKey=\"instructor\">Instructors</Nav.Link>\n                                                </Nav.Item>\n                                                <Nav.Item>\n                                                    <Nav.Link eventKey=\"review\">Reviews</Nav.Link>\n                                                </Nav.Item>\n                                            </Nav>\n                                            <Tab.Content>\n                                                <Tab.Pane eventKey=\"overview\" className=\"overview-tab\">\n                                                    <div className=\"course-desc\">\n                                                        <h5>Course Description</h5>\n                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nesciunt harum facilis odit inventore molestias qui asperiores recusandae architecto mollitia provident ipsa unde, praesentium impedit enim voluptate ducimus, saepe autem. Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br /><br />Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda optio sequi suscipit et modi! Corporis obcaecati rerum et, explicabo inventore, aliquid, odit modi harum libero culpa distinctio. Nemo, aliquid dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio earum accusantium quam eius dignissimos quaerat voluptatem excepturi aliquid dolor ducimus. Illo porro maiores fuga dignissimos temporibus odio nulla nobis nemo. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>\n                                                    </div>\n                                                    <div className=\"course-feature\">\n                                                        <h5>Course Feature</h5>\n                                                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi, quidem facere quisquam aperiam neque dolorem saepe. Laboriosam, quam aliquam. Optio earum accusantium quam eius dignissimos quaerat voluptatem excepturi aliquid dolor ducimus. Illo porro maiores fuga dignissimos temporibus odio nulla nobis nemo.</p>\n                                                        <ul className=\"list-unstyled\">\n                                                            <li><i className=\"las la-arrow-right\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere excepturi aliquid dolor ducimus.</li>\n                                                            <li><i className=\"las la-arrow-right\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere excepturi aliquid .</li>\n                                                            <li><i className=\"las la-arrow-right\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere excepturi.</li>\n                                                        </ul>\n                                                    </div>\n                                                    <div className=\"course-learn\">\n                                                        <h5>Learning Outcome</h5>\n                                                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi, quidem facere quisquam aperiam neque dolorem saepe. Laboriosam, quam aliquam odit modi harum libero culpa distinctio.</p>\n                                                        <ul className=\"list-unstyled\">\n                                                            <li><i className=\"fa fa-check\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi.</li>\n                                                            <li><i className=\"fa fa-check\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi.</li>\n                                                            <li><i className=\"fa fa-check\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi.</li>\n                                                            <li><i className=\"fa fa-check\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi.</li>\n                                                        </ul>\n                                                    </div>\n                                                    <div className=\"course-share\">\n                                                        <h5>Share This Course</h5>\n                                                        <ul className=\"social list-unstyled list-inline\">\n                                                            <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-facebook-f\"></i></a></li>\n                                                            <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-twitter\"></i></a></li>\n                                                            <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-linkedin-in\"></i></a></li>\n                                                            <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-youtube\"></i></a></li>\n                                                            <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-dribbble\"></i></a></li>\n                                                        </ul>\n                                                    </div>\n                                                </Tab.Pane>\n                                                <Tab.Pane eventKey=\"curriculum\" className=\"curriculum-tab\">\n                                                    <div className=\"course-curriculum\">\n                                                        <h5>Course Curriculum</h5>\n                                                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi, quidem facere quisquam aperiam neque dolorem saepe. Laboriosam, quam aliquam. Optio earum accusantium quam eius dignissimos quaerat voluptatem excepturi aliquid dolor ducimus. Illo porro maiores fuga dignissimos temporibus odio nulla nobis nemo.</p>\n                                                    </div>\n                                                    <div className=\"course-element\">\n                                                        <h5>Course Content</h5>\n                                                        <div className=\"course-item\">\n                                                            <button className=\"course-button active\">Part 1: Introduction of Javsscript <span>04 Lectures - 30 Min</span></button>\n                                                            <div className=\"course-content show\">\n                                                                <ul className=\"list-unstyled\">\n                                                                    <li>\n                                                                        <span className=\"play-icon\"><i className=\"las la-play\"></i> Lecture: 01</span>\n                                                                        <span className=\"lecture-title\">Javascript functional components</span>\n                                                                        <span className=\"lecture-duration\">02:36</span>\n                                                                    </li>\n                                                                    <li>\n                                                                        <span className=\"play-icon\"><i className=\"las la-play\"></i> Lecture: 02</span>\n                                                                        <span className=\"lecture-title\">Javascript api integration</span>\n                                                                        <span className=\"lecture-duration\">04:20</span>\n                                                                    </li>\n                                                                    <li>\n                                                                        <span className=\"play-icon\"><i className=\"las la-play\"></i> Lecture: 03</span>\n                                                                        <span className=\"lecture-title\">Javscript project Setup</span>\n                                                                        <span className=\"lecture-duration\">03:39</span>\n                                                                    </li>\n                                                                    <li>\n                                                                        <span className=\"play-icon\"><i className=\"las la-play\"></i> Lecture: 04</span>\n                                                                        <span className=\"lecture-title\">React app setup project</span>\n                                                                        <span className=\"lecture-duration\">01:56</span>\n                                                                    </li>\n                                                                </ul>\n                                                            </div>\n                                                        </div>\n                                                        <div className=\"course-item\">\n                                                            <button className=\"course-button active\">Part 2: Javascript Project Setup <span>03 Lectures - 43 Min</span></button>\n                                                            <div className=\"course-content show\">\n                                                                <ul className=\"list-unstyled\">\n                                                                    <li>\n                                                                        <span className=\"play-icon\"><i className=\"las la-play\"></i> Lecture: 01</span>\n                                                                        <span className=\"lecture-title\">Javascript functional components</span>\n                                                                        <span className=\"lecture-duration\">11:36</span>\n                                                                    </li>\n                                                                    <li>\n                                                                        <span className=\"play-icon\"><i className=\"las la-play\"></i> Lecture: 02</span>\n                                                                        <span className=\"lecture-title\">Javascript api integration</span>\n                                                                        <span className=\"lecture-duration\">19:20</span>\n                                                                    </li>\n                                                                    <li>\n                                                                        <span className=\"play-icon\"><i className=\"las la-play\"></i> Lecture: 03</span>\n                                                                        <span className=\"lecture-title\">Javscript project Setup</span>\n                                                                        <span className=\"lecture-duration\">10:39</span>\n                                                                    </li>\n                                                                </ul>\n                                                            </div>\n                                                        </div>\n                                                        <div className=\"course-item\">\n                                                            <button className=\"course-button active\">Part 3: React Application Setup Project <span>04 Lectures - 59 Min</span></button>\n                                                            <div className=\"course-content show\">\n                                                                <ul className=\"list-unstyled\">\n                                                                    <li>\n                                                                        <span className=\"play-icon\"><i className=\"las la-play\"></i> Lecture: 01</span>\n                                                                        <span className=\"lecture-title\">Javascript functional components</span>\n                                                                        <span className=\"lecture-duration\">24:36</span>\n                                                                    </li>\n                                                                    <li>\n                                                                        <span className=\"play-icon\"><i className=\"las la-play\"></i> Lecture: 02</span>\n                                                                        <span className=\"lecture-title\">Javascript api integration</span>\n                                                                        <span className=\"lecture-duration\">21:20</span>\n                                                                    </li>\n                                                                    <li>\n                                                                        <span className=\"play-icon\"><i className=\"las la-play\"></i> Lecture: 03</span>\n                                                                        <span className=\"lecture-title\">Javscript project Setup</span>\n                                                                        <span className=\"lecture-duration\">15:39</span>\n                                                                    </li>\n                                                                </ul>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </Tab.Pane>\n                                                <Tab.Pane eventKey=\"instructor\" className=\"instructor-tab\">\n                                                    <h5>Course Instructors</h5>\n                                                    <div className=\"instructor-item\">\n                                                        <Row>\n                                                            <Col md=\"4\">\n                                                                <div className=\"instructor-img\">\n                                                                    <img src={ `/assets/images/instructor-1.jpg`} alt=\"\" className=\"img-fluid\" />\n                                                                </div>\n                                                            </Col>\n                                                            <Col md=\"8\">\n                                                                <div className=\"instructor-content\">\n                                                                    <div className=\"instructor-box\">\n                                                                        <div className=\"top-content d-flex justify-content-between\">\n                                                                            <div className=\"instructor-name\">\n                                                                                <h6>Mark Shadow</h6>\n                                                                                <p>Senior Lecturer</p>\n                                                                            </div>\n                                                                            <div className=\"instructor-social\">\n                                                                                <ul className=\"social list-unstyled list-inline\">\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-facebook-f\"></i></a></li>\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-twitter\"></i></a></li>\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-linkedin-in\"></i></a></li>\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-youtube\"></i></a></li>\n                                                                                </ul>\n                                                                            </div>\n                                                                        </div>\n                                                                        <div className=\"instructor-desk\">\n                                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae perferendis delectus voluptate reiciendis animi nisi nemo tenetur sequi cum laudantium sit totam libero quasi ducimus accusantium numquam eaque.</p>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </Col>\n                                                        </Row>\n                                                    </div>\n                                                    <div className=\"instructor-item\">\n                                                        <Row>\n                                                            <Col md=\"4\">\n                                                                <div className=\"instructor-img\">\n                                                                    <img src={ `/assets/images/instructor-2.jpg`} alt=\"\" className=\"img-fluid\" />\n                                                                </div>\n                                                            </Col>\n                                                            <Col md=\"8\">\n                                                                <div className=\"instructor-content\">\n                                                                    <div className=\"instructor-box\">\n                                                                        <div className=\"top-content d-flex justify-content-between\">\n                                                                            <div className=\"instructor-name\">\n                                                                                <h6>Katrin Kay</h6>\n                                                                                <p>Senior Lecturer</p>\n                                                                            </div>\n                                                                            <div className=\"instructor-social\">\n                                                                                <ul className=\"social list-unstyled list-inline\">\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-facebook-f\"></i></a></li>\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-twitter\"></i></a></li>\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-linkedin-in\"></i></a></li>\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-youtube\"></i></a></li>\n                                                                                </ul>\n                                                                            </div>\n                                                                        </div>\n                                                                        <div className=\"instructor-desk\">\n                                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae perferendis delectus voluptate reiciendis animi nisi nemo tenetur sequi cum laudantium sit totam libero quasi ducimus accusantium numquam eaque.</p>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </Col>\n                                                        </Row>\n                                                    </div>\n                                                    <div className=\"instructor-item\">\n                                                        <Row>\n                                                            <Col md=\"4\">\n                                                                <div className=\"instructor-img\">\n                                                                    <img src={ `/assets/images/instructor-3.jpg`} alt=\"\" className=\"img-fluid\" />\n                                                                </div>\n                                                            </Col>\n                                                            <Col md=\"8\">\n                                                                <div className=\"instructor-content\">\n                                                                    <div className=\"instructor-box\">\n                                                                        <div className=\"top-content d-flex justify-content-between\">\n                                                                            <div className=\"instructor-name\">\n                                                                                <h6>David Show</h6>\n                                                                                <p>Senior Lecturer</p>\n                                                                            </div>\n                                                                            <div className=\"instructor-social\">\n                                                                                <ul className=\"social list-unstyled list-inline\">\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-facebook-f\"></i></a></li>\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-twitter\"></i></a></li>\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-linkedin-in\"></i></a></li>\n                                                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-youtube\"></i></a></li>\n                                                                                </ul>\n                                                                            </div>\n                                                                        </div>\n                                                                        <div className=\"instructor-desk\">\n                                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae perferendis delectus voluptate reiciendis animi nisi nemo tenetur sequi cum laudantium sit totam libero quasi ducimus accusantium numquam eaque.</p>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </Col>\n                                                        </Row>\n                                                    </div>\n                                                </Tab.Pane>\n                                                <Tab.Pane eventKey=\"review\" className=\"review-tab\">\n                                                    <Row>\n                                                        <Col md=\"12\">\n                                                            <div className=\"review-comments\">\n                                                                <h5>Course Reviews</h5>\n                                                                <div className=\"comment-box d-flex\">\n                                                                    <div className=\"comment-image\">\n                                                                        <img src={ `/assets/images/testimonial-2.jpg`} alt=\"\" />\n                                                                    </div>\n                                                                    <div className=\"comment-content\">\n                                                                        <div className=\"content-title d-flex justify-content-between\">\n                                                                            <div className=\"comment-writer\">\n                                                                                <h6>Mark Shadow</h6>\n                                                                                <p>Mar 26, 2020 | 06:30pm</p>\n                                                                                <ul className=\"list-unstyled list-inline\">\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i></li>\n                                                                                    <li className=\"list-inline-item\">(4.5)</li>\n                                                                                </ul>\n                                                                            </div>\n                                                                            <div className=\"reply-btn\">\n                                                                                <button type=\"button\"><i className=\"las la-reply-all\"></i> Reply</button>\n                                                                            </div>\n                                                                        </div>\n                                                                        <div className=\"comment-desc\">\n                                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum quas placeat perspiciatis est, nisi expedita consectetur sit minus illum laudantium nostrum dolore odit asperiores quisquam ad enim iusto laborum quas placeat perspiciatis saepe.</p>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                                <div className=\"comment-box d-flex\">\n                                                                    <div className=\"comment-image\">\n                                                                        <img src={ `/assets/images/testimonial-1.jpg`} alt=\"\" />\n                                                                    </div>\n                                                                    <div className=\"comment-content\">\n                                                                        <div className=\"content-title d-flex justify-content-between\">\n                                                                            <div className=\"comment-writer\">\n                                                                                <h6>Katrin Kay</h6>\n                                                                                <p>Mar 26, 2020 | 06:30pm</p>\n                                                                                <ul className=\"list-unstyled list-inline\">\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i></li>\n                                                                                    <li className=\"list-inline-item\">(4.5)</li>\n                                                                                </ul>\n                                                                            </div>\n                                                                            <div className=\"reply-btn\">\n                                                                                <button type=\"button\"><i className=\"las la-reply-all\"></i> Reply</button>\n                                                                            </div>\n                                                                        </div>\n                                                                        <div className=\"comment-desc\">\n                                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum quas placeat perspiciatis est, nisi expedita consectetur sit minus illum laudantium nostrum dolore odit asperiores quisquam ad enim iusto laborum quas placeat perspiciatis saepe.</p>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                                <div className=\"comment-box d-flex\">\n                                                                    <div className=\"comment-image\">\n                                                                        <img src={ `/assets/images/testimonial-2.jpg`} alt=\"\" />\n                                                                    </div>\n                                                                    <div className=\"comment-content\">\n                                                                        <div className=\"content-title d-flex justify-content-between\">\n                                                                            <div className=\"comment-writer\">\n                                                                                <h6>David Show</h6>\n                                                                                <p>Mar 26, 2020 | 06:30pm</p>\n                                                                                <ul className=\"list-unstyled list-inline\">\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                                    <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i></li>\n                                                                                    <li className=\"list-inline-item\">(4.5)</li>\n                                                                                </ul>\n                                                                            </div>\n                                                                            <div className=\"reply-btn\">\n                                                                                <button type=\"button\"><i className=\"las la-reply-all\"></i> Reply</button>\n                                                                            </div>\n                                                                        </div>\n                                                                        <div className=\"comment-desc\">\n                                                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum quas placeat perspiciatis est, nisi expedita consectetur sit minus illum laudantium nostrum dolore odit asperiores quisquam ad enim iusto laborum quas placeat perspiciatis saepe.</p>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                            <div className=\"review-form\">\n                                                                <h5>Submit Review</h5>\n                                                                <ReviewForm />\n                                                            </div>\n                                                        </Col>\n                                                    </Row>\n                                                </Tab.Pane>\n                                            </Tab.Content>\n                                        </Tab.Container>\n                                    </div>\n                                </div>\n                            </Col>\n                            <Col lg=\"3\" md=\"4\" sm=\"12\">\n                                <div className=\"single-details-sidbar\">\n                                    <Row>\n                                        <Col md=\"12\">\n                                            <div className=\"course-details-feature\">\n                                                <h5 className=\"title\">Course Details</h5>\n                                                <ul className=\"list-unstyled feature-list\">\n                                                    <li><i className=\"las la-calendar\"></i> Start Date: <span>Aug 21, 2020</span></li>\n                                                    <li><i className=\"las la-clock\"></i> Duration: <span>1 Year</span></li>\n                                                    <li><i className=\"las la-globe\"></i> Language: <span>English</span></li>\n                                                    <li><i className=\"las la-sort-amount-up\"></i> Skill Level: <span>Beginner</span></li>\n                                                    <li><i className=\"las la-graduation-cap\"></i> Subject: <span>Web</span></li>\n                                                    <li><i className=\"las la-book\"></i> Lectures: <span>51</span></li>\n                                                    <li><i className=\"las la-bookmark\"></i> Enrolled: <span>236</span></li>\n                                                    <li><i className=\"las la-certificate\"></i> Certification: <span>Yes</span></li>\n                                                </ul>\n                                                <button type=\"button\" className=\"enroll-btn\">Enroll Course</button>\n                                            </div>\n                                        </Col>\n                                        <Col md=\"12\">\n                                            <PopularCourse />\n                                        </Col>\n                                        <Col md=\"12\">\n                                            <CourseTag />\n                                        </Col>\n                                    </Row>\n                                </div>\n\n                            </Col>\n                        </Row>\n                    </Container>\n                </section>\n            </Styles>\n\n            {/* Footer 2 */}\n            <FooterTwo />\n\n        </div >\n    )\n}\n\nexport default CourseDetails","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .instructor-page {\n        .instructor-area {\n            padding: 70px 0;\n            .instructor-item {\n                position     : relative;\n                margin-bottom: 62px;\n\n                a {\n                    img {\n                        border-radius : 5px;\n                    }\n                }\n\n                .img-content {\n                    background: #ffffff;\n                    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);\n                    position  : absolute;\n                    bottom    : -30px;\n                    left      : 10%;\n                    width     : 80%;\n                    z-index   : 1;\n                    border-radius : 5px;\n                    padding: 15px 0;\n\n                    h5 {\n                        margin-bottom: 5px;\n                        a {\n                            color        : ${colors.black2};\n                            font-weight  : 600;\n                            &:hover {\n                                color : ${colors.green};\n                            }\n                        }\n                    }\n\n                    p {\n                        font-size    : 14px;\n                        color        : ${colors.text3};\n                        font-weight  : 500;\n                        margin-bottom: 5px;\n                    }\n\n                    ul {\n                        li {\n                            a {\n                                i {\n                                    font-size: 14px;\n                                    color    : #ffffff;\n                                    width    : 33px;\n                                    height   : 33px;\n                                    border-radius : 50%;\n                                    padding-top: 10px;\n                                    transition : all 0.2s ease;\n\n                                    &:hover {\n                                        background-color: ${colors.green} !important;\n                                    }\n                                }\n\n                                i.fa-facebook-f {\n                                    background-color: #4267B2;\n                                }\n\n                                i.fa-twitter {\n                                    background-color: #1DA1F2;\n                                }\n\n                                i.fa-youtube {\n                                    background-color: #DD1343;\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding : 40px 0 30px;\n            }\n        }\n    }\n\n    .instructor-details-page {\n        .instructor-details-area {\n            padding : 70px 0 63px;\n            .instructor-img {\n                margin-bottom : 55px;\n                img {\n                    border-radius : 5px;\n                    margin-bottom : 20px;\n                }\n                ul.getintouch {\n                    margin-bottom: 30px;\n                    li {\n                        font-size: 20px;\n                        color: ${colors.black2};\n                        font-weight : 500;\n                        margin-bottom: 5px;\n                        i {\n                            font-size: 26px;\n                            color: ${colors.green};\n                            vertical-align: text-bottom;\n                            margin-right: 5px;\n\n                            @media(max-width: 991px) {\n                                font-size: 20px;\n                            }\n                        }\n\n                        @media(max-width: 991px) {\n                            font-size: 16px;\n                        }\n                    }\n                }\n\n                ul.social {\n                    li {\n                        margin-right: 10px;\n                        a {\n                            text-align: center;\n                            position  : relative;\n                            height    : 18px;\n                            display   : inline-block;\n\n                            &:before {\n                                content           : \"\";\n                                position          : absolute;\n                                border-width      : 9px 17px;\n                                border-style      : solid;\n                                border-top-color  : transparent;\n                                border-right-color: transparent;\n                                border-left-color : transparent;\n                                top               : -18px;\n                                left              : 0;\n                                z-index           : 1;\n                                transition : all 0.2s ease;\n                            }\n\n                            &:after {\n                                content            : \"\";\n                                position           : absolute;\n                                border-width       : 9px 17px;\n                                border-style       : solid;\n                                border-right-color : transparent;\n                                border-bottom-color: transparent;\n                                border-left-color  : transparent;\n                                bottom             : -18px;\n                                left               : 0;\n                                z-index            : 1;\n                                transition : all 0.2s ease;\n                            }\n\n                            i {\n                                font-size: 14px;\n                                color    : #ffffff;\n                                width    : 34px;\n                            }\n\n                            &:hover {\n                                background-color: ${colors.green} !important;\n\n                                &:before {\n                                    border-bottom-color: ${colors.green} !important;\n                                }\n\n                                &:after {\n                                    border-top-color: ${colors.green} !important;\n                                }\n                            }\n                        }\n\n                        &:nth-child(1) {\n                            a {\n                                background-color: #4267B2;\n\n                                &:before {\n                                    border-bottom-color: #4267B2;\n                                }\n\n                                &:after {\n                                    border-top-color: #4267B2;\n                                }\n                            }\n                        }\n\n                        &:nth-child(2) {\n                            a {\n                                background-color: #1DA1F2;\n\n                                &:before {\n                                    border-bottom-color: #1DA1F2;\n                                }\n\n                                &:after {\n                                    border-top-color: #1DA1F2;\n                                }\n                            }\n                        }\n\n                        &:nth-child(3) {\n                            a {\n                                background-color: #2867B2;\n\n                                &:before {\n                                    border-bottom-color: #2867B2;\n                                }\n\n                                &:after {\n                                    border-top-color: #2867B2;\n                                }\n                            }\n                        }\n\n                        &:nth-child(4) {\n                            a {\n                                background-color: #DD1343;\n\n                                &:before {\n                                    border-bottom-color: #DD1343;\n                                }\n\n                                &:after {\n                                    border-top-color: #DD1343;\n                                }\n                            }\n                        }\n\n                        &:nth-child(5) {\n                            a {\n                                background-color: #ea4c89;\n\n                                &:before {\n                                    border-bottom-color: #ea4c89;\n                                }\n\n                                &:after {\n                                    border-top-color: #ea4c89;\n                                }\n                            }\n                        }\n\n                        &:last-child {\n                            margin-right : 0;\n                        }\n                    }\n                }\n\n                @media(max-width: 575px) {\n                    margin-bottom: 30px;\n                }\n            }\n\n            .instructor-content {\n                h4 {\n                    color : ${colors.black1};\n                    font-weight: 600;\n                    margin-bottom: 10px;\n\n                    @media(max-width: 575px) {\n                        font-size : 20px;\n                    }\n                }\n                span {\n                    font-size : 16px;\n                    color : ${colors.green};\n                    font-weight: 500;\n                    display : inline-block;\n                    margin-bottom: 15px;\n\n                    @media(max-width: 575px) {\n                        font-size : 15px;\n                    }\n                }\n                p {\n                    font-size: 15px;\n                    color: ${colors.text2};\n                    line-height: 25px;\n                    margin-bottom: 40px;\n\n                    @media(max-width: 575px) {\n                        font-size : 14px;\n                    }\n                }\n            }\n            .qual-expe {\n                h5 {\n                    color: ${colors.black2};\n                    font-weight: 600;\n                    padding-bottom: 10px;\n                    margin-bottom: 20px;\n                    position: relative;\n                    &:before {\n                        position: absolute;\n                        content: \"\";\n                        background: ${colors.green};\n                        width: 50px;\n                        height: 2px;\n                        bottom: 0;\n                        left: 0;\n                    }\n\n\n                }\n                .qual-expe-box {\n                    margin-bottom: 20px;\n                    h6 {\n                        color: ${colors.black2};\n                        margin-bottom: 8px;\n                        font-weight: 600;\n\n                        @media(max-width: 575px) {\n                            font-size : 15px;\n                        }\n                    }\n                    p {\n                        font-size : 15px; \n                        color: ${colors.text3};\n\n                        @media(max-width: 575px) {\n                            font-size : 14px;\n                        }\n                    }\n                }\n                .qualification {\n                    margin-right : 100px;\n\n                    @media(max-width: 575px) {\n                        margin-right : 20px;\n                    }\n                }\n\n                @media(max-width: 360px) {\n                    display: block !important;\n                }\n            }\n\n            .instructor-course-title {\n                h5 {\n                    color: ${colors.black2};\n                    font-weight: 600;\n                    padding-bottom: 10px;\n                    margin-bottom: 35px;\n                    position: relative;\n                    &:before {\n                        position: absolute;\n                        content: \"\";\n                        background: ${colors.green};\n                        width: 50px;\n                        height: 2px;\n                        bottom: 0;\n                        left: 0;\n                    }\n                }\n            }\n            .instructor-course-slider {\n                position: relative;\n                .course-item {\n                    border: 1px solid ${colors.border1};\n                    border-radius : 5px;\n                    transition : all 0.2s ease;\n                    margin-bottom: 30px;\n\n                    .course-image {\n                        width              : 100%;\n                        height             : 220px;\n                        background-size    : cover;\n                        background-position: center;\n                        background-repeat  : no-repeat;\n                        border-radius : 5px 5px 0 0;\n                        position: relative;\n\n                        .author-img {\n                            position: absolute;\n                            left    : 20px;\n                            bottom  : 20px;\n\n                            img {\n                                max-width: 40px;\n                                border-radius : 50%;\n                                margin-right: 5px;\n                            }\n\n                            .title {\n                                background: #ffffff;\n                                padding   : 3px 8px;\n                                border-radius : 5px;\n\n                                p {\n                                    font-size    : 12px;\n                                    color        : ${colors.black1};\n                                    font-weight  : 500;\n                                    margin-bottom: -4px;\n                                }\n\n                                span {\n                                    font-size  : 11px;\n                                    color      : ${colors.text3};\n                                    font-weight: 500;\n                                }\n                            }\n\n                        }\n\n                        .course-price {\n                            p {\n                                font-size  : 16px;\n                                color      : #ffffff;\n                                background : ${colors.bg1};\n                                position   : absolute;\n                                right      : 20px;\n                                bottom     : 20px;\n                                padding    : 8px 10px;\n                                font-weight: 500;\n                                border-radius : 5px;\n                            }\n                        }\n                    }\n\n                    .course-content {\n                        background: #fff;\n                        padding   : 20px 25px;\n                        border-radius : 0 0 5px 5px;\n\n                        h6.heading {\n                            a {\n                                color        : ${colors.black1};\n                                font-weight  : 600;\n                                display      : inline-block;\n                                margin-bottom: 12px;\n\n                                &:hover {\n                                    color: ${colors.green};\n                                }\n                            }\n                        }\n\n                        p.desc {\n                            font-size     : 14px;\n                            color         : ${colors.text3};\n                            line-height   : 25px;\n                            border-bottom : 1px solid ${colors.border1};\n                            padding-bottom: 10px;\n                            margin-bottom : 12px;\n                        }\n\n                        .course-face {\n\n                            .duration,\n                            .student {\n                                p {\n                                    font-size: 13px;\n                                    color    : ${colors.text3};\n\n                                    i {\n                                        font-size     : 16px;\n                                        color         : ${colors.green};\n                                        vertical-align: text-bottom;\n                                        margin-right  : 3px;\n                                    }\n                                }\n                            }\n\n                            .rating {\n                                ul {\n                                    li {\n                                        margin-right: 0;\n\n                                        i {\n                                            font-size: 14px;\n                                            color    : ${colors.yellow};\n                                        }\n\n                                        &:last-child {\n                                            font-size: 13px;\n                                            color    : ${colors.text3};\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    &:hover {\n                        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.07);\n                    }\n                }\n\n                .slider-dot {\n                    margin-top: 17px !important;\n\n                    .swiper-pagination-bullet {\n                        width     : 22px;\n                        height    : 9px;\n                        background: ${colors.text4};\n                        display   : inline-block;\n                        margin    : 3px;\n                        opacity   : 1 !important;\n                        border-radius : 5px;\n                    }\n\n                    .swiper-pagination-bullet.swiper-pagination-bullet-active {\n                        background: ${colors.green};\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding: 40px 0 30px;\n            }\n        }\n    }\n`;","import React, { Component } from \"react\";\n// import Datas from \"../../data/instructor/instructor.json\";\n// import { Link } from \"react-router-dom\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport HeaderTwo from \"../../components/HeaderTwo\";\nimport { BreadcrumbBox } from \"../../components/common/Breadcrumb\";\nimport Pagination from \"./../../components/Pagination\";\nimport FooterTwo from \"../../components/FooterTwo\";\nimport { Styles } from \"./styles/instructor.js\";\n\nclass Instructor extends Component {\n  render() {\n    return (\n      <Styles>\n        {/* Main Wrapper */}\n        <div className=\"main-wrapper instructor-page\">\n          {/* Header 2 */}\n          <HeaderTwo />\n\n          {/* Breadcroumb */}\n          <BreadcrumbBox title=\"Instructors\" />\n\n          {/* Instructor Area */}\n          <section className=\"instructor-area\">\n            <Container>\n              <Row>\n                {/* {\n                                    Datas.map((data, i) => (\n                                        <Col lg=\"3\" md=\"4\" sm=\"6\" key={i}>\n                                            <div className=\"instructor-item\">\n                                                <Link to={ \"/instructor-details\"}><img src={ `/assets/images/${data.personImage}`} alt=\"\" className=\"img-fluid\" /></Link>\n                                                <div className=\"img-content text-center\">\n                                                    <h5><Link to={ \"/instructor-details\"}>{data.personName}</Link></h5>\n                                                    <p>{data.personTitle}</p>\n                                                    <ul className=\"list-unstyled list-inline\">\n                                                        <li className=\"list-inline-item\"><a href={ data.socialLinks.facebook}><i className=\"fab fa-facebook-f\"></i></a></li>\n                                                        <li className=\"list-inline-item\"><a href={ data.socialLinks.twitter}><i className=\"fab fa-twitter\"></i></a></li>\n                                                        <li className=\"list-inline-item\"><a href={ data.socialLinks.youtube}><i className=\"fab fa-youtube\"></i></a></li>\n                                                    </ul>\n                                                </div>\n                                            </div>\n                                        </Col>\n                                    ))\n                                } */}\n\n                <div style={{ fontWeight: \"bold\" }}>\n                  The College is having all faculties/Assistant Professors in\n                  the available respective method subjects as per NCTE and BSAEU\n                  norms.\n                </div>\n\n                <Col md=\"12\" className=\"text-center\">\n                  <Pagination />\n                </Col>\n              </Row>\n            </Container>\n          </section>\n\n          {/* Footer 2 */}\n          <FooterTwo />\n        </div>\n      </Styles>\n    );\n  }\n}\n\nexport default Instructor;\n","import React, { Component } from 'react';\nimport Datas from '../../data/instructor/details.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport Swiper from 'react-id-swiper';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/instructor.js';\n\nclass InstructorDetails extends Component {\n    render() {\n        const settings = {\n            slidesPerView: 3,\n            loop: true,\n            speed: 1000,\n            autoplay: false,\n            spaceBetween: 30,\n            watchSlidesVisibility: true,\n            pagination: {\n                el: '.slider-dot.text-center',\n                clickable: true\n            },\n            breakpoints: {\n                0: {\n                    slidesPerView: 1\n                },\n                576: {\n                    slidesPerView: 1\n                },\n                768: {\n                    slidesPerView: 2\n                },\n                992: {\n                    slidesPerView: 3\n                }\n            }\n        };\n\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper instructor-details-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"Instructor Details\" />\n\n                    {/* Instructor Details Area */}\n                    <section className=\"instructor-details-area\">\n                        <Container>\n                            <Row>\n                                <Col md=\"4\">\n                                    <div className=\"instructor-img\">\n                                        <img src={ `/assets/images/team-7.jpg`} alt=\"\" className=\"img-fluid\" />\n                                        <ul className=\"list-unstyled getintouch\">\n                                            <li><i className=\"las la-phone\"></i> +1 (396) 486 4709</li>\n                                            <li><i className=\"lar la-envelope\"></i> mail@contactme.com</li>\n                                            <li><i className=\"lab la-skype\"></i> contact.me</li>\n                                        </ul>\n                                        <ul className=\"social list-unstyled list-inline\">\n                                            <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-facebook-f\"></i></a></li>\n                                            <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-twitter\"></i></a></li>\n                                            <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-linkedin-in\"></i></a></li>\n                                            <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-youtube\"></i></a></li>\n                                            <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-dribbble\"></i></a></li>\n                                        </ul>\n                                    </div>\n                                </Col>\n                                <Col md=\"8\">\n                                    <div className=\"instructor-content\">\n                                        <h4>Kamal Sulaiman</h4>\n                                        <span>Senior Teacher</span>\n                                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur accusantium laudantium! Vitae libero voluptatum velit earum corrupti officia quo, magnam mollitia nam provident tempora. Ipsum quaerat tempora odit maxime. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, molestiae. Quae illum non sit. In sapiente, reiciendis sunt aperiam repellendus quibusdam repudiandae, dolores tempore esse vero aliquid illum neque voluptatem.<br /><br />Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, aliquid illo? Quia dolore obcaecati incidunt perferendis minus error repudiandae iure perspiciatis maxime assumenda? Sit dicta, odit sunt maiores incidunt culpa. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda voluptate quisquam quis officiis.</p>\n                                    </div>\n                                    <div className=\"qual-expe d-flex\">\n                                        <div className=\"qualification\">\n                                            <h5>Qualifications</h5>\n                                            <div className=\"qual-expe-box\">\n                                                <h6>University of California</h6>\n                                                <p>Bachelor of Computer Science & Engeniering</p>\n                                            </div>\n                                            <div className=\"qual-expe-box\">\n                                                <h6>University of California</h6>\n                                                <p>Masters of Computer Science & Engeniering</p>\n                                            </div>\n                                        </div>\n                                        <div className=\"experiance\">\n                                            <h5>Experiance</h5>\n                                            <div className=\"qual-expe-box\">\n                                                <h6>SnazzyTheme.com</h6>\n                                                <p>2016 - 2019</p>\n                                            </div>\n                                            <div className=\"qual-expe-box\">\n                                                <h6>Envato Market</h6>\n                                                <p>2019 - Present</p>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </Col>\n                                <Col md=\"12\">\n                                    <div className=\"instructor-course-title\">\n                                        <h5>Courses by Kamal Sulaiman</h5>\n                                    </div>\n                                    <div className=\"instructor-course-slider\">\n                                        <Swiper {...settings}>\n                                            {\n                                                Datas.map((data, i) => (\n                                                    <div className=\"course-item\" key={i}>\n                                                        <Link to={ data.courseLink}>\n                                                            <div className=\"course-image\" style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${data.imgUrl})` }}>\n                                                                <div className=\"author-img d-flex\">\n                                                                    <div className=\"img\">\n                                                                        <img src={ `/assets/images/${data.authorImg}`} alt=\"\" />\n                                                                    </div>\n                                                                    <div className=\"title\">\n                                                                        <p>{data.authorName}</p>\n                                                                        <span>{data.authorCourses}</span>\n                                                                    </div>\n                                                                </div>\n                                                                <div className=\"course-price\">\n                                                                    <p>{data.price}</p>\n                                                                </div>\n                                                            </div>\n                                                        </Link>\n                                                        <div className=\"course-content\">\n                                                            <h6 className=\"heading\"><Link to={ data.courseLink}>{data.courseTitle}</Link></h6>\n                                                            <p className=\"desc\">{data.courseDesc}</p>\n                                                            <div className=\"course-face d-flex justify-content-between\">\n                                                                <div className=\"duration\">\n                                                                    <p><i className=\"las la-clock\"></i>120</p>\n                                                                </div>\n                                                                <div className=\"rating\">\n                                                                    <ul className=\"list-unstyled list-inline\">\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i>\n                                                                        </li>\n                                                                        <li className=\"list-inline-item\">(4.5)</li>\n                                                                    </ul>\n                                                                </div>\n                                                                <div className=\"student\">\n                                                                    <p><i className=\"las la-chair\"></i>60</p>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                ))\n                                            }\n                                        </Swiper>\n                                    </div>\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default InstructorDetails","import styled from \"styled-components\";\n\nexport const Styles = styled.div`\n    .gallery-page {\n        .gallery-page-area {\n            padding : 70px 0;\n            .gallery-box {\n                border-radius : 5px;\n                overflow: hidden;\n                margin-bottom: 30px;\n                position: relative;\n                img {\n                    transition : all 0.3s ease;\n                    &:hover {\n                        transform: scale(1.1);\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding: 30px 0;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../../data/gallery/gallery-page.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport ModalImage from \"react-modal-image\";\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport Pagination from './../../components/Pagination';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/gallery.js';\n\nclass Gallery extends Component {\n    render() {\n\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper gallery-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"Gallery\" />\n\n                    {/* Gallery Area */}\n                    <section className=\"gallery-page-area\">\n                        <Container>\n                            <Row>\n                                {\n                                    Datas.map((data, i) => (\n                                        <Col lg=\"4\" sm=\"6\" key={i}>\n                                            <div className=\"gallery-box\">\n                                                <ModalImage small={ `/assets/images/gallery/${data.galleryImage}`} large={ `/assets/images/gallery/${data.galleryImage}`} alt=\"\" />\n                                            </div>\n                                        </Col>\n                                    ))\n                                }\n\n                                <Col md=\"12\" className=\"text-center\">\n                                    <Pagination />\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default Gallery","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .event-page {\n        .event-page-area {\n            padding : 70px 0;\n            .event-box {\n                margin-bottom : 30px;\n                .event-img {\n                    a {\n                        img {\n                            border-radius : 5px;\n                        }\n                    }\n\n                    @media(max-width: 991px) {\n                        display : none;\n                    }\n                }\n                .event-content {\n                    position: relative;\n                    .content-box {\n                        box-shadow: 0 0px 20px rgba(0, 0, 0, 0.08);\n                        padding   : 20px;\n                        background: #ffffff;\n                        border-radius : 5px;\n                        position: absolute;\n                        top     : 22px;\n                        left    : -9%;\n                        z-index : 1;\n                        .event-title{\n                            h6 {\n                                margin-bottom: 10px;\n                                a {\n                                    color      : ${colors.black1};\n                                    font-weight: 600;\n\n                                    &:hover {\n                                        color: ${colors.green};\n                                    }\n                                }\n                            }\n                        }\n\n                        .event-time-location {\n                            margin-bottom : 10px;\n                            ul {\n                                li {\n                                    font-size : 13px;\n                                    color: ${colors.text3};\n                                    i {\n                                        font-size : 18px;\n                                        color: ${colors.green};\n                                        vertical-align: top;\n                                    }\n                                    &:first-child {\n                                        margin-right : 20px;\n                                    }\n                                }\n                            }\n                        }\n\n                        .event-desc {\n                            p {\n                                font-size : 13px;\n                                color: ${colors.text2};\n                                line-height : 20px;\n                            }\n\n                            @media(max-width: 767px) {\n                                margin-bottom: 10px;\n                            }\n                        }\n\n                        .event-date {\n                            position: relative;\n                            margin-bottom : 20px;\n                            padding-top: 6px;\n                            &:before {\n                                position : absolute;\n                                content : '';\n                                background : ${colors.border1};\n                                width : 1px;\n                                height : 100px;\n                                top : 0;\n                                left : -30px;\n\n                                @media(max-width: 767px) {\n                                    content : none;\n                                }\n                            }\n                            p {\n                                font-size : 20px;\n                                color: ${colors.green};\n                                font-weight: 500;\n                                text-transform : uppercase;\n\n                                @media(max-width: 767px) {\n                                    float: left;\n                                    font-size: 18px;\n                                    margin-right: 20px;\n                                }\n                            }\n\n                            @media(max-width: 767px) {\n                                margin-bottom: 0;\n                                padding-top: 0;\n                            }\n                        }\n\n                        .join-btn {\n                            a {\n                                font-size : 12px;\n                                color: ${colors.black2};\n                                border: 1px solid ${colors.border3};\n                                font-weight : 500;\n                                text-transform : uppercase;\n                                padding: 9px 12px 7px;\n                                border-radius: 5px;\n                                &:hover {\n                                    color: #ffffff;\n                                    background: ${colors.gr_bg};\n                                    border-color : ${colors.green};\n                                }\n\n                                @media(max-width: 767px) {\n                                    float: left;\n                                    padding: 5px 10px 3px;\n                                }\n                            }\n                        }\n\n                        @media(max-width: 991px) {\n                            position: unset;\n                        }\n                    }\n                }\n            }\n\n            ul.pagination-box {\n                margin-top: 50px;\n            }\n\n            .course-sidebar {\n                @media(max-width: 991px) {\n                    display : none;\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding : 40px 0 35px;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../../data/event/events.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport Pagination from '../../components/Pagination';\n// import CourseSidebar from '../courses/components/CourseSidebar';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/event.js';\n\nclass Events extends Component {\n    render() {\n\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper event-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"Events\" />\n\n                    {/* Events Area */}\n                    <section className=\"event-page-area\">\n                        <Container>\n                            <Row>\n                                <Col lg=\"9\" md=\"12\">\n                                    {\n                                        Datas.map((data, i) => (\n                                            <div className=\"event-box\" key={i}>\n                                                <Row>\n                                                    <Col xl=\"3\" lg=\"4\" md=\"0\">\n                                                        <div className=\"event-img\">\n                                                            <Link to={ data.eventLink}><img src={ `/assets/images/${data.eventImg}`}\n                                                                alt=\"\" className=\"img-fluid\"\n                                                                // style={{\n                                                                //     height:\"210px\"\n                                                                // }}\n                                                            \n                                                            /></Link>\n                                                        </div>\n                                                    </Col>\n                                                    <Col xl=\"9\" lg=\"8\" md=\"12\">\n                                                        <div className=\"event-content\">\n                                                            <div className=\"content-box\" >\n                                                                <Row>\n                                                                    <Col md=\"9\">\n                                                                        <div className=\"event-title\">\n                                                                            <h6>\n                                                                                {/* <Link to={ data.eventLink}> */}\n                                                                                {data.eventTitle}\n                                                                            {/* </Link> */}\n                                                                        </h6>\n                                                                        </div>\n                                                                        <div className=\"event-time-location\">\n                                                                            <ul className=\"list-unstyled list-inline\">\n                                                                                <li className=\"list-inline-item\"><i className=\"las la-clock\"></i> {data.eventTime}</li>\n                                                                                <li className=\"list-inline-item\"><i className=\"las la-map-marker\"></i> {data.eventLocation}</li>\n                                                                            </ul>\n                                                                        </div>\n                                                                        <div className=\"event-desc\">\n                                                                            <p>{data.eventdesc}</p>\n                                                                        </div>\n                                                                    </Col>\n                                                                    <Col md=\"3\" className=\"text-center\">\n                                                                        <div className=\"event-date\">\n                                                                            <p>{data.eventDate}</p>\n                                                                        </div>\n                                                                        {/* <div className=\"join-btn\">\n                                                                            <Link to={ data.eventLink}>Join Now</Link>\n                                                                        </div> */}\n                                                                    </Col>\n                                                                </Row>\n                                                            </div>\n                                                        </div>\n                                                    </Col>\n                                                </Row>\n                                            </div>\n                                        ))\n                                    }\n\n                                    <Col md=\"12\" className=\"text-center\">\n                                        <Pagination />\n                                    </Col>\n                                </Col>\n\n                                {/* <Col lg=\"3\" md=\"0\">\n                                    <CourseSidebar />\n                                </Col> */}\n\n                            </Row>\n                        </Container>\n                    </section>\n\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default Events","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .event-details-page {\n        .event-details-area {\n            padding : 70px 0;\n            .event-details-content {\n                .heading {\n                    h4 {\n                        color : ${colors.black1};\n                        font-weight: 600;\n                        line-height: 35px;\n                        margin-bottom: 10px;\n\n                        @media(max-width: 767px) {\n                            font-size : 20px;\n                        }\n                    }\n                }\n                .event-icon {\n                    margin-bottom: 20px;\n                    ul {\n                        li {\n                            font-size : 14px;\n                            color : ${colors.black2};\n                            margin-right: 20px;\n                            i {\n                                font-size : 20px;\n                                color : ${colors.green};\n                                vertical-align: top;\n                            }\n                            &:last-child {\n                                margin-right : 0;\n                            }\n\n                            @media(max-width: 991px) {\n                                margin-right: 5px;\n                            }\n                        }\n                    }\n                }\n                .event-details-banner {\n                    img {\n                        border-radius: 5px;\n                        margin-bottom: 30px;\n                    }\n                }\n\n                .event-details-overview {\n                    margin-bottom: 35px;\n                    h5 {\n                        color: ${colors.black2};\n                        font-weight: 600;\n                        padding-bottom: 10px;\n                        margin-bottom: 20px;\n                        position: relative;\n                        &:before {\n                            position: absolute;\n                            content: \"\";\n                            background: ${colors.green};\n                            width: 50px;\n                            height: 2px;\n                            bottom: 0;\n                            left: 0;\n                        }\n\n                        @media(max-width: 767px) {\n                            font-size : 17px;\n                        }\n                    }\n                    p {\n                        font-size: 15px;\n                        color: ${colors.text2};\n                        line-height: 25px;\n                        span {\n                            background : ${colors.border1};\n                            color: ${colors.black2};\n                            display : block;\n                            margin: 35px 0;\n                            padding: 22px 28px;\n                            border-radius: 5px;\n                            position: relative;\n                            i {\n                                position: absolute;\n                                top: -20px;\n                                left: 50%;\n                                margin-left: -20px;\n                                font-size : 30px;\n                                color : #ffffff;\n                                background : ${colors.gr_bg};\n                                width: 42px;\n                                height: 42px;\n                                text-align: center;\n                                border-radius: 50%;\n                                padding-top: 7px;\n                            }\n                        }\n                    }\n                    ul {\n                        margin-top : 30px;\n                        li {\n                            font-size: 14px;\n                            color: ${colors.text3};\n                            line-height: 25px;\n                            margin-bottom: 15px;\n                            i {\n                                float: left;\n                                color: ${colors.green};\n                                border: 1px solid ${colors.border3};\n                                width: 35px;\n                                height: 35px;\n                                border-radius: 50%;\n                                text-align: center;\n                                padding-top: 9px;\n                                margin-top: 8px;\n                                margin-right: 15px;\n                            }\n                            &:last-child {\n                                margin-bottom: 0;\n                            }\n                        }\n                    }\n                }\n\n                .event-details-speaker {\n                    margin-bottom: 28px;\n                    h5 {\n                        color: ${colors.black2};\n                        font-weight: 600;\n                        padding-bottom: 10px;\n                        margin-bottom: 35px;\n                        position: relative;\n                        &:before {\n                            position: absolute;\n                            content: \"\";\n                            background: ${colors.green};\n                            width: 50px;\n                            height: 2px;\n                            bottom: 0;\n                            left: 0;\n                        }\n\n                        @media(max-width: 767px) {\n                            font-size : 17px;\n                        }\n                    }\n                    .event-speaker-item {\n                        position     : relative;\n                        margin-bottom: 55px;\n\n                        img {\n                            border-radius : 5px;\n                        }\n\n                        .img-content {\n                            background: #ffffff;\n                            box-shadow: 0 10px 18px rgba(0, 0, 0, 0.07);\n                            position  : absolute;\n                            bottom    : -30px;\n                            left      : 10%;\n                            width     : 80%;\n                            z-index   : 1;\n                            border-radius : 5px;\n                            padding: 14px 0;\n\n                            h6 {\n                                color        : ${colors.black1};\n                                font-weight  : 600;\n                                margin-bottom: 15px;\n                            }\n\n                            ul {\n                                li {\n                                    a {\n                                        i {\n                                            font-size: 13px;\n                                            color    : #ffffff;\n                                            width    : 30px;\n                                            height   : 30px;\n                                            border-radius : 50%;\n                                            padding-top: 9px;\n                                            transition : all 0.2s ease;\n\n                                            &:hover {\n                                                background-color: ${colors.green} !important;\n                                            }\n                                        }\n\n                                        i.fa-facebook-f {\n                                            background-color: #4267B2;\n                                        }\n\n                                        i.fa-twitter {\n                                            background-color: #1DA1F2;\n                                        }\n\n                                        i.fa-youtube {\n                                            background-color: #DD1343;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n\n                .pre-nxt-event {\n                    border : 1px solid ${colors.border1};\n                    border-left: 0;\n                    border-right: 0;\n                    padding: 20px 0;\n                    .next-prev-item {\n                        img {\n                            max-width : 110px;\n                            border-radius : 5px;\n\n                            @media(max-width: 991px) {\n                                max-width: 55px;\n                            }\n                        }\n                        p {\n                            margin-bottom: 8px;\n                            a {\n                                font-size : 14px;\n                                color : ${colors.black2};\n                                font-weight : 500;\n                                &:hover {\n                                    color : ${colors.green};\n                                    text-decoration : underline;\n                                }\n\n                                @media(max-width: 991px) {\n                                    font-size : 13px;\n                                }\n                            }\n                        }\n                        span {\n                            color : ${colors.text3};\n                        }\n\n                        .prev-img {\n                            img {\n                                margin-right : 15px;\n\n                                @media(max-width: 991px) {\n                                    margin-right: 6px;\n                                }\n                            }\n                        }\n\n                        .next-img {\n                            img {\n                                margin-left : 15px;\n\n                                @media(max-width: 991px) {\n                                    margin-left: 6px;\n                                }\n                            }\n                        }\n                    }\n\n                    @media(max-width: 767px) {\n                        margin-bottom: 40px;\n                    }\n                }\n            }\n\n            .event-details-sidebar {\n                .event-sidebar-info {\n                    box-shadow: 0 8px 25px rgba(0,0,0,0.1);\n                    border-radius: 5px;\n                    padding: 20px 20px 20px;\n                    .event-sidebar-timer {\n                        margin-bottom: 25px;\n                        p {\n                            display: inline-block;\n                            background: ${colors.gr_bg};\n                            margin-right: 5px;\n                            width: 68px;\n                            height: 65px;\n                            font-size: 20px;\n                            color : #ffffff;\n                            font-weight : 500;\n                            border-radius: 5px;\n                            padding-top: 6px;\n                            span {\n                                display : block;\n                                font-size: 13px;\n                                font-weight: normal;\n                                text-transform: uppercase;\n                            }\n                            &:last-child {\n                                margin-right: 0;\n                            }\n\n                            @media(max-width: 1199px) {\n                                margin-right: 3px;\n                                width: 58px;\n                                height: 60px;\n                                font-size: 18px;\n                            }\n                        }\n                    }\n\n                    ul.event-info-list {\n                        margin-bottom: 20px;\n                        li {\n                            border-top: 1px dashed ${colors.border3};\n                            padding: 12px 0;\n                            font-size : 14px;\n                            color : ${colors.black2};\n                            font-weight: 500;\n                            span {\n                                float : right;\n                                font-size: 13px;\n                                color: ${colors.text3};\n                                font-weight: 400;\n                                line-height: 20px;\n\n                                @media(max-width: 1199px) {\n                                    font-size: 12px;\n                                }\n                            }\n                            &:first-child {\n                                border-top : none;\n                                padding-top : 0;\n                            }\n                            &:last-child {\n                                padding-bottom : 0;\n                            }\n                        }\n                    }\n\n                    button.buy-btn {\n                        font-size: 16px;\n                        color: #fff;\n                        background: ${colors.gr_bg};\n                        display: inline-block;\n                        width: 100%;\n                        height: 40px;\n                        font-weight : 500;\n                        border : none;\n                        padding: 9px;\n                        border-radius: 5px;\n                        &:hover {\n                            background: ${colors.gr_bg2};\n                        }\n                    }\n\n                    @media(max-width: 1199px) {\n                        padding: 15px;\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding: 20px 0 30px;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../../data/event/details.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport Timer from 'react-compound-timer';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport PopularCourse from './../courses/components/PopularCourse';\nimport CourseTag from './../courses/components/CourseTag';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/eventDetails.js';\n\nclass EventDetails extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper event-details-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"Event Details\" />\n\n                    {/* Event Details Area */}\n                    <section className=\"event-details-area\">\n                        <Container>\n                            <Row>\n                                <Col lg=\"9\" md=\"8\" sm=\"12\">\n                                    <div className=\"event-details-content\">\n                                        <div className=\"heading\">\n                                            <h4>International students coming in Uk from Asian subcontinant for better education.</h4>\n                                        </div>\n                                        <div className=\"event-icon\">\n                                            <ul className=\"list-unstyled list-inline\">\n                                                <li className=\"list-inline-item\"><i className=\"las la-calendar\"></i> 19 February, 2021</li>\n                                                <li className=\"list-inline-item\"><i className=\"las la-clock\"></i> 10:30am</li>\n                                                <li className=\"list-inline-item\"><i className=\"las la-map-marker\"></i> 795 South Park Avenue, CA</li>\n                                                <li className=\"list-inline-item\"><i className=\"las la-copy\"></i> Social Science</li>\n                                            </ul>\n                                        </div>\n                                        <div className=\"event-details-banner\">\n                                            <img src={ `/assets/images/event-banner.jpg`} alt=\"\" className=\"img-fluid\" />\n                                        </div>\n                                        <div className=\"event-details-overview\">\n                                            <h5>Event Overview</h5>\n                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nesciunt harum facilis odit inventore molestias qui asperiores recusandae architecto mollitia provident ipsa unde, praesentium impedit enim voluptate ducimus, saepe autem. Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br /><br />Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda optio sequi suscipit et modi! Corporis obcaecati rerum et, explicabo inventore, aliquid, odit modi harum libero culpa distinctio. Nemo, aliquid dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio earum accusantium quam eius dignissimos quaerat voluptatem excepturi aliquid dolor ducimus. Illo porro maiores fuga dignissimos temporibus odio nulla nobis nemo. Lorem ipsum dolor sit amet consectetur adipisicing elit. <span><i className=\"las la-quote-right\"></i>Nemo, aliquid dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio earum accusantium quam eius dignissimos quaerat voluptatem excepturi aliquid dolor ducimus. Optio earum accusantium quam eius dignissimos quaerat voluptatem excepturi aliquid dolor ducimus.</span>Assumenda optio sequi suscipit et modi! Corporis obcaecati rerum et, explicabo inventore, aliquid, odit modi harum libero culpa distinctio. Nemo, aliquid dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>\n                                            <ul className=\"list-unstyled\">\n                                                <li><i className=\"fa fa-check\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi.</li>\n                                                <li><i className=\"fa fa-check\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi.</li>\n                                                <li><i className=\"fa fa-check\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi.</li>\n                                            </ul>\n                                        </div>\n                                        <div className=\"event-details-speaker\">\n                                            <h5>Event Speakers</h5>\n                                            <Row>\n                                                {\n                                                    Datas.map((data, i) => (\n                                                        <Col lg=\"3\" md=\"6\" sm=\"6\" key={i}>\n                                                            <div className=\"event-speaker-item\">\n                                                                <img src={ `/assets/images/${data.personImage}`} alt=\"\" className=\"img-fluid\" />\n                                                                <div className=\"img-content text-center\">\n                                                                    <h6>{data.personName}</h6>\n                                                                    <ul className=\"list-unstyled list-inline\">\n                                                                        <li className=\"list-inline-item\"><a href={ data.socialLinks.facebook}><i className=\"fab fa-facebook-f\"></i></a></li>\n                                                                        <li className=\"list-inline-item\"><a href={ data.socialLinks.twitter}><i className=\"fab fa-twitter\"></i></a></li>\n                                                                        <li className=\"list-inline-item\"><a href={ data.socialLinks.youtube}><i className=\"fab fa-youtube\"></i></a></li>\n                                                                    </ul>\n                                                                </div>\n                                                            </div>\n                                                        </Col>\n                                                    ))\n                                                }\n                                            </Row>\n                                        </div>\n\n                                        <div className=\"pre-nxt-event\">\n                                            <Row>\n                                                <Col md=\"6\">\n                                                    <div className=\"next-prev-item prev-event d-flex\">\n                                                        <div className=\"prev-img\">\n                                                            <img src={ `/assets/images/gallery-03.jpg`} alt=\"\" />\n                                                        </div>\n                                                        <div className=\"prev-text\">\n                                                            <p><Link to={ \"/event-details\"}>Lorem, ipsum dolor sit amet consectetur adipisicing elit Perferendis.</Link></p>\n                                                            <span> March 27, 2020</span>\n                                                        </div>\n                                                    </div>\n                                                </Col>\n                                                <Col md=\"6\">\n                                                    <div className=\"next-prev-item next-event d-flex flex-row-reverse text-right\">\n                                                        <div className=\"next-img\">\n                                                            <img src={ `/assets/images/gallery-06.jpg`} alt=\"\" />\n                                                        </div>\n                                                        <div className=\"next-text\">\n                                                            <p><Link to={ \"/event-details\"}>Lorem, ipsum dolor sit amet consectetur adipisicing elit Perferendis.</Link></p>\n                                                            <span> March 27, 2020</span>\n                                                        </div>\n                                                    </div>\n                                                </Col>\n                                            </Row>\n                                        </div>\n                                    </div>\n                                </Col>\n\n                                <Col lg=\"3\" md=\"4\" sm=\"12\">\n                                    <div className=\"event-details-sidebar\">\n                                        <Row>\n                                            <Col md=\"12\">\n                                                <div className=\"event-sidebar-info\">\n                                                    <div className=\"event-sidebar-timer text-center\">\n                                                        <Timer initialTime={1040 * 970 * 980} direction=\"backward\">\n                                                            <p><Timer.Days /><span>Days</span></p>\n                                                            <p><Timer.Hours /><span>Hours</span></p>\n                                                            <p><Timer.Minutes /><span>Minutes</span></p>\n                                                        </Timer>\n                                                    </div>\n                                                    <ul className=\"list-unstyled event-info-list\">\n                                                        <li>Start Date: <span>Aug 21, 2020</span></li>\n                                                        <li>Time: <span>08:30am</span></li>\n                                                        <li>Seat: <span>220</span></li>\n                                                        <li>Place: <span>Ontario,CA</span></li>\n                                                        <li>Organizer: <span>David Young</span></li>\n                                                        <li>Phone: <span>+1 (396) 486 4709</span></li>\n                                                        <li>Email: <span>email@me.com</span></li>\n                                                        <li>Website: <span>www.mydomain.com</span></li>\n                                                    </ul>\n                                                    <button type=\"button\" className=\"buy-btn\">Buy Ticket</button>\n                                                </div>\n                                            </Col>\n                                            <Col md=\"12\">\n                                                <PopularCourse />\n                                            </Col>\n                                            <Col md=\"12\">\n                                                <CourseTag />\n                                            </Col>\n                                        </Row>\n                                    </div>\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default EventDetails","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .login-page {\n        .login-area {\n            padding : 70px 0;\n            .login-box {\n                max-width : 500px;\n                margin: auto;\n                border: 1px solid ${colors.border1};\n                box-shadow: 0 0px 20px rgba(0,0,0,0.08);\n                padding: 25px 30px 35px;\n                border-radius: 5px;\n                .login-title {\n                    h3 {\n                        color : ${colors.black2};\n                        text-transform: uppercase;\n                        font-weight: 600;\n                        padding-bottom: 10px;\n                        margin-bottom: 20px;\n                        position: relative;\n                        &:before {\n                            position: absolute;\n                            content: \"\";\n                            background: ${colors.green};\n                            width: 50px;\n                            height: 2px;\n                            bottom: 0;\n                            left: 50%;\n                            margin-left: -25px;\n                        }\n\n                        @media(max-width: 575px) {\n                            font-size : 20px;\n                        }\n                    }\n                }\n\n                form.form {\n                    p.form-control {\n                        padding      : 0;\n                        width        : auto;\n                        height       : auto;\n                        background   : transparent;\n                        border       : none;\n                        margin-bottom: 28px;\n                        position     : relative;\n\n                        label {\n                            font-size : 15px;\n                            color : ${colors.text1};\n                            font-weight : 500;\n\n                            @media(max-width: 575px) {\n                                font-size : 14px;\n                            }\n                        }\n\n                        input {\n                            width           : 100%;\n                            height          : 48px;\n                            background-color: #ffffff;\n                            font-size       : 14px;\n                            padding         : 15px 20px;\n                            color           : ${colors.black1};\n                            border          : 1px solid ${colors.border3};\n                            border-radius : 5px;\n\n                            &::placeholder {\n                                font-size : 14px;\n                                font-style: italic;\n                                color     : ${colors.text3};\n\n                                @media(max-width: 575px) {\n                                    font-size : 13px;\n                                }\n                            }\n\n                            &:focus {\n                                border-color : ${colors.green};\n                            }\n\n                            @media(max-width: 575px) {\n                                height : 40px;\n                            }\n                        }\n\n                        span {\n                            color      : ${colors.red};\n                            font-weight: 300;\n                            position   : absolute;\n                            bottom     : -20px;\n                            left       : 0;\n                            visibility : hidden;\n                        }\n                    }\n\n                    p.form-control.success {\n                        input {\n                            border: 2px solid ${colors.green};\n                        }\n\n                        &::before {\n                            position   : absolute;\n                            content    : \"\\f058\";\n                            font-family: \"Line Awesome Free\";\n                            font-size  : 24px;\n                            color      : ${colors.green};\n                            font-weight: 900;\n                            top        : 34px;\n                            right      : 10px;\n                        }\n                    }\n\n                    p.form-control.error {\n                        input {\n                            border: 2px solid ${colors.red};\n                        }\n\n                        &::before {\n                            position   : absolute;\n                            content    : \"\\f06a\";\n                            font-family: \"Line Awesome Free\";\n                            font-size  : 24px;\n                            color      : ${colors.red};\n                            font-weight: 900;\n                            top        : 34px;\n                            right      : 10px;\n                        }\n                    }\n\n                    p.form-control.error {\n                        span {\n                            visibility: visible;\n                        }\n                    }\n\n                    button {\n                        font-size  : 16px;\n                        color      : #fff;\n                        background : ${colors.gr_bg};\n                        width      : 100%;\n                        height     : 48px;\n                        font-weight: 500;\n                        border     : none;\n                        border-radius : 5px;\n                        text-transform: uppercase;\n                        margin-bottom : 20px;\n\n                        &:hover {\n                            background: ${colors.gr_bg2};\n\n                            i {\n                                color: #ffffff;\n                            }\n                        }\n\n                        @media(max-width: 575px) {\n                            font-size : 15px;\n                            height     : 40px;\n                        }\n                    }\n\n                    .save-forget-password {\n                        margin-bottom: 15px;\n                        .save-passowrd {\n                            label {\n                                font-size: 14px;\n                                color: ${colors.text3};\n                                display: block;\n                                font-weight : 500;\n                                margin-bottom : 0;\n                                cursor: pointer;\n\n                                input[type=checkbox] {\n                                    border : 2px solid ${colors.border3};\n                                    appearance: none;\n                                    width: 18px;\n                                    height: 18px;\n                                    cursor: pointer;\n                                    margin-right: 6px;\n                                    position: relative;\n                                    top: 4px;\n\n                                    &:focus {\n                                        outline: none;\n                                    }\n\n                                    &:checked {\n                                        background-color: ${colors.green};\n                                        background: ${colors.green} url(\"data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==\") 2px 2px no-repeat;\n                                        border-color : ${colors.green};\n                                    }\n                                }\n                            }\n                        }\n                        .forget-password {\n                            margin-top: 3px;\n                            a {\n                                font-size : 14px;\n                                color : ${colors.green};\n                                font-weight : 500;\n                                &:hover {\n                                    text-decoration : underline;\n                                }\n                            }\n                        }\n                    }\n\n                    .not_account-btn {\n                        border-bottom: 1px solid ${colors.border1};\n                        margin-bottom: 20px;\n                        padding-bottom: 20px;\n                        p {\n                            font-size : 14px;\n                            color     : ${colors.text3};\n                            a {\n                                font-size : 14px;\n                                color : ${colors.green};\n                                font-weight : 500;\n                                &:hover {\n                                    text-decoration : underline;\n                                }\n                            }\n                        }\n                    }\n\n                    .social-login {\n                        p {\n                            font-size : 14px;\n                            color     : ${colors.text3};\n                            margin-bottom : 15px;\n                        }\n                        ul {\n                            li {\n                                a {\n                                    font-size: 14px;\n                                    color: #ffffff;\n                                    display: inline-block;\n                                    width: 110px;\n                                    height: 40px;\n                                    border-radius: 30px;\n                                    padding-top: 10px;\n                                    i {\n                                        margin-right : 3px;\n                                    }\n                                    &:hover {\n                                        background: ${colors.green} !important;\n                                    }import { colors } from './../../../components/common/element/elements';\n\n                                }\n                                &:nth-child(1) {\n                                    a {\n                                        background: #DB4437;\n                                    }\n                                }\n                                &:nth-child(2) {\n                                    a {\n                                        background: #4267B2;\n                                    }\n                                }\n                                &:nth-child(3) {\n                                    a {\n                                        background: #1DA1F2;\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding: 30px 0;\n            }\n        }\n    }\n\n    .registration-page {\n        .registration-area {\n            padding : 70px 0;\n            .registration-box {\n                max-width : 500px;\n                margin: auto;\n                border: 1px solid ${colors.border1};\n                box-shadow: 0 0px 20px rgba(0,0,0,0.08);\n                padding: 25px 30px;\n                border-radius: 5px;\n                .registration-title {\n                    h3 {\n                        color : ${colors.black2};\n                        text-transform: uppercase;\n                        font-weight: 600;\n                        padding-bottom: 10px;\n                        margin-bottom: 20px;\n                        position: relative;\n                        &:before {\n                            position: absolute;\n                            content: \"\";\n                            background: ${colors.green};\n                            width: 50px;\n                            height: 2px;\n                            bottom: 0;\n                            left: 50%;\n                            margin-left: -25px;\n                        }\n\n                        @media(max-width: 575px) {\n                            font-size : 20px;\n                        }\n                    }\n                }\n\n                form.form {\n                    p.form-control {\n                        padding      : 0;\n                        width        : auto;\n                        height       : auto;\n                        background   : transparent;\n                        border       : none;\n                        margin-bottom: 28px;\n                        position     : relative;\n\n                        label {\n                            font-size : 15px;\n                            color : ${colors.text1};\n                            font-weight : 500;\n\n                            @media(max-width: 575px) {\n                                font-size : 14px;\n                            }\n                        }\n\n                        input {\n                            width           : 100%;\n                            height          : 48px;\n                            background-color: #ffffff;\n                            font-size       : 14px;\n                            padding         : 15px 20px;\n                            color           : ${colors.black1};\n                            border          : 1px solid ${colors.border3};\n                            border-radius : 5px;\n\n                            &::placeholder {\n                                font-size : 14px;\n                                font-style: italic;\n                                color     : ${colors.text3};\n\n                                @media(max-width: 575px) {\n                                    font-size : 13px;\n                                }\n                            }\n\n                            &:focus {\n                                border-color : ${colors.green};\n                            }\n\n                            @media(max-width: 575px) {\n                                height : 40px;\n                            }\n                        }\n\n                        span {\n                            color      : ${colors.red};\n                            font-weight: 300;\n                            position   : absolute;\n                            bottom     : -20px;\n                            left       : 0;\n                            visibility : hidden;\n                        }\n                    }\n\n                    p.form-control.success {\n                        input {\n                            border: 2px solid ${colors.green};\n                        }\n\n                        &::before {\n                            position   : absolute;\n                            content    : \"\\f058\";\n                            font-family: \"Line Awesome Free\";\n                            font-size  : 24px;\n                            color      : ${colors.green};\n                            font-weight: 900;\n                            top        : 34px;\n                            right      : 10px;\n                        }\n                    }\n\n                    p.form-control.error {\n                        input {\n                            border: 2px solid ${colors.red};\n                        }\n\n                        &::before {\n                            position   : absolute;\n                            content    : \"\\f06a\";\n                            font-family: \"Line Awesome Free\";\n                            font-size  : 24px;\n                            color      : ${colors.red};\n                            font-weight: 900;\n                            top        : 34px;\n                            right      : 10px;\n                        }\n                    }\n\n                    p.form-control.error {\n                        span {\n                            visibility: visible;\n                        }\n                    }\n\n                    button {\n                        font-size  : 16px;\n                        color      : #fff;\n                        background : ${colors.gr_bg};\n                        width      : 100%;\n                        height     : 48px;\n                        font-weight: 500;\n                        border     : none;\n                        border-radius : 5px;\n                        text-transform: uppercase;\n                        margin-bottom : 20px;\n\n                        &:hover {\n                            background: ${colors.gr_bg2};\n\n                            i {\n                                color: #ffffff;\n                            }\n                        }\n\n                        @media(max-width: 575px) {\n                            font-size : 15px;\n                            height     : 40px;\n                        }\n                    }\n                }\n\n                .have_account-btn {\n                    p {\n                        font-size : 14px;\n                        color     : ${colors.text3};\n                        a {\n                            font-size : 14px;\n                            color : ${colors.green};\n                            font-weight : 500;\n                            &:hover {\n                                text-decoration : underline;\n                            }\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding: 30px 0;\n            }\n        }\n    }\n`;","import React, { useEffect } from 'react';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/account.js';\n\nfunction Login() {\n    useEffect(() => {\n        const form = document.getElementById(\"form_login\");\n        const user = document.getElementById(\"login_user\");\n        const password = document.getElementById(\"login_password\");\n\n        form.addEventListener(\"submit\", formSubmit);\n\n        function formSubmit(e) {\n            e.preventDefault();\n\n            const userValue = user.value.trim();\n            const passwordValue = password.value.trim();\n\n            if (userValue === \"\") {\n                setError(user, \"User can't be blank\");\n            } else {\n                setSuccess(user);\n            }\n\n            if (passwordValue === \"\") {\n                setError(password, \"Password can't be blank\");\n            } else {\n                setSuccess(password);\n            }\n        }\n\n        function setError(input, message) {\n            const formControl = input.parentElement;\n            const errorMsg = formControl.querySelector(\".login_input-msg\");\n            formControl.className = \"form-control text-left error\";\n            errorMsg.innerText = message;\n        }\n\n        function setSuccess(input) {\n            const formControl = input.parentElement;\n            formControl.className = \"form-control success\";\n        }\n    });\n\n    return (\n        <Styles>\n            {/* Main Wrapper */}\n            <div className=\"main-wrapper login-page\">\n\n                {/* Header 2 */}\n                <HeaderTwo />\n\n                {/* Breadcroumb */}\n                <BreadcrumbBox title=\"Log In\" />\n\n                {/* Login Area */}\n                <section className=\"login-area\">\n                    <Container>\n                        <Row>\n                            <Col md=\"12\">\n                                <div className=\"login-box\">\n                                    <div className=\"login-title text-center\">\n                                        <h3>Log In</h3>\n                                    </div>\n                                    <form id=\"form_login\" className=\"form\">\n                                        <p className=\"form-control\">\n                                            <label htmlFor=\"login_user\">User Name</label>\n                                            <input type=\"text\" placeholder=\"Username\" id=\"login_user\" />\n                                            <span className=\"login_input-msg\"></span>\n                                        </p>\n                                        <p className=\"form-control\">\n                                            <label htmlFor=\"login_password\">Password</label>\n                                            <input type=\"password\" placeholder=\"*******\" id=\"login_password\" />\n                                            <span className=\"login_input-msg\"></span>\n                                        </p>\n                                        <button>Log In</button>\n                                        <div className=\"save-forget-password d-flex justify-content-between\">\n                                            <div className=\"save-passowrd\">\n                                                <label htmlFor=\"save_password\"><input type=\"checkbox\" id=\"save_password\" className=\"check-box\" />Save Password</label>\n                                            </div>\n                                            <div className=\"forget-password\">\n                                                <Link to={ \"/\"}>Forget Password?</Link>\n                                            </div>\n                                        </div>\n                                        <div className=\"not_account-btn text-center\">\n                                            <p>Haven't Any Account Yet? <Link to={ \"/registration\"}>Click Here</Link></p>\n                                        </div>\n                                        <div className=\"social-login text-center\">\n                                            <p>Login With Social</p>\n                                            <ul className=\"list-unstyled list-inline\">\n                                                <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-google\"></i> Google</a></li>\n                                                <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-facebook-f\"></i> Facebook</a></li>\n                                                <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-twitter\"></i> Twitter</a></li>\n                                            </ul>\n                                        </div>\n                                    </form>\n                                </div>\n                            </Col>\n                        </Row>\n                    </Container>\n                </section>\n\n                {/* Footer 2 */}\n                <FooterTwo />\n\n            </div>\n        </Styles>\n    )\n}\n\nexport default Login","import React, { useEffect } from 'react';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/account.js';\n\nfunction Register() {\n    useEffect(() => {\n        const form = document.getElementById(\"form_registration\");\n        const fname = document.getElementById(\"registration_fname\");\n        const lname = document.getElementById(\"registration_lname\");\n        const email = document.getElementById(\"registration_email\");\n\n        form.addEventListener(\"submit\", formSubmit);\n\n        function formSubmit(e) {\n            e.preventDefault();\n\n            const fnameValue = fname.value.trim();\n            const lnameValue = lname.value.trim();\n            const emailValue = email.value.trim();\n\n            if (fnameValue === \"\") {\n                setError(fname, \"First name can't be blank\");\n            } else {\n                setSuccess(fname);\n            }\n\n            if (lnameValue === \"\") {\n                setError(lname, \"Last name can't be blank\");\n            } else {\n                setSuccess(lname);\n            }\n\n            if (emailValue === \"\") {\n                setError(email, \"Email can't be blank\");\n            } else if (!isEmail(emailValue)) {\n                setError(email, \"Not a valid email\");\n            } else {\n                setSuccess(email);\n            }\n        }\n\n        function setError(input, message) {\n            const formControl = input.parentElement;\n            const errorMsg = formControl.querySelector(\".registration_input-msg\");\n            formControl.className = \"form-control text-left error\";\n            errorMsg.innerText = message;\n        }\n\n        function setSuccess(input) {\n            const formControl = input.parentElement;\n            formControl.className = \"form-control success\";\n        }\n\n        function isEmail(email) {\n            return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/.test(email);\n        }\n    });\n\n    return (\n        <Styles>\n            {/* Main Wrapper */}\n            <div className=\"main-wrapper registration-page\">\n\n                {/* Header 2 */}\n                <HeaderTwo />\n\n                {/* Breadcroumb */}\n                <BreadcrumbBox title=\"Apply Now\" />\n\n                {/* Registration Area */}\n                <section className=\"registration-area\">\n                    <Container>\n                        <Row>\n                            <Col md=\"12\">\n                                <div className=\"registration-box\">\n                                    <div className=\"registration-title text-center\">\n                                        <h3>Apply Now</h3>\n                                    </div>\n                                    <form id=\"form_registration\" className=\"form\">\n                                        <p className=\"form-control\">\n                                            <label htmlFor=\"registration_fname\">First Name</label>\n                                            <input type=\"text\" placeholder=\"First name\" id=\"registration_fname\" />\n                                            <span className=\"registration_input-msg\"></span>\n                                        </p>\n                                        <p className=\"form-control\">\n                                            <label htmlFor=\"registration_lname\">Last Name</label>\n                                            <input type=\"text\" placeholder=\"Last name\" id=\"registration_lname\" />\n                                            <span className=\"registration_input-msg\"></span>\n                                        </p>\n                                        <p className=\"form-control\">\n                                            <label htmlFor=\"registration_email\">Email Address</label>\n                                            <input type=\"email\" placeholder=\"Email address\" id=\"registration_email\" />\n                                            <span className=\"registration_input-msg\"></span>\n                                        </p>\n                                        <button>\n                                            Apply\n                                        </button>\n                                    </form>\n                                </div>\n                            </Col>\n                        </Row>\n                    </Container>\n                </section>\n\n                {/* Footer 2 */}\n                <FooterTwo />\n\n            </div>\n        </Styles>\n    )\n}\n\nexport default Register","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .contact-page {\n        .contact-area {\n            padding : 68px 0 0;\n            .contact-box-title {\n                h4 {\n                    color: ${colors.black1};\n                    font-weight: 600;\n                    padding-bottom: 10px;\n                    margin-bottom: 30px;\n                    position: relative;\n                    &:before {\n                        position: absolute;\n                        content: \"\";\n                        background: ${colors.green};\n                        width: 50px;\n                        height: 2px;\n                        bottom: 0;\n                        left: 0;\n                    }\n\n                    @media(max-width: 575px) {\n                        font-size: 20px;\n                    }\n                }\n            }\n\n            .contact-icon-box {\n                margin-bottom: 30px;\n                i {\n                    font-size : 32px;\n                    color: ${colors.green};\n                    width: 65px;\n                    height: 65px;\n                    border: 1px solid ${colors.border3};\n                    text-align: center;\n                    border-radius : 50%;\n                    padding-top: 15px;\n                    margin-top: 5px;\n                    margin-right : 20px;\n\n                    @media(max-width: 991px) {\n                        font-size: 26px;\n                        width: 50px;\n                        height: 50px;\n                        padding-top: 10px;\n                        margin-right: 12px;\n                    }\n                }\n                h5 {\n                    color: ${colors.black2};\n                    font-weight: 600;\n                    margin-bottom: 8px;\n\n                    @media(max-width: 991px) {\n                        font-size: 16px;\n                    }\n                }\n                p {\n                    font-size : 14px;\n                    color: ${colors.text3};\n\n                    @media(max-width: 991px) {\n                        font-size: 13px;\n                    }\n                }\n\n                @media(max-width: 767px) {\n                    margin-bottom: 20px;\n                }\n            }\n\n            .contact-social {\n                margin-top: 45px;\n                ul.social {\n                    li {\n                        margin-right: 10px;\n                        a {\n                            text-align: center;\n                            position  : relative;\n                            height    : 20px;\n                            display   : inline-block;\n\n                            &:before {\n                                content           : \"\";\n                                position          : absolute;\n                                border-width      : 10px 18px;\n                                border-style      : solid;\n                                border-top-color  : transparent;\n                                border-right-color: transparent;\n                                border-left-color : transparent;\n                                top               : -20px;\n                                left              : 0;\n                                z-index           : 1;\n                                transition : all 0.2s ease;\n                            }\n\n                            &:after {\n                                content            : \"\";\n                                position           : absolute;\n                                border-width       : 10px 18px;\n                                border-style       : solid;\n                                border-right-color : transparent;\n                                border-bottom-color: transparent;\n                                border-left-color  : transparent;\n                                bottom             : -20px;\n                                left               : 0;\n                                z-index            : 1;\n                                transition : all 0.2s ease;\n                            }\n\n                            i {\n                                font-size: 15px;\n                                color    : #ffffff;\n                                width    : 36px;\n                                padding-top: 3px;\n                            }\n\n                            &:hover {\n                                background-color: ${colors.green} !important;\n\n                                &:before {\n                                    border-bottom-color: ${colors.green} !important;\n                                }\n\n                                &:after {\n                                    border-top-color: ${colors.green} !important;\n                                }\n                            }\n                        }\n\n                        &:nth-child(1) {\n                            a {\n                                background-color: #4267B2;\n\n                                &:before {\n                                    border-bottom-color: #4267B2;\n                                }\n\n                                &:after {\n                                    border-top-color: #4267B2;\n                                }\n                            }\n                        }\n\n                        &:nth-child(2) {\n                            a {\n                                background-color: #1DA1F2;\n\n                                &:before {\n                                    border-bottom-color: #1DA1F2;\n                                }\n\n                                &:after {\n                                    border-top-color: #1DA1F2;\n                                }\n                            }\n                        }\n\n                        &:nth-child(3) {\n                            a {\n                                background-color: #2867B2;\n\n                                &:before {\n                                    border-bottom-color: #2867B2;\n                                }\n\n                                &:after {\n                                    border-top-color: #2867B2;\n                                }\n                            }\n                        }\n\n                        &:nth-child(4) {\n                            a {\n                                background-color: #DD1343;\n\n                                &:before {\n                                    border-bottom-color: #DD1343;\n                                }\n\n                                &:after {\n                                    border-top-color: #DD1343;\n                                }\n                            }\n                        }\n\n                        &:nth-child(5) {\n                            a {\n                                background-color: #ea4c89;\n\n                                &:before {\n                                    border-bottom-color: #ea4c89;\n                                }\n\n                                &:after {\n                                    border-top-color: #ea4c89;\n                                }\n                            }\n                        }\n\n                        &:last-child {\n                            margin-right : 0;\n                        }\n\n                        @media(max-width: 991px) {\n                            margin-right: 6px;\n                        }\n                    }\n                }\n\n                @media(max-width: 767px) {\n                    margin-top: 30px;\n                    margin-bottom: 40px;\n                }\n            }\n\n            .contact-form {\n                margin-bottom: 70px;\n                .form-title {\n                    h4 {\n                        color: ${colors.black1};\n                        font-weight: 600;\n                        padding-bottom: 10px;\n                        margin-bottom: 30px;\n                        position: relative;\n                        &:before {\n                            position: absolute;\n                            content: \"\";\n                            background: ${colors.green};\n                            width: 50px;\n                            height: 2px;\n                            bottom: 0;\n                            left: 0;\n                        }\n\n                        @media(max-width: 575px) {\n                            font-size: 20px;\n                        }\n                    }\n                }\n                .form-box {\n                    form.form {\n                        p.form-control {\n                            padding      : 0;\n                            width        : auto;\n                            height       : auto;\n                            background   : transparent;\n                            border       : none;\n                            margin-bottom: 28px;\n                            position     : relative;\n\n                            input {\n                                width           : 100%;\n                                height          : 46px;\n                                background-color: #ffffff;\n                                font-size       : 14px;\n                                padding         : 15px 20px;\n                                color           : ${colors.black1};\n                                border          : 1px solid ${colors.border3};\n                                border-radius : 5px;\n\n                                &::placeholder {\n                                    font-size : 14px;\n                                    color     : ${colors.text2};\n                                }\n\n                                &:focus {\n                                    border-color : ${colors.green};\n                                }\n\n                                @media(max-width: 480px) {\n                                    height: 38px;\n                                }\n                            }\n\n                            textarea {\n                                width           : 100%;\n                                height          : 135px;\n                                background-color: #ffffff;\n                                font-size       : 14px;\n                                padding         : 15px 20px;\n                                color           : ${colors.black1};\n                                border          : 1px solid ${colors.border3};\n                                border-radius : 5px;\n\n                                &::placeholder {\n                                    font-size : 14px;\n                                    color     : ${colors.text2};\n                                }\n\n                                &:focus {\n                                    border-color : ${colors.green};\n                                }\n\n                                @media(max-width: 480px) {\n                                    height: 120px;\n                                }\n                            }\n\n                            span {\n                                color      : ${colors.red};\n                                font-weight: 300;\n                                position   : absolute;\n                                bottom     : -20px;\n                                left       : 0;\n                                visibility : hidden;\n                            }\n                        }\n\n                        p.form-control.success {\n                            input,\n                            textarea {\n                                border: 2px solid ${colors.green};\n                            }\n\n                            &::before {\n                                position   : absolute;\n                                content    : \"\\f058\";\n                                font-family: \"Line Awesome Free\";\n                                font-size  : 24px;\n                                color      : ${colors.green};\n                                font-weight: 900;\n                                top        : 5px;\n                                right      : 10px;\n                            }\n                        }\n\n                        p.form-control.error {\n                            input,\n                            textarea {\n                                border: 2px solid ${colors.red};\n                            }\n\n                            &::before {\n                                position   : absolute;\n                                content    : \"\\f06a\";\n                                font-family: \"Line Awesome Free\";\n                                font-size  : 24px;\n                                color      : ${colors.red};\n                                font-weight: 900;\n                                top        : 5px;\n                                right      : 10px;\n                            }\n                        }\n\n                        p.form-control.error {\n                            span {\n                                visibility: visible;\n                            }\n                        }\n\n                        button {\n                            font-size  : 16px;\n                            color      : #fff;\n                            background : ${colors.gr_bg};\n                            width      : 100%;\n                            height     : 48px;\n                            font-weight: 500;\n                            border     : none;\n                            border-radius : 5px;\n                            text-transform: uppercase;\n\n                            &:hover {\n                                background: ${colors.gr_bg2};\n\n                                i {\n                                    color: #ffffff;\n                                }\n                            }\n\n                            @media(max-width: 575px) {\n                                font-size: 14px;\n                            }\n\n                            @media(max-width: 480px) {\n                                height: 38px;\n                            }\n                        }\n                    }\n                }\n\n                @media(max-width: 767px) {\n                    margin-bottom: 40px;\n                }\n            }\n            .google-map-area {\n                width: 100%;\n                height: 450px;\n\n                @media(max-width: 767px) {\n                    height: 370px;\n                }\n\n                @media(max-width: 480px) {\n                    height: 320px;\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding : 30px 0 0;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport GoogleMapReact from 'google-map-react';\nimport { Styles } from './styles/contact.js';\n\nconst AnyReactComponent = ({ text }) => <div>{text}</div>;\n\nclass GoogleMap extends Component {\n\n    static defaultProps = {\n        center: {\n            lat: 40.696295,\n            lng: -73.997619\n        },\n        zoom: 11\n    };\n\n    render() {\n        return (\n            <Styles>\n                {/* Google Map */}\n                <div className=\"google-map-area\">\n                    <GoogleMapReact\n                        bootstrapURLKeys={{ key: \"AIzaSyATY4Rxc8jNvDpsK8ZetC7JyN4PFVYGCGM\" }}\n                        defaultCenter={this.props.center}\n                        defaultZoom={this.props.zoom}\n                    >\n                        <AnyReactComponent lat={40.696295} lng={-73.997619} text=\"My Marker\" />\n                    </GoogleMapReact>\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default GoogleMap","import React, { useEffect } from 'react';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport GoogleMap from './GoogleMap';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/contact.js';\n\nfunction Contact() {\n    useEffect(() => {\n        const form = document.getElementById(\"form_contact\");\n        const name = document.getElementById(\"contact_name\");\n        const email = document.getElementById(\"contact_email\");\n        const subject = document.getElementById(\"contact_subject\");\n        const message = document.getElementById(\"contact_message\");\n\n        form.addEventListener(\"submit\", formSubmit);\n\n        function formSubmit(e) {\n            e.preventDefault();\n\n            const nameValue = name.value.trim();\n            const emailValue = email.value.trim();\n            const subjectValue = subject.value.trim();\n            const messageValue = message.value.trim();\n\n            if (nameValue === \"\") {\n                setError(name, \"Name can't be blank\");\n            } else {\n                setSuccess(name);\n            }\n\n            if (emailValue === \"\") {\n                setError(email, \"Email can't be blank\");\n            } else if (!isEmail(emailValue)) {\n                setError(email, \"Not a valid email\");\n            } else {\n                setSuccess(email);\n            }\n\n            if (subjectValue === \"\") {\n                setError(subject, \"Subject can't be blank\");\n            } else {\n                setSuccess(subject);\n            }\n\n            if (messageValue === \"\") {\n                setError(message, \"Message can't be blank\");\n            } else {\n                setSuccess(message);\n            }\n        }\n\n        function setError(input, message) {\n            const formControl = input.parentElement;\n            const errorMsg = formControl.querySelector(\".contact_input-msg\");\n            formControl.className = \"form-control text-left error\";\n            errorMsg.innerText = message;\n        }\n\n        function setSuccess(input) {\n            const formControl = input.parentElement;\n            formControl.className = \"form-control success\";\n        }\n\n        function isEmail(email) {\n            return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/.test(email);\n        }\n    });\n\n    return (\n      <Styles>\n        {/* Main Wrapper */}\n        <div className=\"main-wrapper contact-page\">\n          {/* Header 2 */}\n          <HeaderTwo />\n\n          {/* Breadcroumb */}\n          <BreadcrumbBox title=\"Contact Us\" />\n\n          {/* Contact Area */}\n          <section className=\"contact-area\">\n            <Container>\n              <Row>\n                <Col md=\"4\">\n                  <div className=\"contact-box-title\">\n                    <h4>Contact Info</h4>\n                  </div>\n                  <div className=\"contact-icon-box d-flex\">\n                    <div className=\"icon\">\n                      <i className=\"las la-map-marker\"></i>\n                    </div>\n                    <div className=\"box-content\">\n                      <h5>Our Location</h5>\n                      <p>\n                        VILL + PO - KASHIMPUR, DUTTAPUKUR DIST - NORTH 24\n                        PARGANAS, PIN - 743248\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"contact-icon-box d-flex\">\n                    <div className=\"icon\">\n                      <i className=\"las la-envelope-open\"></i>\n                    </div>\n                    <div className=\"box-content\">\n                      <h5>Email Address</h5>\n                      <p>\n                      monalisacollegeofpharmacy@gmail.com\n                        <br />\n                        principalmims126@gmail.com\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"contact-icon-box d-flex\">\n                    <div className=\"icon\">\n                      <i className=\"las la-phone\"></i>\n                    </div>\n                    <div className=\"box-content\">\n                      <h5>Phone Number</h5>\n                      <p>\n                      9193741234 \n                        <br/>\n                        9804588881\n                      </p>\n                    </div>\n                  </div>\n                </Col>\n                <Col md=\"8\">\n                  <div className=\"contact-form\">\n                    <div className=\"form-title\">\n                      <h4>Get In Touch</h4>\n                    </div>\n                    <div className=\"form-box\">\n                      <form id=\"form_contact\" className=\"form\">\n                        <Row>\n                          <Col md=\"6\">\n                            <p className=\"form-control\">\n                              <input\n                                type=\"text\"\n                                placeholder=\"Full Name\"\n                                id=\"contact_name\"\n                              />\n                              <span className=\"contact_input-msg\"></span>\n                            </p>\n                          </Col>\n                          <Col md=\"6\">\n                            <p className=\"form-control\">\n                              <input\n                                type=\"email\"\n                                placeholder=\"Email Address\"\n                                id=\"contact_email\"\n                              />\n                              <span className=\"contact_input-msg\"></span>\n                            </p>\n                          </Col>\n                          <Col md=\"12\">\n                            <p className=\"form-control\">\n                              <input\n                                type=\"text\"\n                                placeholder=\"Subject\"\n                                id=\"contact_subject\"\n                              />\n                              <span className=\"contact_input-msg\"></span>\n                            </p>\n                          </Col>\n                          <Col md=\"12\">\n                            <p className=\"form-control\">\n                              <textarea\n                                name=\"message\"\n                                id=\"contact_message\"\n                                placeholder=\"Enter Message\"\n                              ></textarea>\n                              <span className=\"contact_input-msg\"></span>\n                            </p>\n                          </Col>\n                          <Col md=\"12\">\n                            <button>Send Message</button>\n                          </Col>\n                        </Row>\n                      </form>\n                    </div>\n                  </div>\n                </Col>\n              </Row>\n            </Container>\n\n            {/* Google Map */}\n            {/* <GoogleMap /> */}\n          </section>\n\n          {/* Footer 2 */}\n          <FooterTwo />\n        </div>\n      </Styles>\n    );\n}\n\nexport default Contact","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .faq-page {\n        .faq-area {\n            padding : 70px 0 30px;\n            .nav {\n                margin-bottom : 55px;\n                .nav-item {\n                    margin: 0 10px;\n                    a.nav-link {\n                        font-size: 18px;\n                        padding: 10px;\n                        width: 110px;\n                        font-weight: 500;\n                        text-align: center;\n                        color    : ${colors.black1};\n                        border-radius: 5px;\n                        box-shadow: 0 10px 25px rgba(0,0,0,0.09);\n\n                        @media(max-width: 767px) {\n                            font-size: 16px;\n                            padding: 9px;\n                            width: 92px;\n                        }\n                    }\n                    a.nav-link.active {\n                        background : ${colors.gr_bg};\n                        color : #ffffff;\n                    }\n\n                    @media(max-width: 767px) {\n                        margin: 0 5px;\n                    }\n                }\n\n                @media(max-width: 575px) {\n                    margin-bottom: 45px;\n                }\n            }\n\n            .tab-content {\n                .tab-pane {\n                    .faq-item {\n                        margin-bottom: 35px;\n                        .faq-title {\n                            margin-bottom: 13px;\n                            .title-icon {\n                                background: ${colors.green};\n                                height: 20px;\n                                text-align: center;\n                                margin-right: 12px;\n                                position: relative;\n                                span {\n                                    font-size: 20px;\n                                    color: #ffffff;\n                                    width: 36px;\n                                    display: block;\n                                    line-height: 18px;\n                                    padding-left: 2px;\n\n                                    @media(max-width: 575px) {\n                                        font-size: 16px;\n                                        width : 32px;\n                                        padding-left: 0;\n                                    }\n                                }\n                                &:before {\n                                    content: \"\";\n                                    position: absolute;\n                                    border-width: 10px 18px;\n                                    border-style: solid;\n                                    border-top-color: transparent;\n                                    border-right-color: transparent;\n                                    border-bottom-color: ${colors.green};\n                                    border-left-color: transparent;\n                                    top: -20px;\n                                    left: 0;\n                                    z-index: 1;\n\n                                    @media(max-width: 575px) {\n                                        border-width: 8px 16px;\n                                        top: -16px;\n                                    }\n                                }\n                                &:after {\n                                    content: \"\";\n                                    position: absolute;\n                                    border-width: 10px 18px;\n                                    border-style: solid;\n                                    border-top-color: ${colors.green};\n                                    border-right-color: transparent;\n                                    border-bottom-color: transparent;\n                                    border-left-color: transparent;\n                                    bottom: -20px;\n                                    left: 0;\n                                    z-index: 1;\n\n                                    @media(max-width: 575px) {\n                                        border-width: 8px 16px;\n                                        bottom: -16px;\n                                    }\n                                }\n\n                                @media(max-width: 575px) {\n                                    height: 19px;\n                                    margin-right: 10px;\n                                }\n                            }\n\n                            .title-text {\n                                p {\n                                    font-size: 18px;\n                                    color: ${colors.black1};\n                                    font-weight: 500;\n                                    line-height: 20px;\n\n                                    @media(max-width: 575px) {\n                                        font-size: 16px;\n                                    }\n                                }\n                            }\n                        }\n                        .faq-desc {\n                            p{\n                                font-size: 15px;\n                                color: ${colors.text2};\n                                line-height: 28px;\n                                padding-left: 48px;\n                            }\n                        }\n\n                        @media(max-width: 575px) {\n                            margin-bottom: 25px;\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding : 30px 0 0;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../../data/faq/faq.json';\nimport { Container, Row, Col, Tab, Nav } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/faq.js';\n\nclass Faq extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper faq-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"Faq\" />\n\n                    {/* Faq Area */}\n                    <section className=\"faq-area\">\n                        <Container>\n                            <Row>\n                                <Col md=\"12\">\n                                    <Tab.Container defaultActiveKey=\"general\">\n                                        <Nav className=\"justify-content-center\">\n                                            <Nav.Item><Nav.Link eventKey=\"general\">General </Nav.Link></Nav.Item>\n                                            {/* <Nav.Item><Nav.Link eventKey=\"author\">Author</Nav.Link></Nav.Item>\n                                            <Nav.Item><Nav.Link eventKey=\"buyer\">Buyer</Nav.Link></Nav.Item>\n                                            <Nav.Item><Nav.Link eventKey=\"price\">Pricing</Nav.Link></Nav.Item>\n                                            <Nav.Item><Nav.Link eventKey=\"payment\">Payment</Nav.Link></Nav.Item> */}\n                                        </Nav>\n                                        <Tab.Content>\n                                            <Tab.Pane eventKey=\"general\">\n                                                <Row>\n                                                    {\n                                                        Datas.map((data, i) => (\n                                                            <Col md=\"6\" key={i}>\n                                                                <div className=\"faq-item\">\n                                                                    <div className=\"faq-title d-flex\">\n                                                                        <div className=\"title-icon\"><span>Q</span></div>\n                                                                        <div className=\"title-text\"><p>{data.faqTitle}</p></div>\n                                                                    </div>\n                                                                    <div className=\"faq-desc\">\n                                                                        <p>{data.faqDesc}</p>\n                                                                    </div>\n                                                                </div>\n                                                            </Col>\n                                                        ))\n                                                    }\n                                                </Row>\n                                            </Tab.Pane>\n                                            <Tab.Pane eventKey=\"author\">\n                                                <Row>\n                                                    {\n                                                        Datas.map((data, i) => (\n                                                            <Col md=\"6\" key={i}>\n                                                                <div className=\"faq-item\">\n                                                                    <div className=\"faq-title d-flex\">\n                                                                        <div className=\"title-icon\"><span>Q</span></div>\n                                                                        <div className=\"title-text\"><p>{data.faqTitle}</p></div>\n                                                                    </div>\n                                                                    <div className=\"faq-desc\">\n                                                                        <p>{data.faqDesc}</p>\n                                                                    </div>\n                                                                </div>\n                                                            </Col>\n                                                        ))\n                                                    }\n                                                </Row>\n                                            </Tab.Pane>\n                                            <Tab.Pane eventKey=\"buyer\">\n                                                <Row>\n                                                    {\n                                                        Datas.map((data, i) => (\n                                                            <Col md=\"6\" key={i}>\n                                                                <div className=\"faq-item\">\n                                                                    <div className=\"faq-title d-flex\">\n                                                                        <div className=\"title-icon\"><span>Q</span></div>\n                                                                        <div className=\"title-text\"><p>{data.faqTitle}</p></div>\n                                                                    </div>\n                                                                    <div className=\"faq-desc\">\n                                                                        <p>{data.faqDesc}</p>\n                                                                    </div>\n                                                                </div>\n                                                            </Col>\n                                                        ))\n                                                    }\n                                                </Row>\n                                            </Tab.Pane>\n                                            <Tab.Pane eventKey=\"price\">\n                                                <Row>\n                                                    {\n                                                        Datas.map((data, i) => (\n                                                            <Col md=\"6\" key={i}>\n                                                                <div className=\"faq-item\">\n                                                                    <div className=\"faq-title d-flex\">\n                                                                        <div className=\"title-icon\"><span>Q</span></div>\n                                                                        <div className=\"title-text\"><p>{data.faqTitle}</p></div>\n                                                                    </div>\n                                                                    <div className=\"faq-desc\">\n                                                                        <p>{data.faqDesc}</p>\n                                                                    </div>\n                                                                </div>\n                                                            </Col>\n                                                        ))\n                                                    }\n                                                </Row>\n                                            </Tab.Pane>\n                                            <Tab.Pane eventKey=\"payment\">\n                                                <Row>\n                                                    {\n                                                        Datas.map((data, i) => (\n                                                            <Col md=\"6\" key={i}>\n                                                                <div className=\"faq-item\">\n                                                                    <div className=\"faq-title d-flex\">\n                                                                        <div className=\"title-icon\"><span>Q</span></div>\n                                                                        <div className=\"title-text\"><p>{data.faqTitle}</p></div>\n                                                                    </div>\n                                                                    <div className=\"faq-desc\">\n                                                                        <p>{data.faqDesc}</p>\n                                                                    </div>\n                                                                </div>\n                                                            </Col>\n                                                        ))\n                                                    }\n                                                </Row>\n                                            </Tab.Pane>\n                                        </Tab.Content>\n                                    </Tab.Container>\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default Faq","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .error-page {\n        .error-area {\n            background-size: cover;\n            background-position: center;\n            background-repeat: no-repeat;\n            padding: 80px 0 120px;\n            position: relative;\n            &:before {\n                position: absolute;\n                content: '';\n                background: rgba(255, 255, 255, 0.92);\n                opacity: 0.9;\n                width: 100%;\n                height: 100%;\n                top: 0;\n                left: 0;\n            }\n            .error-box {\n                h1 {\n                    font-size : 192px;\n                    color    : ${colors.black1};\n                    font-weight: 600;\n                    span {\n                        color    : ${colors.green};\n                    }\n\n                    @media(max-width: 575px) {\n                        font-size : 120px;\n                    }\n                }\n                h3 {\n                    color    : ${colors.black2};\n                    font-weight : 600;\n                    margin-bottom: 20px;\n\n                    @media(max-width: 575px) {\n                        font-size : 22px;\n                    }\n                }\n                p {\n                    font-size : 17px;\n                    color : ${colors.text1};\n                    font-weight: 500;\n                    margin-bottom: 40px;\n                }\n                a {\n                    font-size: 18px;\n                    background : ${colors.gr_bg};\n                    color : #ffffff;\n                    padding: 12px 30px;\n                    font-weight: 500;\n                    border-radius: 5px;\n                    display : inline-block;\n                    i {\n                        margin-right: 6px;\n                    }\n                    &:hover {\n                        background : ${colors.gr_bg2};\n                    }\n\n                    @media(max-width: 575px) {\n                        font-size: 15px;\n                        padding: 10px 20px;\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding: 30px 0 75px;\n            }\n\n            @media(max-width: 575px) {\n                padding: 30px 0 55px;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../../data/404/error.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/pageNotFound.js';\n\nclass PageNotFound extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper error-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* 404 Area */}\n                    <section className=\"error-area\" style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${Datas.backgroundImage})` }}>\n                        <Container>\n                            <Row>\n                                <Col md=\"12\">\n                                    <div className=\"error-box text-center\">\n                                        <h1>4<span>0</span>4</h1>\n                                        <h3>Page Not Found</h3>\n                                        <p>Ooops! The page you are looking for, couldn't be found.</p>\n                                        <Link to={ \"/\"}><i className=\"fas fa-home\"></i>Go To Homepage</Link>\n                                    </div>\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default PageNotFound","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .coming-soon-page {\n        .coming-soon-area {\n            background-size: cover;\n            background-position: center;\n            background-repeat: no-repeat;\n            height : 750px;\n            position: relative;\n            &:before {\n                position: absolute;\n                content: '';\n                background: rgba(255, 255, 255, 0.98);\n                opacity: 0.9;\n                width: 100%;\n                height: 100%;\n                top: 0;\n                left: 0;\n            }\n            .cm-table {\n                display: table;\n                width: 100%;\n                height: 100%;\n                .cm-tablecell {\n                    display: table-cell;\n                    vertical-align: middle;\n                    .cm-logo {\n                        img {\n                            margin-bottom : 20px;\n                        }\n                    }\n                    .launching-text {\n                        p {\n                            font-size : 52px;\n                            color    : ${colors.black1};\n                            font-weight: 800;\n                            margin-bottom : 40px;\n\n                            @media(max-width: 767px) {\n                                font-size : 36px;\n                            }\n\n                            @media(max-width: 575px) {\n                                font-size : 30px;\n                                font-weight: 600;\n                                margin-bottom: 25px;\n                            }\n                        }\n                    }\n                    .countdown-timer {\n                        margin-bottom: 45px;\n                        p {\n                            display: inline-block;\n                            padding: 22px 0;\n                            margin: 0 10px;\n                            font-size: 14px;\n                            color: #ffffff;\n                            background-color: ${colors.black1};\n                            width: 110px;\n                            border-radius: 5px;\n                            text-transform: capitalize;\n\n                            span {\n                                font-size     : 48px;\n                                color         : ${colors.green};\n                                font-weight: 600;\n                                display       : block;\n                                letter-spacing: 0;\n                                margin-top    : -12px;\n                                margin-bottom : -10px;\n\n                                @media(max-width: 767px) {\n                                    font-size : 36px;\n                                    margin-top: -9px;\n                                }\n\n                                @media(max-width: 575px) {\n                                    font-size : 28px;\n                                    margin-bottom: -7px;\n                                }\n                            }\n\n                            @media(max-width: 767px) {\n                                padding: 18px 0;\n                                font-size : 13px;\n                                width: 90px;\n                            }\n\n                            @media(max-width: 575px) {\n                                padding: 15px 0;\n                                width: 80px;\n                                margin: 0 5px;\n                            }\n                        }\n\n                        @media(max-width: 575px) {\n                            margin-bottom: 25px;\n                        }\n                    }\n\n                    .email-subscrition {\n                        margin-bottom : 50px;\n                        p.sub-text {\n                            font-size: 20px;\n                            color: ${colors.text2};\n                            font-weight: 500;\n                            margin-bottom: 10px;\n                        }\n\n                        form.form {\n                            width: 600px;\n                            margin: auto;\n                            position: relative;\n                            p.form-control {\n                                padding      : 0;\n                                width        : auto;\n                                height       : auto;\n                                background   : transparent;\n                                border       : none;\n                                margin-bottom: 28px;\n                                position     : relative;\n\n                                input {\n                                    width           : 100%;\n                                    height          : 52px;\n                                    background      : transparent;\n                                    font-size       : 14px;\n                                    padding         : 15px 20px;\n                                    color           : ${colors.black1};\n                                    border          : 2px solid ${colors.green};\n                                    border-radius : 5px;\n\n                                    &::placeholder {\n                                        font-size : 14px;\n                                        color     : ${colors.text1};\n                                    }\n\n                                    @media(max-width: 575px) {\n                                        height : 43px;\n                                        padding : 11px 15px;\n                                    }\n                                }\n\n                                span {\n                                    color      : ${colors.red};\n                                    position   : absolute;\n                                    bottom     : -20px;\n                                    left       : 0;\n                                    visibility : hidden;\n                                }\n                            }\n\n                            p.form-control.success {\n                                input {\n                                    border: 2px solid ${colors.green};\n                                }\n\n                                &::before {\n                                    position   : absolute;\n                                    content    : \"\\f058\";\n                                    font-family: \"Line Awesome Free\";\n                                    font-size  : 24px;\n                                    color      : ${colors.green};\n                                    font-weight: 900;\n                                    top        : 9px;\n                                    right      : 120px;\n                                }\n                            }\n\n                            p.form-control.error {\n                                input {\n                                    border: 2px solid ${colors.red};\n                                }\n\n                                &::before {\n                                    position   : absolute;\n                                    content    : \"\\f06a\";\n                                    font-family: \"Line Awesome Free\";\n                                    font-size  : 24px;\n                                    color      : ${colors.red};\n                                    font-weight: 900;\n                                    top        : 9px;\n                                    right      : 120px;\n                                }\n                            }\n\n                            p.form-control.error {\n                                span {\n                                    visibility: visible;\n                                }\n                            }\n\n                            button {\n                                font-size  : 14px;\n                                color      : #fff;\n                                background : ${colors.gr_bg};\n                                width: 100px;\n                                height: 40px;\n                                position: absolute;\n                                top: 6px;\n                                right: 6px;\n                                font-weight: 500;\n                                border: none;\n                                border-radius: 5px;\n                                text-transform: uppercase;\n\n                                &:hover {\n                                    background: ${colors.gr_bg2};\n                                }\n\n                                @media(max-width: 575px) {\n                                    height: 33px;\n                                    top: 5px;\n                                    right: 5px;\n                                }\n                            }\n\n                            @media(max-width: 767px) {\n                                width: 90%;\n                            }\n                        }\n\n                        @media(max-width: 575px) {\n                            margin-bottom : 40px;\n                        }\n                    }\n\n                    .cm-social {\n                        ul.social {\n                            li {\n                                margin-right: 10px;\n                                a {\n                                    text-align: center;\n                                    position  : relative;\n                                    height    : 20px;\n                                    display   : inline-block;\n\n                                    &:before {\n                                        content           : \"\";\n                                        position          : absolute;\n                                        border-width      : 10px 18px;\n                                        border-style      : solid;\n                                        border-top-color  : transparent;\n                                        border-right-color: transparent;\n                                        border-left-color : transparent;\n                                        top               : -20px;\n                                        left              : 0;\n                                        z-index           : 1;\n                                        transition : all 0.2s ease;\n                                    }\n\n                                    &:after {\n                                        content            : \"\";\n                                        position           : absolute;\n                                        border-width       : 10px 18px;\n                                        border-style       : solid;\n                                        border-right-color : transparent;\n                                        border-bottom-color: transparent;\n                                        border-left-color  : transparent;\n                                        bottom             : -20px;\n                                        left               : 0;\n                                        z-index            : 1;\n                                        transition : all 0.2s ease;\n                                    }\n\n                                    i {\n                                        font-size: 15px;\n                                        color    : #ffffff;\n                                        width    : 36px;\n                                        padding-top: 3px;\n                                    }\n\n                                    &:hover {\n                                        background-color: ${colors.green} !important;\n\n                                        &:before {\n                                            border-bottom-color: ${colors.green} !important;\n                                        }\n\n                                        &:after {\n                                            border-top-color: ${colors.green} !important;\n                                        }\n                                    }\n                                }\n\n                                &:nth-child(1) {\n                                    a {\n                                        background-color: #4267B2;\n\n                                        &:before {\n                                            border-bottom-color: #4267B2;\n                                        }\n\n                                        &:after {\n                                            border-top-color: #4267B2;\n                                        }\n                                    }\n                                }\n\n                                &:nth-child(2) {\n                                    a {\n                                        background-color: #1DA1F2;\n\n                                        &:before {\n                                            border-bottom-color: #1DA1F2;\n                                        }\n\n                                        &:after {\n                                            border-top-color: #1DA1F2;\n                                        }\n                                    }\n                                }\n\n                                &:nth-child(3) {\n                                    a {\n                                        background-color: #2867B2;\n\n                                        &:before {\n                                            border-bottom-color: #2867B2;\n                                        }\n\n                                        &:after {\n                                            border-top-color: #2867B2;\n                                        }\n                                    }\n                                }\n\n                                &:nth-child(4) {\n                                    a {\n                                        background-color: #DD1343;\n\n                                        &:before {\n                                            border-bottom-color: #DD1343;\n                                        }\n\n                                        &:after {\n                                            border-top-color: #DD1343;\n                                        }\n                                    }\n                                }\n\n                                &:nth-child(5) {\n                                    a {\n                                        background-color: #ea4c89;\n\n                                        &:before {\n                                            border-bottom-color: #ea4c89;\n                                        }\n\n                                        &:after {\n                                            border-top-color: #ea4c89;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                height : 550px;\n            }\n        }\n    }\n`;","import React, { useEffect } from 'react';\nimport Datas from '../../data/coming-soon/coming-soon.json';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport Timer from 'react-compound-timer';\nimport { Styles } from './styles/comingSoon.js';\n\nfunction ComingSoon() {\n    useEffect(() => {\n        const form = document.getElementById(\"cm_form\");\n        const email = document.getElementById(\"cm_email\");\n\n        form.addEventListener(\"submit\", formSubmit);\n\n        function formSubmit(e) {\n            e.preventDefault();\n\n            const emailValue = email.value.trim();\n\n            if (emailValue === \"\") {\n                setError(email, \"Email can't be blank\");\n            } else if (!isEmail(emailValue)) {\n                setError(email, \"Not a valid email\");\n            } else {\n                setSuccess(email);\n            }\n        }\n\n        function setError(input, message) {\n            const formControl = input.parentElement;\n            const errorMsg = formControl.querySelector(\".cm_input-msg\");\n            formControl.className = \"form-control error\";\n            errorMsg.innerText = message;\n        }\n\n        function setSuccess(input) {\n            const formControl = input.parentElement;\n            formControl.className = \"form-control success\";\n        }\n\n        function isEmail(email) {\n            return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/.test(email);\n        }\n    });\n\n    return (\n        <div className=\"site-wrap\">\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper coming-soon-page\">\n\n                    {/* Coming Soon Area */}\n                    <section className=\"coming-soon-area\" style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/${Datas.backgroundImage})` }}>\n                        <div className=\"cm-table\">\n                            <div className=\"cm-tablecell\">\n                                <Container>\n                                    <Row>\n                                        <Col md=\"12\" className=\"text-center\">\n                                            <div className=\"cm-logo\">\n                                                <img src={ \"/assets/images/logo.png\"} alt=\"\" />\n                                            </div>\n                                            <div className=\"launching-text\">\n                                                <p>We are launching soon</p>\n                                            </div>\n                                            <div className=\"countdown-timer\">\n                                                <Timer initialTime={1040 * 2950 * 980} direction=\"backward\">\n                                                    <p><span><Timer.Days /></span>Days</p>\n                                                    <p><span><Timer.Hours /></span>Hours</p>\n                                                    <p><span><Timer.Minutes /></span>Minutes</p>\n                                                    <p><span><Timer.Seconds /></span>Seconds</p>\n                                                </Timer>\n                                            </div>\n                                            <div className=\"email-subscrition\">\n                                                <p className=\"sub-text\">Don't miss our news & updates</p>\n                                                <form id=\"cm_form\" className=\"form\">\n                                                    <p className=\"form-control\">\n                                                        <input type=\"email\" placeholder=\"Enter your email\" id=\"cm_email\" />\n                                                        <span className=\"cm_input-msg\"></span>\n                                                    </p>\n                                                    <button>Submit</button>\n                                                </form>\n                                            </div>\n                                            <div className=\"cm-social\">\n                                                <ul className=\"social list-unstyled list-inline\">\n                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-facebook-f\"></i></a></li>\n                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-twitter\"></i></a></li>\n                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-linkedin-in\"></i></a></li>\n                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-youtube\"></i></a></li>\n                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-dribbble\"></i></a></li>\n                                                </ul>\n                                            </div>\n                                        </Col>\n                                    </Row>\n                                </Container>\n                            </div>\n                        </div>\n\n                    </section>\n\n                </div>\n            </Styles>\n        </div>\n    )\n}\n\nexport default ComingSoon","import styled from \"styled-components\";\nimport { colors } from './../../../components/common/element/elements.js';\n\nexport const Styles = styled.div`\n    /* Course Search */\n    .course-search {\n        border : 1px solid ${colors.border1};\n        padding: 15px 20px 20px;\n        border-radius : 5px;\n        margin-bottom: 30px;\n        h5 {\n            color : ${colors.black1};\n            font-weight : 600;\n            padding-bottom: 10px;\n            margin-bottom: 20px;\n            position : relative;\n            &:before {\n                position : absolute;\n                content : \"\";\n                background : ${colors.green};\n                width : 50px;\n                height: 2px;\n                bottom : 0;\n                left : 0;\n            }\n\n            @media(max-width: 575px) {\n                font-size  : 17px;\n            }\n        }\n        form {\n            position: relative;\n            input {\n                width : 100%;\n                height: 45px;\n                border: 1px solid ${colors.border3};\n                color : ${colors.black1};\n                padding-left: 15px;\n                &:focus {\n                    border-color : ${colors.green};\n                }\n                &::placeholder {\n                    font-size  : 14px;\n                    font-style : italic;\n                    color      : ${colors.black2};\n                    font-weight: 400;\n                }\n            }\n            button {\n                position: absolute;\n                width: 45px;\n                height: 100%;\n                top: 0;\n                right: 0;\n                background: transparent;\n                padding: 0;\n                border: none;\n                font-size: 20px;\n                color: ${colors.green};\n            }\n        }\n\n        @media(max-width: 1199px) {\n            padding: 12px 15px 15px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport { Styles } from '../styles/courseSearch.js';\n\nclass CourseSearch extends Component {\n\n    render() {\n        return (\n            <Styles>\n                {/* Course Search */}\n                <div className=\"course-search\">\n                    <h5>Search Course</h5>\n                    <form action=\"#\">\n                        <input type=\"text\" name=\"search\" placeholder=\"Search Here\" />\n                        <button type=\"submit\"><i className=\"las la-search\"></i></button>\n                    </form>\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default CourseSearch\n","import styled from \"styled-components\";\nimport { colors } from './../../../components/common/element/elements.js';\n\nexport const Styles = styled.div`\n    /* Course Category */\n    .course-category {\n        border : 1px solid ${colors.border1};\n        padding: 15px 20px 20px;\n        border-radius : 5px;\n        margin-bottom : 30px;\n        h5 {\n            color : ${colors.black1};\n            font-weight : 600;\n            padding-bottom: 10px;\n            margin-bottom: 20px;\n            position : relative;\n            &:before {\n                position : absolute;\n                content : \"\";\n                background : ${colors.green};\n                width : 50px;\n                height: 2px;\n                bottom : 0;\n                left : 0;\n            }\n\n            @media(max-width: 575px) {\n                font-size  : 17px;\n            }\n        }\n        ul.category-item {\n            li.check-btn {\n                border-top : 1px dashed ${colors.border3};\n                padding: 10px 0;\n\n                &:last-child {\n                    border-bottom : 1px dashed ${colors.border3};\n                }\n\n                label {\n                    font-size: 14px;\n                    color: ${colors.text3};\n                    display: block;\n                    margin-bottom : 4px;\n                    cursor: pointer;\n\n                    input[type=checkbox] {\n                        border : 2px solid ${colors.border3};\n                        appearance: none;\n                        width: 18px;\n                        height: 18px;\n                        cursor: pointer;\n                        margin-right: 6px;\n                        position: relative;\n                        top: 4px;\n\n                        &:focus {\n                            outline: none;\n                        }\n\n                        &:checked {\n                            background-color: ${colors.green};\n                            background: ${colors.green} url(\"data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==\") 2px 2px no-repeat;\n                            border-color : ${colors.green};\n                        }\n                    }\n\n                    span {\n                        float : right;\n                        font-size: 12px;\n                        color: ${colors.text2};\n                        line-height: 27px;\n                    }\n                }\n            }\n        }\n\n        @media(max-width: 1199px) {\n            padding: 12px 15px 15px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport { Styles } from '../styles/courseCategory.js';\n\nclass CourseCategory extends Component {\n\n    render() {\n        return (\n            <Styles>\n                {/* Course Tag */}\n                <div className=\"course-category\">\n                    <h5>Course Category</h5>\n                    <ul className=\"category-item list-unstyled\">\n                        <li className=\"check-btn\">\n                            <label htmlFor=\"cat1\"><input type=\"checkbox\" id=\"cat1\" className=\"check-box\" />Web Development<span>(25)</span></label>\n                        </li>\n                        <li className=\"check-btn\">\n                            <label htmlFor=\"cat2\"><input type=\"checkbox\" id=\"cat2\" className=\"check-box\" />Graphic Design<span>(11)</span></label>\n                        </li>\n                        <li className=\"check-btn\">\n                            <label htmlFor=\"cat3\"><input type=\"checkbox\" id=\"cat3\" className=\"check-box\" />Php Programming<span>(17)</span></label>\n                        </li>\n                        <li className=\"check-btn\">\n                            <label htmlFor=\"cat4\"><input type=\"checkbox\" id=\"cat4\" className=\"check-box\" />React Js Learning<span>(23)</span></label>\n                        </li>\n                        <li className=\"check-btn\">\n                            <label htmlFor=\"cat5\"><input type=\"checkbox\" id=\"cat5\" className=\"check-box\" />Web Design<span>(19)</span></label>\n                        </li>\n                    </ul>\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default CourseCategory\n","import styled from \"styled-components\";\nimport { colors } from './../../../components/common/element/elements.js';\n\nexport const Styles = styled.div`\n    /* Recent Blog */\n    .recent-blog {\n        border : 1px solid ${colors.border1};\n        padding: 15px 20px 20px;\n        border-radius : 5px;\n        margin-bottom: 30px;\n        h5 {\n            color : ${colors.black1};\n            font-weight : 600;\n            padding-bottom: 10px;\n            margin-bottom: 20px;\n            position : relative;\n            &:before {\n                position : absolute;\n                content : \"\";\n                background : ${colors.green};\n                width : 50px;\n                height: 2px;\n                bottom : 0;\n                left : 0;\n            }\n\n            @media(max-width: 575px) {\n                font-size : 17px;\n            }\n        }\n\n        .blog-items {\n            .item-box {\n                margin-bottom: 15px;\n                .item-img {\n                    a {\n                        img {\n                            max-width: 85px;\n                            border-radius: 5px;\n                            margin-right: 15px;\n\n                            @media(max-width: 1199px) {\n                                max-width: 60px;\n                                margin-right: 12px;\n                            }\n                        }\n                    }\n                }\n\n                .item-content {\n                    padding-top: 5px;\n                    p.title {\n                        margin-bottom: 8px;\n                        a {\n                            font-size: 14px;\n                            color: ${colors.black2};\n                            font-weight: 500;\n                            &:hover {\n                                color : ${colors.green};\n                            }\n\n                            @media(max-width: 1199px) {\n                                font-size: 13px;\n                            }\n                        }\n\n                        @media(max-width: 1199px) {\n                            margin-bottom: 0;\n                        }\n                    }\n\n                    span.date {\n                        font-size : 12px;\n                        color : ${colors.text3};\n                        font-weight: 500;\n                        font-style: italic;\n                    }\n\n                    @media(max-width: 1199px) {\n                        padding-top: 0;\n                    }\n                }\n\n                &:last-child {\n                    margin-bottom: 0;\n                }\n            }\n        }\n\n        @media(max-width: 1199px) {\n            padding: 12px 15px 15px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport { Link } from 'react-router-dom';\nimport Datas from '../../../data/blog/recent-post.json';\nimport { Styles } from '../styles/recentPost.js';\n\nclass RecentPost extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Recent Post */}\n                <div className=\"recent-blog\">\n                    <h5>Recent Post</h5>\n                    <div className=\"blog-items\">\n                        {\n                            Datas.map((data, i) => (\n\n                                <div className=\"item-box d-flex\" key={i}>\n                                    <div className=\"item-img\">\n                                        <Link to={data.blogLink}><img src={ `/assets/images/${data.imgUrl}`} alt=\"\" /></Link>\n                                    </div>\n                                    <div className=\"item-content\">\n                                        <p className=\"title\"><Link to={ data.blogLink}>{data.blogTitle}</Link></p>\n                                        <span className=\"date\">{data.blogDate}</span>\n                                    </div>\n                                </div>\n\n                            ))\n                        }\n                    </div>\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default RecentPost\n","import React, { Component } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport CourseSearch from './../../courses/components/CourseSearch';\nimport CourseCategory from './../../courses/components/CourseCategory';\nimport RecentBlog from './RecentPost';\nimport CourseTag from './../../courses/components/CourseTag';\n\n\nclass BlogSidebar extends Component {\n    render() {\n        return (\n            <div className=\"course-sidebar\">\n                <Row>\n                    <Col md=\"12\">\n                        <CourseSearch />\n                    </Col>\n                    <Col md=\"12\">\n                        <CourseCategory />\n                    </Col>\n                    <Col md=\"12\">\n                        <RecentBlog />\n                    </Col>\n                    <Col md=\"12\">\n                        <CourseTag />\n                    </Col>\n                </Row>\n            </div>\n        )\n    }\n}\n\nexport default BlogSidebar\n","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\"\n\nexport const Styles = styled.div`\n    .blog-classic-page {\n        .blog-classic-area {\n            padding : 70px 0;\n            .blog-item {\n                margin-bottom: 40px;\n                &:last-child {\n                    margin-bottom : 0;\n                }\n\n                .blog-img {\n                    a {\n                        img {\n                            border-radius : 5px;\n                            margin-bottom: 30px;\n                        }\n                    }\n                }\n                .blog-auth_date {\n                    margin-bottom: 12px;\n                    .author-img {\n                        margin-right : 20px;\n                        a {\n                            img {\n                                max-width: 40px;\n                                border-radius: 50%;\n                                margin-right: 10px;\n                                margin-top: -9px;\n                            }\n                        }\n                        p {\n                            a {\n                                font-size: 14px;\n                                color: ${colors.green};\n                                font-weight: 500;\n                                &:hover {\n                                    color: ${colors.black1};\n                                }\n                            }\n                        }\n\n                        @media(max-width: 991px) {\n                            margin-right: 10px;\n                        }\n                    }\n\n                    .post-date,\n                    .post-category,\n                    .post-comment {\n                        margin-right: 20px;\n                        p {\n                            font-size : 14px;\n                            color: ${colors.text2};\n                            font-weight: 500;\n                            i {\n                                font-size : 20px;\n                                color: ${colors.green};\n                                vertical-align: top;\n                            }\n                        }\n\n                        @media(max-width: 991px) {\n                            margin-right: 10px;\n                        }\n                    }\n\n                    .post-category,\n                    .post-comment {\n                        @media(max-width: 767px) {\n                            display : none;\n                        }\n                    }\n                }\n\n                .blog-title {\n                    h5 {\n                        a {\n                            color: ${colors.black1};\n                            line-height: 32px;\n                            &:hover {\n                                color: ${colors.green};\n                            }\n\n                            @media(max-width: 991px) {\n                                font-size : 18px;\n                            }\n\n                            @media(max-width: 575px) {\n                                font-size : 15px;\n                            }\n                        }\n                    }\n                }\n            }\n\n            ul.pagination-box {\n                margin-top: 7px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 30px;\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding : 35px 0 30px;\n            }\n\n            @media(max-width: 575px) {\n                padding-bottom : 0;\n            }\n        }\n    }\n\n    .blog-grid-page {\n        .blog-grid-area {\n            padding : 70px 0;\n            .blog-item {\n                border: 1px solid ${colors.border1};\n                border-radius: 5px;\n                transition: all 0.2s ease;\n                margin-bottom: 30px;\n\n                .blog-img {\n                    a {\n                        img {\n                            border-radius: 5px 5px 0 0;\n                        }\n                    }\n                }\n                .blog-content {\n                    padding: 30px 25px 25px;\n                    border-radius: 0 0 5px 5px;\n                    .blog-auth_date {\n                        margin-bottom: 12px;\n                        .author-img {\n                            margin-right : 20px;\n                            a {\n                                img {\n                                    max-width: 35px;\n                                    border-radius: 50%;\n                                    margin-right: 8px;\n                                    margin-top: -8px;\n                                }\n                            }\n                            p {\n                                a {\n                                    font-size: 13px;\n                                    color: ${colors.green};\n                                    font-weight: 500;\n                                    &:hover {\n                                        color: ${colors.black1};\n                                    }\n                                }\n                            }\n\n                            @media(max-width: 767px) {\n                                margin-right: 10px;\n                            }\n                        }\n\n                        .post-date,\n                        .post-category {\n                            margin-right: 8px;\n                            p {\n                                font-size : 13px;\n                                color: ${colors.text2};\n                                font-weight: 500;\n                                i {\n                                    font-size : 20px;\n                                    color: ${colors.green};\n                                    vertical-align: top;\n                                }\n                            }\n                        }\n\n                        .post-category {\n                            margin-right: 0;\n                        }\n                    }\n\n                    .blog-title {\n                        margin-bottom: 10px;\n                        h6 {\n                            a {\n                                color: ${colors.black1};\n                                line-height: 25px;\n                                &:hover {\n                                    color: ${colors.green};\n                                }\n\n                                @media(max-width: 767px) {\n                                    font-size : 15px;\n                                }\n                            }\n                        }\n                    }\n\n                    .blog-desc {\n                        p {\n                            font-size : 14px;\n                            color : ${colors.text3};\n                            line-height: 25px;\n                        }\n                    }\n                }\n                &:hover {\n                    box-shadow: 0 12px 25px rgba(0,0,0,0.07);\n                }\n            }\n\n            ul.pagination-box {\n                margin-top: 20px;\n\n                @media(max-width: 575px) {\n                    margin-bottom: 30px;\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding: 35px 0 30px;\n            }\n\n            @media(max-width: 575px) {\n                padding-bottom : 0;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../../data/blog/classic.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport Pagination from './../../components/Pagination';\nimport BlogSidebar from './components/BlogSidebar';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/blog.js';\n\nclass BlogClassic extends Component {\n\n    render() {\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper blog-classic-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"Blog Classic\" />\n\n                    {/* Blog Classic */}\n                    <section className=\"blog-classic-area\">\n                        <Container>\n                            <Row>\n                                <Col lg=\"9\" md=\"8\" sm=\"7\">\n                                    {\n                                        Datas.map((data, i) => (\n                                            <div className=\"blog-item\" key={i}>\n                                                <div className=\"blog-img\">\n                                                    <Link to={ data.postLink}><img src={ `/assets/images/${data.postImg}`} alt=\"\" className=\"img-fluid\" /></Link>\n                                                </div>\n                                                <div className=\"blog-auth_date d-flex\">\n                                                    <div className=\"author-img d-flex\">\n                                                        <Link to={ data.authorLink}><img src={ `/assets/images/${data.authorImg}`} alt=\"\" /></Link>\n                                                        <p><Link to={ data.authorLink}>{data.authorName}</Link></p>\n                                                    </div>\n                                                    <div className=\"post-date\">\n                                                        <p><i className=\"las la-calendar\"></i> {data.postDate}</p>\n                                                    </div>\n                                                    <div className=\"post-category\">\n                                                        <p><i className=\"las la-bookmark\"></i> {data.postCategory}</p>\n                                                    </div>\n                                                    <div className=\"post-comment\">\n                                                        <p><i className=\"las la-comment\"></i> ({data.commentNumber})</p>\n                                                    </div>\n                                                </div>\n                                                <div className=\"blog-title\">\n                                                    <h5><Link to={ data.postLink}>{data.postTitle}</Link></h5>\n                                                </div>\n                                            </div>\n                                        ))\n                                    }\n\n                                    <Row>\n                                        <Col md=\"12\" className=\"text-center\">\n                                            <Pagination />\n                                        </Col>\n                                    </Row>\n                                </Col>\n                                <Col lg=\"3\" md=\"4\" sm=\"5\">\n                                    <BlogSidebar />\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default BlogClassic","import React, { Component } from 'react';\nimport Datas from '../../data/blog/grid.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport Pagination from './../../components/Pagination';\nimport BlogSidebar from './components/BlogSidebar';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/blog.js';\n\nclass BlogGrid extends Component {\n\n    render() {\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper blog-grid-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"Blog Grid\" />\n\n                    {/* Blog Classic */}\n                    <section className=\"blog-grid-area\">\n                        <Container>\n                            <Row>\n                                <Col lg=\"9\" md=\"8\" sm=\"7\">\n                                    <Row>\n                                        {\n                                            Datas.map((data, i) => (\n                                                <Col lg=\"6\" md=\"12\" key={i}>\n                                                    <div className=\"blog-item\">\n                                                        <div className=\"blog-img\">\n                                                            <Link to={ data.postLink}><img src={ `/assets/images/${data.postImg}`} alt=\"\" className=\"img-fluid\" /></Link>\n                                                        </div>\n                                                        <div className=\"blog-content\">\n                                                            <div className=\"blog-auth_date d-flex\">\n                                                                <div className=\"author-img d-flex\">\n                                                                    <Link to={ data.authorLink}><img src={ `/assets/images/${data.authorImg}`} alt=\"\" /></Link>\n                                                                    <p><Link to={ data.authorLink}>{data.authorName}</Link></p>\n                                                                </div>\n                                                                <div className=\"post-date\">\n                                                                    <p><i className=\"las la-calendar\"></i> {data.postDate}</p>\n                                                                </div>\n                                                            </div>\n                                                            <div className=\"blog-title\">\n                                                                <h6><Link to={ data.postLink}>{data.postTitle}</Link></h6>\n                                                            </div>\n                                                            <div className=\"blog-desc\">\n                                                                <p>{data.postDesc}</p>\n                                                            </div>\n                                                        </div>\n\n                                                    </div>\n                                                </Col>\n                                            ))\n                                        }\n                                    </Row>\n\n                                    <div className=\"text-center\">\n                                        <Pagination />\n                                    </div>\n                                </Col>\n                                <Col lg=\"3\" md=\"4\" sm=\"5\">\n                                    <BlogSidebar />\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default BlogGrid","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .blog-comment-form {\n        h5 {\n            color: ${colors.black2};\n            font-weight: 600;\n            padding-bottom: 10px;\n            margin-bottom: 25px;\n            position: relative;\n            &:before {\n                position: absolute;\n                content: \"\";\n                background: ${colors.green};\n                width: 50px;\n                height: 2px;\n                bottom: 0;\n                left: 0;\n            }\n        }\n\n        form.form {\n            .star-rating {\n                display: inline-block;\n                margin-bottom: 15px;\n\n                input {\n                    display: none;\n                }\n\n                label {\n                    font-size: 30px;\n                    color: ${colors.text4};\n                    margin-right: 5px;\n                    float: right;\n                    transition: all 0.1s ease;\n                    cursor: pointer;\n                }\n\n                input:checked ~ label,\n                input:not(:checked) ~ label:hover,\n                input:not(:checked) ~ label:hover ~ label{\n                    color: ${colors.yellow};\n                }\n            }\n\n            p.form-control {\n                padding   : 0;\n                width     : auto;\n                height    : auto;\n                background: transparent;\n                border    : none;\n                margin-bottom : 30px;\n                position  : relative;\n\n                textarea {\n                    width           : 100%;\n                    height          : 150px;\n                    background      : transparent;\n                    border          : 1px solid ${colors.border3};\n                    font-size       : 15px;\n                    padding         : 15px 20px;\n                    color           : ${colors.black2};\n                    border-radius   : 5px;\n\n                    &:focus {\n                        border-color: ${colors.green};\n                    }\n\n                    &::placeholder {\n                        font-size  : 15px;\n                        color      : ${colors.text2};\n                    }\n                }\n\n                input {\n                    width           : 100%;\n                    height          : 50px;\n                    background      : transparent;\n                    border          : 1px solid ${colors.border3};\n                    font-size       : 15px;\n                    padding         : 15px 20px;\n                    color           : ${colors.black2};\n                    border-radius   : 5px;\n\n                    &:focus {\n                        border-color: ${colors.green};\n                    }\n\n                    &::placeholder {\n                        font-size  : 15px;\n                        color      : ${colors.text2};\n                    }\n                }\n\n                span {\n                    color      : ${colors.red};\n                    font-weight: 500;\n                    position   : absolute;\n                    bottom     : -22px;\n                    left       : 0;\n                    visibility : hidden;\n                }\n            }\n\n            p.form-control.success {\n                textarea,\n                input {\n                    border: 2px solid ${colors.green};\n                }\n\n                &::before {\n                    position   : absolute;\n                    content    : \"\\f058\";\n                    font-family: \"Line Awesome Free\";\n                    font-size  : 24px;\n                    color      : ${colors.green};\n                    font-weight: 900;\n                    top        : 8px;\n                    right      : 10px;\n                }\n            }\n\n            p.form-control.error {\n                textarea,\n                input {\n                    border: 2px solid ${colors.red};\n                }\n\n                &::before {\n                    position   : absolute;\n                    content    : \"\\f06a\";\n                    font-family: \"Line Awesome Free\";\n                    font-size  : 24px;\n                    color      : ${colors.red};\n                    font-weight: 900;\n                    top        : 8px;\n                    right      : 10px;\n                }\n            }\n\n            p.form-control.error {\n                span {\n                    visibility: visible;\n                }\n            }\n\n            button {\n                font-size : 15px;\n                color     : #fff;\n                background: ${colors.gr_bg};\n                width     : 200px;\n                height    : 50px;\n                border    : none;\n                font-weight: 500;\n                border-radius : 5px;\n                margin-top: 5px;\n\n                &:hover {\n                    background: ${colors.gr_bg2};\n                }\n            }\n        }\n    }\n`;","import React, { useEffect } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport { Styles } from '../styles/commentForm.js';\n\nfunction CommentForm() {\n    useEffect(() => {\n        const form = document.getElementById(\"comment_form\");\n        const desc = document.getElementById(\"comment_form-desc\");\n        const name = document.getElementById(\"comment_form-name\");\n        const email = document.getElementById(\"comment_form-email\");\n\n        form.addEventListener(\"submit\", formSubmit);\n\n        function formSubmit(e) {\n            e.preventDefault();\n\n            const descValue = desc.value.trim();\n            const nameValue = name.value.trim();\n            const emailValue = email.value.trim();\n\n            if (descValue === \"\") {\n                setError(desc, \"Comment can't be blank\");\n            } else {\n                setSuccess(desc);\n            }\n\n            if (nameValue === \"\") {\n                setError(name, \"Name can't be blank\");\n            } else {\n                setSuccess(name);\n            }\n\n            if (emailValue === \"\") {\n                setError(email, \"Email can't be blank\");\n            } else if (!isEmail(emailValue)) {\n                setError(email, \"Not a valid email\");\n            } else {\n                setSuccess(email);\n            }\n        }\n\n        function setError(input, message) {\n            const formControl = input.parentElement;\n            const errorMsg = formControl.querySelector(\".comment_form-input-msg\");\n            formControl.className = \"form-control error\";\n            errorMsg.innerText = message;\n        }\n\n        function setSuccess(input) {\n            const formControl = input.parentElement;\n            formControl.className = \"form-control success\";\n        }\n\n        function isEmail(email) {\n            return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$/.test(email);\n        }\n    });\n\n    return (\n        <Styles>\n            {/* Comment Form */}\n            <div className=\"blog-comment-form\">\n                <h5>Leave a message here</h5>\n                <form id=\"comment_form\" className=\"form\">\n                    <Row>\n                        <Col md=\"12\">\n                            <p className=\"form-control\">\n                                <textarea name=\"comment\" id=\"comment_form-desc\" placeholder=\"Enter your comment\"></textarea>\n                                <span className=\"comment_form-input-msg\"></span>\n                            </p>\n                        </Col>\n                        <Col md=\"6\">\n                            <p className=\"form-control\">\n                                <input type=\"name\" placeholder=\"Enter your name\" id=\"comment_form-name\" />\n                                <span className=\"comment_form-input-msg\"></span>\n                            </p>\n                        </Col>\n                        <Col md=\"6\">\n                            <p className=\"form-control\">\n                                <input type=\"email\" placeholder=\"Enter your email\" id=\"comment_form-email\" />\n                                <span className=\"comment_form-input-msg\"></span>\n                            </p>\n                        </Col>\n                        <Col md=\"12\">\n                            <button>Post Comment</button>\n                        </Col>\n                    </Row>\n                </form>\n            </div>\n        </Styles>\n    )\n}\n\nexport default CommentForm","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\"\n\nexport const Styles = styled.div`\n    .blog-details-page {\n        .blog-details-area {\n            padding : 70px 0;\n            .blog-details-box {\n                .blog-details-banner {\n                    img {\n                        border-radius: 5px;\n                        margin-bottom: 20px;\n                    }\n                }\n\n                .heading {\n                    h4 {\n                        color : ${colors.black1};\n                        font-weight: 600;\n                        line-height: 35px;\n                        margin-bottom: 25px;\n\n                        @media(max-width: 575px) {\n                            font-size: 20px;\n                        }\n                    }\n                }\n\n                .blog-auth_date {\n                    margin-bottom: 15px;\n                    .author-img {\n                        margin-right : 20px;\n                        a {\n                            img {\n                                max-width: 40px;\n                                border-radius: 50%;\n                                margin-right: 10px;\n                                margin-top: -9px;\n                            }\n                        }\n                        p {\n                            a {\n                                font-size: 14px;\n                                color: ${colors.green};\n                                font-weight: 500;\n                                &:hover {\n                                    color: ${colors.black1};\n                                }\n                            }\n                        }\n                    }\n\n                    .post-date,\n                    .post-category,\n                    .post-comment {\n                        margin-right: 20px;\n                        p {\n                            font-size : 14px;\n                            color: ${colors.text2};\n                            font-weight: 500;\n                            i {\n                                font-size : 20px;\n                                color: ${colors.green};\n                                vertical-align: top;\n                            }\n\n                            a {\n                                font-size : 14px;\n                                color: ${colors.text2};\n                                font-weight: 500;\n                                &:hover {\n                                    color: ${colors.green};\n                                }\n                            }\n                        }\n\n                        @media(max-width: 767px) {\n                            margin-right: 8px;\n                        }\n                    }\n\n                    .post-category,\n                    .post-comment {\n                        @media(max-width: 767px) {\n                            display: none;\n                        }\n                    }\n                }\n\n                .blog-details-desc {\n                    margin-bottom: 45px;\n                    p {\n                        font-size: 15px;\n                        color: ${colors.text2};\n                        line-height: 25px;\n                        span {\n                            background : ${colors.border1};\n                            color: ${colors.black2};\n                            display : block;\n                            margin: 35px 0;\n                            padding: 22px 28px;\n                            border-radius: 5px;\n                            position: relative;\n                            i {\n                                position: absolute;\n                                top: -20px;\n                                left: 50%;\n                                margin-left: -20px;\n                                font-size : 30px;\n                                color : #ffffff;\n                                background : ${colors.gr_bg};\n                                width: 42px;\n                                height: 42px;\n                                text-align: center;\n                                border-radius: 50%;\n                                padding-top: 7px;\n                            }\n                        }\n                    }\n                    ul {\n                        margin-top : 30px;\n                        li {\n                            font-size: 14px;\n                            color: ${colors.text3};\n                            line-height: 25px;\n                            margin-bottom: 15px;\n                            i {\n                                float: left;\n                                color: ${colors.green};\n                                border: 1px solid ${colors.border3};\n                                width: 35px;\n                                height: 35px;\n                                border-radius: 50%;\n                                text-align: center;\n                                padding-top: 9px;\n                                margin-top: 8px;\n                                margin-right: 15px;\n                            }\n                            &:last-child {\n                                margin-bottom: 0;\n                            }\n                        }\n                    }\n                }\n\n                .blog-tag_share {\n                    margin-bottom: 45px;\n                    .blog-tag {\n                        ul.tags {\n                            li {\n                                color : ${colors.text3};\n                                a {\n                                    font-size: 14px;\n                                    color: ${colors.text2};\n                                    &:hover {\n                                        color: ${colors.green};\n                                    }\n                                }\n                                &:first-child {\n                                    font-size: 15px;\n                                    color: ${colors.black1};\n                                    font-weight: 500;\n                                }\n                            }\n                        }\n\n                        @media(max-width: 767px) {\n                            margin-bottom: 20px;\n                        }\n                    }\n                    .blog-share {\n                        ul.social {\n                            li {\n                                a {\n                                    text-align: center;\n                                    position  : relative;\n                                    height    : 18px;\n                                    display   : inline-block;\n\n                                    &:before {\n                                        content           : \"\";\n                                        position          : absolute;\n                                        border-width      : 9px 17px;\n                                        border-style      : solid;\n                                        border-top-color  : transparent;\n                                        border-right-color: transparent;\n                                        border-left-color : transparent;\n                                        top               : -18px;\n                                        left              : 0;\n                                        z-index           : 1;\n                                        transition : all 0.2s ease;\n                                    }\n\n                                    &:after {\n                                        content            : \"\";\n                                        position           : absolute;\n                                        border-width       : 9px 17px;\n                                        border-style       : solid;\n                                        border-right-color : transparent;\n                                        border-bottom-color: transparent;\n                                        border-left-color  : transparent;\n                                        bottom             : -18px;\n                                        left               : 0;\n                                        z-index            : 1;\n                                        transition : all 0.2s ease;\n                                    }\n\n                                    i {\n                                        font-size: 14px;\n                                        color    : #ffffff;\n                                        width    : 34px;\n                                    }\n\n                                    &:hover {\n                                        background-color: ${colors.green} !important;\n\n                                        &:before {\n                                            border-bottom-color: ${colors.green} !important;\n                                        }\n\n                                        &:after {\n                                            border-top-color: ${colors.green} !important;\n                                        }\n                                    }\n                                }\n\n                                &:nth-child(1) {\n                                    font-size: 15px;\n                                    color: ${colors.black1};\n                                    font-weight: 500;\n                                }\n\n                                &:nth-child(2) {\n                                    a {\n                                        background-color: #4267B2;\n\n                                        &:before {\n                                            border-bottom-color: #4267B2;\n                                        }\n\n                                        &:after {\n                                            border-top-color: #4267B2;\n                                        }\n                                    }\n                                }\n\n                                &:nth-child(3) {\n                                    a {\n                                        background-color: #1DA1F2;\n\n                                        &:before {\n                                            border-bottom-color: #1DA1F2;\n                                        }\n\n                                        &:after {\n                                            border-top-color: #1DA1F2;\n                                        }\n                                    }\n                                }\n\n                                &:nth-child(4) {\n                                    a {\n                                        background-color: #2867B2;\n\n                                        &:before {\n                                            border-bottom-color: #2867B2;\n                                        }\n\n                                        &:after {\n                                            border-top-color: #2867B2;\n                                        }\n                                    }\n                                }\n\n                                &:nth-child(5) {\n                                    a {\n                                        background-color: #DD1343;\n\n                                        &:before {\n                                            border-bottom-color: #DD1343;\n                                        }\n\n                                        &:after {\n                                            border-top-color: #DD1343;\n                                        }\n                                    }\n                                }\n\n                                &:nth-child(6) {\n                                    a {\n                                        background-color: #ea4c89;\n\n                                        &:before {\n                                            border-bottom-color: #ea4c89;\n                                        }\n\n                                        &:after {\n                                            border-top-color: #ea4c89;\n                                        }\n                                    }\n                                }\n                            }\n                        }\n\n                        @media(max-width: 767px) {\n                            margin-bottom: 20px;\n                        }\n                    }\n\n                    @media(max-width: 767px) {\n                        margin-bottom: 30px;\n                        display: unset !Important;\n                    }\n                }\n\n                .blog-comments {\n                    margin-bottom: 45px;\n                    h5 {\n                        color: ${colors.black2};\n                        font-weight: 600;\n                        padding-bottom: 10px;\n                        margin-bottom: 35px;\n                        position: relative;\n                        &:before {\n                            position: absolute;\n                            content: \"\";\n                            background: ${colors.green};\n                            width: 50px;\n                            height: 2px;\n                            bottom: 0;\n                            left: 0;\n                        }\n                    }\n                    .comment-box {\n                        border-bottom: 1px solid ${colors.border1};\n                        padding-bottom: 20px;\n                        margin-bottom: 25px;\n                        .comment-image {\n                            img {\n                                max-width : 80px;\n                                border-radius : 5px;\n                                margin-right : 20px;\n                            }\n                        }\n                        .comment-content {\n                            .content-title {\n                                .comment-writer {\n                                    h6 {\n                                        color: ${colors.black2};\n                                        font-weight: 600;\n                                        margin-bottom : 10px;\n                                    }\n                                    p {\n                                        font-size : 12px;\n                                        color: ${colors.text3};\n                                        margin-bottom: 5px;\n                                    }\n                                }\n                                .reply-btn {\n                                    button {\n                                        font-size : 14px;\n                                        color: ${colors.green};\n                                        background : transparent;\n                                        border : 1px solid ${colors.border3};\n                                        font-weight: 500;\n                                        border-radius: 25px;\n                                        padding: 4px 12px 3px;\n                                        margin-top : 3px;\n                                        i {\n                                            font-size: 17px;\n                                            vertical-align: text-top;\n                                        }\n                                        &:hover {\n                                            color : #ffffff;\n                                            background : ${colors.gr_bg};\n                                            border-color : ${colors.green};\n                                        }\n                                    }\n                                }\n                            }\n                            .comment-desc {\n                                p {\n                                    font-size: 14px;\n                                    color: ${colors.text2};\n                                    line-height: 25px;\n                                }\n                            }\n                        }\n                        &:last-child {\n                            border-bottom : none;\n                            padding-bottom : 0;\n                            margin-bottom : 0;\n                        }\n                    }\n                }\n\n                .blog-comment-form {\n                    form {\n                        @media(max-width: 575px) {\n                            margin-bottom: 30px;\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding: 35px 0;\n            }\n\n            @media(max-width: 575px) {\n                padding-bottom: 0;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport BlogSidebar from './components/BlogSidebar';\nimport CommentForm from './components/CommentForm';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/blogDetails.js';\n\nclass BlogDetails extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper blog-details-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"Blog Details\" />\n\n                    {/* Blog Details */}\n                    <section className=\"blog-details-area\">\n                        <Container>\n                            <Row>\n                                <Col lg=\"9\" md=\"8\" sm=\"7\">\n                                    <div className=\"blog-details-box\">\n                                        <div className=\"blog-details-banner\">\n                                            <img src={ `/assets/images/blog_c-04.jpg`} alt=\"\" className=\"img-fluid\" />\n                                        </div>\n                                        <div className=\"heading\">\n                                            <h4>International students coming in Uk from Asian subcontinant for better education.</h4>\n                                        </div>\n                                        <div className=\"blog-auth_date d-flex\">\n                                            <div className=\"author-img d-flex\">\n                                                <Link to={ \"/\"}><img src={ `/assets/images/author.jpg`} alt=\"\" /></Link>\n                                                <p><Link to={ \"/\"}>Medison Azar</Link></p>\n                                            </div>\n                                            <div className=\"post-date\">\n                                                <p><i className=\"las la-calendar\"></i> April 23, 2020</p>\n                                            </div>\n                                            <div className=\"post-category\">\n                                                <p><Link to={ \"/\"}><i className=\"las la-bookmark\"></i> Web Design</Link></p>\n                                            </div>\n                                            <div className=\"post-comment\">\n                                                <p><Link to={ \"/\"}><i className=\"las la-comment\"></i> (23)</Link></p>\n                                            </div>\n                                        </div>\n                                        <div className=\"blog-details-desc\">\n                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nesciunt harum facilis odit inventore molestias qui asperiores recusandae architecto mollitia provident ipsa unde, praesentium impedit enim voluptate ducimus, saepe autem. Lorem ipsum dolor sit, amet consectetur adipisicing elit.<br /><br />Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda optio sequi suscipit et modi! Corporis obcaecati rerum et, explicabo inventore, aliquid, odit modi harum libero culpa distinctio. Nemo, aliquid dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio earum accusantium quam eius dignissimos quaerat voluptatem excepturi aliquid dolor ducimus. Illo porro maiores fuga dignissimos temporibus odio nulla nobis nemo. Lorem ipsum dolor sit amet consectetur adipisicing elit. <span><i className=\"las la-quote-right\"></i>Nemo, aliquid dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio earum accusantium quam eius dignissimos quaerat voluptatem excepturi aliquid dolor ducimus. Optio earum accusantium quam eius dignissimos quaerat voluptatem excepturi aliquid dolor ducimus.</span>Assumenda optio sequi suscipit et modi! Corporis obcaecati rerum et, explicabo inventore, aliquid, odit modi harum libero culpa distinctio. Nemo, aliquid dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>\n                                            <ul className=\"list-unstyled\">\n                                                <li><i className=\"fa fa-check\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi.</li>\n                                                <li><i className=\"fa fa-check\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi.</li>\n                                                <li><i className=\"fa fa-check\"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum amet quo eius saepe et quis necessitatibus hic natus facere Quae impedit eligendi perspiciatis animi maxime ab minus corporis omnis similique excepturi.</li>\n                                            </ul>\n                                        </div>\n                                        <div className=\"blog-tag_share d-flex justify-content-between\">\n                                            <div className=\"blog-tag\">\n                                                <ul className=\"tags list-unstyled list-inline\">\n                                                    <li className=\"list-inline-item\">Tags:</li>\n                                                    <li className=\"list-inline-item\"><Link to={ \"/\"}>Html</Link>,</li>\n                                                    <li className=\"list-inline-item\"><Link to={ \"/\"}>Design</Link>,</li>\n                                                    <li className=\"list-inline-item\"><Link to={ \"/\"}>Develop</Link>,</li>\n                                                    <li className=\"list-inline-item\"><Link to={ \"/\"}>React</Link></li>\n                                                </ul>\n                                            </div>\n                                            <div className=\"blog-share\">\n                                                <ul className=\"social list-unstyled list-inline\">\n                                                    <li className=\"list-inline-item\">Share:</li>\n                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-facebook-f\"></i></a></li>\n                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-twitter\"></i></a></li>\n                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-linkedin-in\"></i></a></li>\n                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-youtube\"></i></a></li>\n                                                    <li className=\"list-inline-item\"><a href={ \"/\"}><i className=\"fab fa-dribbble\"></i></a></li>\n                                                </ul>\n                                            </div>\n                                        </div>\n                                        <div className=\"blog-comments\">\n                                            <h5>Comments (03)</h5>\n                                            <div className=\"comment-box d-flex\">\n                                                <div className=\"comment-image\">\n                                                    <img src={ `/assets/images/testimonial-2.jpg`} alt=\"\" />\n                                                </div>\n                                                <div className=\"comment-content\">\n                                                    <div className=\"content-title d-flex justify-content-between\">\n                                                        <div className=\"comment-writer\">\n                                                            <h6>Mark Shadow</h6>\n                                                            <p>Mar 26, 2020 | 06:30pm</p>\n                                                        </div>\n                                                        <div className=\"reply-btn\">\n                                                            <button type=\"button\"><i className=\"las la-reply-all\"></i> Reply</button>\n                                                        </div>\n                                                    </div>\n                                                    <div className=\"comment-desc\">\n                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum quas placeat perspiciatis est, nisi expedita consectetur sit minus illum laudantium nostrum dolore odit asperiores quisquam ad enim iusto laborum quas placeat perspiciatis saepe.</p>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div className=\"comment-box d-flex\">\n                                                <div className=\"comment-image\">\n                                                    <img src={ `/assets/images/testimonial-1.jpg`} alt=\"\" />\n                                                </div>\n                                                <div className=\"comment-content\">\n                                                    <div className=\"content-title d-flex justify-content-between\">\n                                                        <div className=\"comment-writer\">\n                                                            <h6>Katrin Kay</h6>\n                                                            <p>Mar 26, 2020 | 06:30pm</p>\n                                                        </div>\n                                                        <div className=\"reply-btn\">\n                                                            <button type=\"button\"><i className=\"las la-reply-all\"></i> Reply</button>\n                                                        </div>\n                                                    </div>\n                                                    <div className=\"comment-desc\">\n                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum quas placeat perspiciatis est, nisi expedita consectetur sit minus illum laudantium nostrum dolore odit asperiores quisquam ad enim iusto laborum quas placeat perspiciatis saepe.</p>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div className=\"comment-box d-flex\">\n                                                <div className=\"comment-image\">\n                                                    <img src={ `/assets/images/testimonial-2.jpg`} alt=\"\" />\n                                                </div>\n                                                <div className=\"comment-content\">\n                                                    <div className=\"content-title d-flex justify-content-between\">\n                                                        <div className=\"comment-writer\">\n                                                            <h6>David Show</h6>\n                                                            <p>Mar 26, 2020 | 06:30pm</p>\n                                                        </div>\n                                                        <div className=\"reply-btn\">\n                                                            <button type=\"button\"><i className=\"las la-reply-all\"></i> Reply</button>\n                                                        </div>\n                                                    </div>\n                                                    <div className=\"comment-desc\">\n                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum quas placeat perspiciatis est, nisi expedita consectetur sit minus illum laudantium nostrum dolore odit asperiores quisquam ad enim iusto laborum quas placeat perspiciatis saepe.</p>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n\n                                        <CommentForm />\n                                    </div>\n                                </Col>\n                                <Col lg=\"3\" md=\"4\" sm=\"5\">\n                                    <BlogSidebar />\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default BlogDetails","import styled from \"styled-components\";\nimport { colors } from './../../../components/common/element/elements.js';\n\nexport const Styles = styled.div`\n    /* Course Price */\n    .price-filter {\n        border : 1px solid ${colors.border1};\n        padding: 15px 20px 20px;\n        border-radius : 5px;\n        h5 {\n            color : ${colors.black1};\n            font-weight : 600;\n            padding-bottom: 10px;\n            margin-bottom: 20px;\n            position : relative;\n            &:before {\n                position : absolute;\n                content : \"\";\n                background : ${colors.green};\n                width : 50px;\n                height: 2px;\n                bottom : 0;\n                left : 0;\n            }\n\n            @media(max-width: 575px) {\n                font-size  : 17px;\n            }\n        }\n        ul.filter-item {\n            li.check-btn {\n                border-top : 1px dashed ${colors.border3};\n                padding: 10px 0;\n\n                &:last-child {\n                    border-bottom : 1px dashed ${colors.border3};\n                }\n\n                label {\n                    font-size: 14px;\n                    color: ${colors.text3};\n                    display: block;\n                    margin-bottom : 4px;\n                    cursor: pointer;\n\n                    input[type=checkbox] {\n                        border : 2px solid ${colors.border3};\n                        appearance: none;\n                        width: 18px;\n                        height: 18px;\n                        cursor: pointer;\n                        margin-right: 12px;\n                        position: relative;\n                        top: 4px;\n\n                        &:focus {\n                            outline: none;\n                        }\n\n                        &:checked {\n                            background-color: ${colors.green};\n                            background: ${colors.green} url(\"data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==\") 2px 2px no-repeat;\n                            border-color : ${colors.green};\n                        }\n                    }\n\n                    span {\n                        float : right;\n                        font-size: 12px;\n                        color: ${colors.text2};\n                        line-height: 27px;\n                    }\n                }\n            }\n        }\n\n        @media(max-width: 1199px) {\n            padding : 12px 15px 18px;\n        }\n    }\n`;","import React, { Component } from 'react';\nimport { Styles } from '../styles/priceFilter.js';\n\nclass PriceFilter extends Component {\n\n    render() {\n        return (\n            <Styles>\n                {/* Price Filter */}\n                <div className=\"price-filter\">\n                    <h5>Price Filter</h5>\n                    <ul className=\"filter-item list-unstyled\">\n                        <li className=\"check-btn\">\n                            <label htmlFor=\"price1\"><input type=\"checkbox\" id=\"price1\" className=\"check-box\" />$0.00 - $99.00</label>\n                        </li>\n                        <li className=\"check-btn\">\n                            <label htmlFor=\"price2\"><input type=\"checkbox\" id=\"price2\" className=\"check-box\" />$100.00 - $199.00</label>\n                        </li>\n                        <li className=\"check-btn\">\n                            <label htmlFor=\"price3\"><input type=\"checkbox\" id=\"price3\" className=\"check-box\" />$200.00 - $299.00</label>\n                        </li>\n                        <li className=\"check-btn\">\n                            <label htmlFor=\"price4\"><input type=\"checkbox\" id=\"price4\" className=\"check-box\" />$300.00 - $399.00</label>\n                        </li>\n                    </ul>\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default PriceFilter\n","import React, { Component } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport CourseSearch from './../../courses/components/CourseSearch';\nimport PriceFilter from './PriceFilter';\nimport PopularCourse from './../../courses/components/PopularCourse';\nimport CourseTag from './../../courses/components/CourseTag';\n\nclass ShopSidebar extends Component {\n    render() {\n        return (\n            <div className=\"course-sidebar\">\n                <Row>\n                    <Col md=\"12\">\n                        <CourseSearch />\n                    </Col>\n                    <Col md=\"12\">\n                        <PriceFilter />\n                    </Col>\n                    <Col md=\"12\">\n                        <PopularCourse />\n                    </Col>\n                    <Col md=\"12\">\n                        <CourseTag />\n                    </Col>\n                </Row>\n            </div>\n        )\n    }\n}\n\nexport default ShopSidebar\n","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .product-page {\n        .product-area {\n            padding : 70px 0;\n            .product-box {\n                border: 1px solid ${colors.border1};\n                border-radius: 5px;\n                transition: all 0.2s ease;\n                margin-bottom: 30px;\n                .product-img {\n                    position: relative;\n                    overflow : hidden;\n                    img {\n                        transform: scale(1);\n                        transition: 0.3s ease;\n                    }\n                    span {\n                        position: absolute;\n                        content : '';\n                        background : ${colors.gr_bg};\n                        width: 55px;\n                        height: 55px;\n                        text-align: center;\n                        left: 15px;\n                        top: 15px;\n                        font-size: 18px;\n                        color: #fff;\n                        font-weight: 600;\n                        padding-top: 15px;\n                        border-radius: 50%;\n                    }\n                    .layer-box {\n                        position: absolute;\n                        background: rgba(255, 255, 255, 0.8);\n                        width: 100%;\n                        height: 100%;\n                        top: 0;\n                        left: 0;\n                        visibility: hidden;\n                        opacity: 0;\n                        z-index: -1;\n                        transition: 0.3s ease;\n                    }\n                    a.add_cart {\n                        position: absolute;\n                        font-size : 15px;\n                        top : 33%;\n                        left : 100%;\n                        z-index : 1;\n                        background: transparent;\n                        border : 2px solid ${colors.green};\n                        font-size: 13px;\n                        color: ${colors.green};\n                        font-weight: 600;\n                        text-transform: uppercase;\n                        width: 120px;\n                        height: 38px;\n                        border-radius: 5px;\n                        padding-top: 8px;\n                        text-align: center;\n                        transition: 0.2s ease;\n                        &:hover {\n                            background: ${colors.gr_bg};\n                            color : #ffffff;\n                        }\n\n                        @media(max-width: 1199px) {\n                            top: 30%;\n                        }\n\n                        @media(max-width: 767px) {\n                            top: 35%;\n                        }\n                    }\n                    a.item_view {\n                        position: absolute;\n                        font-size : 15px;\n                        bottom : 33%;\n                        right : 100%;\n                        z-index : 1;\n                        background: transparent;\n                        border : 2px solid ${colors.black1};\n                        font-size: 13px;\n                        color: ${colors.black1};\n                        font-weight: 600;\n                        text-transform: uppercase;\n                        width: 120px;\n                        height: 38px;\n                        border-radius: 5px;\n                        padding-top: 8px;\n                        text-align: center;\n                        transition: 0.2s ease;\n                        &:hover {\n                            background: ${colors.black1};\n                            color : #ffffff;\n                        }\n\n                        @media(max-width: 1199px) {\n                            bottom: 30%;\n                        }\n\n                        @media(max-width: 767px) {\n                            bottom: 35%;\n                        }\n                    }\n                    &:hover {\n                        img {\n                            transform: scale(1.1);\n                        }\n                        .layer-box {\n                            visibility: visible;\n                            z-index: 1;\n                            opacity: 1;\n                        }\n                        a.add_cart {\n                            left: 35%;\n                            margin-left: -22px;\n\n                            @media(max-width: 1199px) {\n                                left: 32%;\n                                margin-left: -22px;\n                            }\n\n                            @media(max-width: 767px) {\n                                left: 50%;\n                                margin-left: -60px;\n                            }\n                        }\n                        a.item_view {\n                            right : 35%;\n                            margin-right: -22px;\n\n                            @media(max-width: 1199px) {\n                                right: 32%;\n                                margin-right: -24px;\n                            }\n\n                            @media(max-width: 767px) {\n                                right: 50%;\n                                margin-right: -60px;\n                            }\n                        }\n                    }\n                }\n\n                .product-content {\n                    padding : 15px 0;\n                    .pro-title {\n                        margin-bottom: 6px;\n                        h5 {\n                            a {\n                                color : ${colors.black1};\n                                font-weight: 600;\n                                &:hover {\n                                    color : ${colors.green};\n                                }\n                            }\n                        }\n                    }\n                    .pro-rating {\n                        margin-bottom: 6px;\n                        ul {\n                            li {\n                                margin-right: 1px;\n                                i {\n                                    font-size: 15px;\n                                    color: ${colors.yellow};\n                                }\n                                &:last-child {\n                                    margin-right: 0;\n                                }\n                            }\n                        }\n                    }\n\n                    .pro-price {\n                        p {\n                            font-size : 16px;\n                            color: ${colors.green};\n                            font-weight: 500;\n                        }\n                    }\n                }\n\n                &:hover {\n                    box-shadow: 0 12px 25px rgba(0,0,0,0.07);\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding : 35px 0 30px;\n            }\n\n            @media(max-width: 575px) {\n                padding-bottom : 0;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../../data/shop/product.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport Pagination from './../../components/Pagination';\nimport ShopSidebar from './components/ShopSidebar';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/product.js';\n\nclass Product extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper product-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"Products\" />\n\n                    {/* Products */}\n                    <section className=\"product-area\">\n                        <Container>\n                            <Row>\n                                <Col lg=\"9\" md=\"8\" sm=\"7\">\n                                    <Row>\n                                        {\n                                            Datas.map((data, i) => (\n                                                <Col lg=\"4\" md=\"6\" key={i}>\n                                                    <div className=\"product-box\">\n                                                        <div className=\"product-img\">\n                                                            <img src={ `/assets/images/${data.productImg}`} alt=\"\" className=\"img-fluid\" />\n                                                            <span>{data.discount}</span>\n                                                            <div className=\"layer-box\"></div>\n                                                            <Link className=\"add_cart\" to={ data.productUrl}>Add To Cart</Link>\n                                                            <Link className=\"item_view\" to={ data.productUrl}>View Item</Link>\n                                                        </div>\n                                                        <div className=\"product-content text-center\">\n                                                            <div className=\"pro-title\">\n                                                                <h5><Link to={ data.productUrl}>{data.productTitle}</Link></h5>\n                                                            </div>\n                                                            <div className=\"pro-rating\">\n                                                                <ul className=\"list-unstyled list-inline\">\n                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                    <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                    <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i></li>\n                                                                </ul>\n                                                            </div>\n                                                            <div className=\"pro-price\">\n                                                                <p>{data.price}</p>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </Col>\n                                            ))\n                                        }\n\n                                        <Col md=\"12\" className=\"text-center\">\n                                            <Pagination />\n                                        </Col>\n                                    </Row>\n                                </Col>\n\n                                <Col lg=\"3\" md=\"4\" sm=\"5\">\n                                    <ShopSidebar />\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default Product","import styled from \"styled-components\";\nimport { colors } from './../../../components/common/element/elements.js';\n\nexport const Styles = styled.div`\n    .product-qty {\n        margin-bottom : 20px;\n        ul {\n            li {\n                &:nth-child(1) {\n                    font-size : 14px;\n                    color: ${colors.text2};\n                    vertical-align: middle;\n                    margin-right: 10px;\n                }\n                &:nth-child(2) {\n                    display: inline-block;\n                    border: 1px solid ${colors.border3};\n                    padding: 0 5px;\n                    border-radius: 5px;\n                    input#minus {\n                        width: 25px;\n                        height: 32px;\n                        padding: 3px 10px;\n                        background: #ffffff;\n                        border: none;\n                        cursor: pointer;\n                    }\n                    input#count {\n                        width: 35px;\n                        height: 32px;\n                        text-align: center;\n                        background-color: transparent;\n                        border: none;\n                        border-left: 1px solid ${colors.border3};\n                        border-right: 1px solid ${colors.border3};\n                        font-weight: 500;\n                    }\n                    input#plus {\n                        width: 25px;\n                        height: 32px;\n                        padding: 3px 10px;\n                        background: #ffffff;\n                        border: none;\n                        cursor: pointer;\n                    }\n                }\n            }\n        }\n    }\n`;","import React, { useEffect } from 'react';\nimport { Styles } from '../styles/quantity.js';\n\nfunction Quantity() {\n    useEffect(() => {\n        const plus = document.getElementById(\"plus\");\n        const minus = document.getElementById(\"minus\");\n        const input = document.getElementById(\"count\");\n\n        plus.addEventListener(\"click\", () => {\n            input.value = parseInt(input.value) + 1;\n        });\n\n        minus.addEventListener(\"click\", () => {\n            if (input.value > 1) {\n                input.value = parseInt(input.value) - 1;\n            }\n        });\n    });\n\n    return (\n        <Styles>\n            <div className=\"product-qty\">\n                <ul className=\"list-unstyled list-inline\">\n                    <li className=\"list-inline-item\">Qty :</li>\n                    <li className=\"list-inline-item\" id=\"qty-input\">\n                        <input type=\"button\" defaultValue=\"-\" id=\"minus\" />\n                        <input type=\"text\" defaultValue=\"1\" id=\"count\" />\n                        <input type=\"button\" defaultValue=\"+\" id=\"plus\" />\n                    </li>\n                </ul>\n            </div>\n        </Styles>\n    )\n}\n\nexport default Quantity","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .product-details-page {\n        .product-details-area {\n            padding : 70px 0 65px;\n            .product-slider {\n                .carousel-root {\n                    .carousel-slider {\n                        margin-bottom: 12px;\n                        .slider-wrapper {\n                            ul.slider {\n                                \n                                li.slide {\n                                    border-radius: 5px;\n                                    overflow : hidden;\n                                    .slider-item {\n                                        img {\n                                            \n                                        }\n                                    }\n                                }\n                            }\n                        }\n                    }\n                    .thumbs-wrapper {\n                        margin : 0;\n                        ul.thumbs {\n                            li.thumb {\n                                margin-right: 11px;\n                                border: none;\n                                padding: 0;\n                                img {\n                                    border-radius: 5px;\n                                    overflow: hidden;\n                                }\n                            }\n                        }\n\n                        button.control-arrow.control-next  {\n                            opacity: 1;\n                            &:before {\n                                border-left-color : ${colors.text3};\n                            }\n                        }\n\n                        button.control-arrow.control-prev  {\n                            opacity: 1;\n                            &:before {\n                                border-right-color : ${colors.text3};\n                            }\n                        }\n                    }\n                }\n\n                @media(max-width: 767px) {\n                    margin-bottom : 25px;\n                }\n            }\n\n            .product-information {\n                margin-top : 15px;\n                .product-title {\n                    h4 {\n                        color: ${colors.black1};\n                        font-weight: 600;\n                        margin-bottom: 12px;\n\n                        @media(max-width: 575px) {\n                            font-size : 20px;\n                        }\n                    }\n                }\n                .product-rating {\n                    margin-bottom: 15px;\n                    ul.rating {\n                        li {\n                            margin-right: 1px;\n                            i {\n                                font-size: 16px;\n                                color: ${colors.yellow};\n                            }\n                        }\n                    }\n                    .review-num {\n                        margin-left : 25px;\n                        margin-top: -1px;\n                        a {\n                            font-size: 14px;\n                            color: ${colors.green};\n                            font-weight: 500;\n                            &:hover {\n                                color: ${colors.black1};\n                            }\n                        }\n                    }\n                }\n\n                .product-price {\n                    margin-bottom: 15px;\n                    p.dc-price {\n                        font-size: 26px;\n                        color: ${colors.green};\n                        font-weight: 500;\n                        letter-spacing: 0;\n\n                        @media(max-width: 575px) {\n                            font-size : 20px;\n                        }\n                    }\n                    p.ac-price {\n                        font-size: 14px;\n                        color: ${colors.text3};\n                        font-weight: normal;\n                        text-decoration: line-through;\n                        margin-left: 15px;\n                        margin-top: 12px;\n\n                        @media(max-width: 575px) {\n                            margin-top: 6px;\n                        }\n                    }\n                }\n\n                .product-desc {\n                    margin-bottom: 20px;\n                    p {\n                        font-size: 14px;\n                        color: ${colors.text3};\n                        line-height: 25px;\n                    }\n                }\n\n                .product-stock {\n                    margin-bottom: 15px;\n                    p {\n                        font-size: 14px;\n                        color: ${colors.text2};\n                        span.stock {\n                            color: ${colors.green};\n                            font-weight: 500;\n                            margin-left: 10px;\n                        }\n                        span.stock-num {\n                            font-size: 13px;\n                            color: ${colors.text3};\n                            margin-left: 12px;\n                        }\n                    }\n                }\n\n                .product-color {\n                    margin-bottom: 15px;\n                    ul {\n                        li {\n                            margin-right : 8px;\n                            &:first-child {\n                                font-size : 14px;\n                                color: ${colors.text2};\n                                vertical-align: middle;\n                                margin-right: 10px;\n                            }\n                            input[type=\"radio\"] {\n                                display: none;\n                            }\n                            input[type=\"radio\"] + label {\n                                margin-bottom: 0;\n                                span {\n                                    display: inline-block;\n                                    width: 25px;\n                                    height: 25px;\n                                    vertical-align: middle;\n                                    cursor: pointer;\n                                    border-radius: 50%;\n                                    text-align: center;\n                                    i {\n                                        font-size: 16px;\n                                        color: #ffffff;\n                                        padding-top: 5px;\n                                        opacity: 0;\n                                        transition: all 0.2s ease;\n                                    }\n                                }\n                            }\n\n                            input[type=\"radio\"]#color-1 + label {\n                                span {\n                                    background-color: ${colors.blue};\n                                }\n                            }\n                            input[type=\"radio\"]#color-2 + label {\n                                span {\n                                    background-color: ${colors.red};\n                                }\n                            }\n                            input[type=\"radio\"]#color-3 + label {\n                                span {\n                                    background-color: ${colors.yellow};\n                                }\n                            }\n                            input[type=\"radio\"]#color-4 + label {\n                                span {\n                                    background-color: ${colors.green};\n                                }\n                            }\n                            input[type=\"radio\"]#color-5 + label {\n                                span {\n                                    background-color: ${colors.black1};\n                                }\n                            }\n\n                            input[type=\"radio\"]:checked + label {\n                                span {\n                                    i {\n                                        opacity: 1; \n                                    }\n                                }\n                            }\n                        }\n                    }\n                }\n                .product-size {\n                    margin-bottom : 17px;\n                    ul {\n                        li {\n                            margin-right : 8px;\n                            &:first-child {\n                                font-size : 14px;\n                                color: ${colors.text2};\n                                vertical-align: middle;\n                                margin-right: 10px;\n                            }\n                            input[type=\"radio\"] {\n                                display: none;\n                            }\n                            input[type=\"radio\"] + label {\n                                margin-bottom: 0;\n                                display: inline-block;\n                                border: 1px solid ${colors.border3};\n                                width: 28px;\n                                height: 28px;\n                                color: ${colors.text2};\n                                font-weight: 500;\n                                vertical-align: middle;\n                                padding-top: 4px;\n                                cursor: pointer;\n                                border-radius: 5px;\n                                text-align: center;\n                                margin-bottom: 0;\n                            }\n                            input[type=\"radio\"]:checked + label {\n                                color : #ffffff;\n                                border-color: ${colors.green};\n                                background-color: ${colors.green};\n                            }\n                        }\n                    }\n                }\n\n                .product-cart-wh-com-btn {\n                    a.cart-btn {\n                        font-size : 14px;\n                        color: #ffffff;\n                        background: ${colors.gr_bg};\n                        display: inline-block;\n                        width: 120px;\n                        height: 38px;\n                        text-align: center;\n                        padding: 9px;\n                        border-radius: 5px;\n                        font-weight: 500;\n                        margin-right: 15px;\n                        &:hover {\n                            background: ${colors.gr_bg2}; \n                        }\n                    }\n                    a.wishlist-btn {\n                        border: 1px solid ${colors.border3};\n                        display: inline-block;\n                        width: 38px;\n                        height: 38px;\n                        text-align: center;\n                        font-size: 20px;\n                        color: ${colors.green};\n                        padding: 3px;\n                        vertical-align: bottom;\n                        border-radius: 5px;\n                        margin-right: 13px;\n                        &:hover {\n                            background: ${colors.gr_bg};\n                            color: #ffffff;\n                            border-color: ${colors.green};\n                        }\n                    }\n                    a.compare-btn {\n                        border: 1px solid ${colors.border3};\n                        display: inline-block;\n                        width: 38px;\n                        height: 38px;\n                        text-align: center;\n                        font-size: 20px;\n                        color: ${colors.green};\n                        padding: 3px;\n                        vertical-align: bottom;\n                        border-radius: 5px;\n                        margin-right: 12px;\n                        &:hover {\n                            background: ${colors.gr_bg};\n                            color: #ffffff;\n                            border-color: ${colors.green};\n                        }\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    margin-top : 0;\n                }\n            }\n\n            .product-tab {\n                margin-top : 40px;\n                .nav {\n                    display: inline-block;\n                    border-radius: 5px;\n                    box-shadow: 0 8px 25px rgba(0,0,0,0.1);\n                    margin-bottom: 35px;\n                    .nav-item {\n                        display: inline-block;\n                        a.nav-link {\n                            font-size: 14px;\n                            color: ${colors.black2};\n                            font-weight: 500;\n                            padding: 12px 30px 10px;\n                            border-radius: 5px;\n                        }\n                        a.nav-link.active {\n                            background : ${colors.gr_bg};\n                            color : #ffffff;\n                        }\n                    }\n                }\n\n                .tab-content {\n                    .description-tab {\n                        p {\n                            font-size: 15px;\n                            color: ${colors.text2};\n                            line-height: 25px;\n                        }   \n                    }\n\n                    .additional-tab {\n                        table.table.table-bordered {\n                            margin-bottom : 0;\n                            border: 1px solid ${colors.border1};\n                            tr {\n                                td {\n                                    border: 1px solid ${colors.border1};\n                                    font-size : 14px;\n                                    color : ${colors.text3};\n                                    padding: 12px 18px;\n                                    &:first-child {\n                                        color : ${colors.black1};\n                                    }\n                                }\n                            }\n                        }\n                    }\n\n                    .review-tab {\n                        .review-comments {\n                            margin-bottom: 40px;\n                            .comment-box {\n                                border-bottom: 1px solid ${colors.border1};\n                                padding-bottom: 20px;\n                                margin-bottom: 25px;\n                                .comment-image {\n                                    img {\n                                        max-width : 75px;\n                                        border-radius : 5px;\n                                        margin-right : 20px;\n                                    }\n                                }\n                                .comment-content {\n                                    .comment-title {\n                                        h6 {\n                                            color: ${colors.black2};\n                                            font-weight: 600;\n                                            margin-bottom : 10px;\n                                        }\n                                    }\n                                    .date-rating {\n                                        margin-bottom: 10px;\n                                        p {\n                                            font-size : 12px;\n                                            color: ${colors.text3};\n                                        }\n                                        ul {\n                                            li {\n                                                margin-right: 1px;\n                                                i {\n                                                    font-size: 16px;\n                                                    color: ${colors.yellow};\n                                                }\n                                                &:last-child {\n                                                    margin-right: 0;\n                                                }\n                                            }\n                                        }\n                                    }\n                                    .comment-desc {\n                                        p {\n                                            font-size: 14px;\n                                            color: ${colors.text2};\n                                            line-height: 27px;\n                                        }\n                                    }\n                                }\n                                &:last-child {\n                                    border-bottom : none;\n                                    padding-bottom : 0;\n                                    margin-bottom : 0;\n                                }\n                            }\n                        }\n\n                        .review-form {\n                            h5 {\n                                color: ${colors.black1};\n                                font-weight: 600;\n                                margin-bottom: 20px;\n                            }\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding: 35px 0 30px;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport Datas from '../../data/shop/details.json';\nimport { Link } from 'react-router-dom';\nimport { Container, Row, Col, Tab, Nav, Table } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport { Carousel } from \"react-responsive-carousel\";\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\";\nimport Quantity from './components/Quantity';\nimport ReviewForm from './../courses/components/ReviewForm';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/productDetails.js';\n\nclass ProductDetails extends Component {\n    render() {\n        const settings = {\n            showArrows: false,\n            showStatus: false,\n            showIndicators: false,\n        };\n\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper product-details-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"Product Details\" />\n\n                    {/* Product Details */}\n                    <section className=\"product-details-area\">\n                        <Container>\n                            <Row>\n                                <Col md=\"5\">\n                                    <div className=\"product-slider\">\n                                        <Carousel {...settings}>\n                                            {\n                                                Datas.map((data, i) => (\n                                                    <div className=\"slider-item\" key={i}>\n                                                        <img src={ `/assets/images/${data.productImg}`} alt=\"\" className=\"img-fluid\" />\n                                                    </div>\n                                                ))\n                                            }\n                                        </Carousel>\n                                    </div>\n                                </Col>\n\n                                <Col md=\"7\">\n                                    <div className=\"product-information\">\n                                        <div className=\"product-title\">\n                                            <h4>Xiaomy LED Light Bulb With Verious Model</h4>\n                                        </div>\n                                        <div className=\"product-rating d-flex\">\n                                            <ul className=\"rating list-unstyled list-inline\">\n                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i></li>\n                                            </ul>\n                                            <div className=\"review-num\">\n                                                <Link to={ \"/\"}>( 07 Review )</Link>\n                                            </div>\n                                        </div>\n                                        <div className=\"product-price d-flex\">\n                                            <p className=\"dc-price\">$139.00</p>\n                                            <p className=\"ac-price\">$199.00</p>\n                                        </div>\n                                        <div className=\"product-desc\">\n                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam et dolorem nostrum quos placeat. Quibusdam necessitatibus adipisci dignissimos autem voluptate, dicta ullam, assumenda qui, corporis ut vero neque sapiente possimus.</p>\n                                        </div>\n                                        <div className=\"product-stock\">\n                                            <p>Availability : <span className=\"stock\">In Stock</span> <span className=\"stock-num\">(09 Available)</span></p>\n                                        </div>\n                                        <div className=\"product-color\">\n                                            <ul className=\"list-unstyled list-inline\">\n                                                <li className=\"list-inline-item\">Color :</li>\n                                                <li className=\"list-inline-item\">\n                                                    <input type=\"radio\" id=\"color-1\" name=\"color\" value=\"color-1\" />\n                                                    <label htmlFor=\"color-1\"><span><i className=\"las la-check\"></i></span></label>\n                                                </li>\n                                                <li className=\"list-inline-item\">\n                                                    <input type=\"radio\" id=\"color-2\" name=\"color\" value=\"color-2\" />\n                                                    <label htmlFor=\"color-2\"><span><i className=\"las la-check\"></i></span></label>\n                                                </li>\n                                                <li className=\"list-inline-item\">\n                                                    <input type=\"radio\" id=\"color-3\" name=\"color\" value=\"color-3\" />\n                                                    <label htmlFor=\"color-3\"><span><i className=\"las la-check\"></i></span></label>\n                                                </li>\n                                                <li className=\"list-inline-item\">\n                                                    <input type=\"radio\" id=\"color-4\" name=\"color\" value=\"color-4\" />\n                                                    <label htmlFor=\"color-4\"><span><i className=\"las la-check\"></i></span></label>\n                                                </li>\n                                                <li className=\"list-inline-item\">\n                                                    <input type=\"radio\" id=\"color-5\" name=\"color\" value=\"color-5\" />\n                                                    <label htmlFor=\"color-5\"><span><i className=\"las la-check\"></i></span></label>\n                                                </li>\n                                            </ul>\n                                        </div>\n                                        <div className=\"product-size\">\n                                            <ul className=\"list-unstyled list-inline\">\n                                                <li className=\"list-inline-item\">Size :</li>\n                                                <li className=\"list-inline-item\">\n                                                    <input type=\"radio\" id=\"size-1\" name=\"size\" value=\"size-1\" />\n                                                    <label htmlFor=\"size-1\">S</label>\n                                                </li>\n                                                <li className=\"list-inline-item\">\n                                                    <input type=\"radio\" id=\"size-2\" name=\"size\" value=\"size-2\" />\n                                                    <label htmlFor=\"size-2\">M</label>\n                                                </li>\n                                                <li className=\"list-inline-item\">\n                                                    <input type=\"radio\" id=\"size-3\" name=\"size\" value=\"size-3\" />\n                                                    <label htmlFor=\"size-3\">L</label>\n                                                </li>\n                                                <li className=\"list-inline-item\">\n                                                    <input type=\"radio\" id=\"size-4\" name=\"size\" value=\"size-4\" />\n                                                    <label htmlFor=\"size-4\">XL</label>\n                                                </li>\n                                            </ul>\n                                        </div>\n\n                                        <Quantity />\n\n                                        <div className=\"product-cart-wh-com-btn\">\n                                            <Link to={ \"/product-details\"} className=\"cart-btn\">Add To Cart</Link>\n                                            <Link to={ \"/product-details\"} className=\"wishlist-btn\"><i className=\"far fa-heart\"></i></Link>\n                                            <Link to={ \"/product-details\"} className=\"compare-btn\"><i className=\"fas fa-random\"></i></Link>\n                                        </div>\n                                    </div>\n                                </Col>\n\n                                <Col md=\"12\">\n                                    <div className=\"product-tab\">\n                                        <Tab.Container defaultActiveKey=\"description\">\n                                            <Nav className=\"flex-column\">\n                                                <Nav.Item>\n                                                    <Nav.Link eventKey=\"description\">Description</Nav.Link>\n                                                </Nav.Item>\n                                                <Nav.Item>\n                                                    <Nav.Link eventKey=\"additional\">Additional Information</Nav.Link>\n                                                </Nav.Item>\n                                                <Nav.Item>\n                                                    <Nav.Link eventKey=\"review\">Product Review</Nav.Link>\n                                                </Nav.Item>\n                                            </Nav>\n\n                                            <Tab.Content>\n                                                <Tab.Pane eventKey=\"description\" className=\"description-tab\">\n                                                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda optio sequi suscipit et modi! Corporis obcaecati rerum et, explicabo inventore, aliquid, odit modi harum libero culpa distinctio. Nemo, aliquid dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio earum praesentium impedit enim voluptate ducimus, saepe autem. Lorem ipsum dolor sit, amet consectetur adipisicing accusantium quam eius dignissimos quaerat voluptatem excepturi aliquid dolor ducimus. Illo porro maiores fuga dignissimos temporibus odio nulla nobis nemo. Lorem ipsum dolor sit amet consectetur adipisicing elit.<br /><br />Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nesciunt harum facilis odit inventore molestias qui asperiores recusandae architecto mollitia provident ipsa unde, praesentium impedit enim voluptate ducimus, saepe autem. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio earum accusantium quam eius dignissimos quaerat voluptatem excepturi aliquid dolor ducimus.<br /><br />Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere nesciunt harum facilis odit inventore molestias qui asperiores recusandae architecto mollitia provident ipsa unde, praesentium impedit enim voluptate ducimus, saepe autem met adipisicing nesciunt facilis.</p>\n                                                </Tab.Pane>\n\n                                                <Tab.Pane eventKey=\"additional\" className=\"additional-tab\">\n                                                    <Table className=\"table table-bordered\">\n                                                        <tbody>\n                                                            <tr>\n                                                                <td>Product Id</td>\n                                                                <td>#KC7269889</td>\n                                                            </tr>\n                                                            <tr>\n                                                                <td>Brand</td>\n                                                                <td>Samsung Electronics</td>\n                                                            </tr>\n                                                            <tr>\n                                                                <td>Model</td>\n                                                                <td>Regular Model</td>\n                                                            </tr>\n                                                            <tr>\n                                                                <td>Size</td>\n                                                                <td>Small / Medium / Large</td>\n                                                            </tr>\n                                                            <tr>\n                                                                <td>Color</td>\n                                                                <td>White / Black / Blue</td>\n                                                            </tr>\n                                                            <tr>\n                                                                <td>Warranty</td>\n                                                                <td>3 Years International Warranty</td>\n                                                            </tr>\n                                                            <tr>\n                                                                <td>Country Of Origin</td>\n                                                                <td>United States</td>\n                                                            </tr>\n                                                            <tr>\n                                                                <td>Made In</td>\n                                                                <td>Republic Of China</td>\n                                                            </tr>\n                                                            <tr>\n                                                                <td>Dimensions</td>\n                                                                <td>24 x 27 x 163 cm</td>\n                                                            </tr>\n                                                            <tr>\n                                                                <td>Weight</td>\n                                                                <td>33 KG</td>\n                                                            </tr>\n                                                        </tbody>\n                                                    </Table>\n                                                </Tab.Pane>\n\n                                                <Tab.Pane eventKey=\"review\" className=\"review-tab\">\n                                                    <div className=\"review-comments\">\n                                                        <div className=\"comment-box d-flex\">\n                                                            <div className=\"comment-image\">\n                                                                <img src={ `/assets/images/testimonial-2.jpg`} alt=\"\" />\n                                                            </div>\n                                                            <div className=\"comment-content\">\n                                                                <div className=\"comment-title\">\n                                                                    <h6>Mark Shadow</h6>\n                                                                </div>\n                                                                <div className=\"date-rating d-flex justify-content-between\">\n                                                                    <p>Mar 26, 2020</p>\n                                                                    <ul className=\"list-unstyled list-inline\">\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i></li>\n                                                                    </ul>\n                                                                </div>\n                                                                <div className=\"comment-desc\">\n                                                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum quas placeat perspiciatis est, nisi expedita consectetur sit minus illum laudantium nostrum dolore odit asperiores quisquam ad enim iusto laborum quas placeat perspiciatis saepe.</p>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                        <div className=\"comment-box d-flex\">\n                                                            <div className=\"comment-image\">\n                                                                <img src={ `/assets/images/testimonial-1.jpg`} alt=\"\" />\n                                                            </div>\n                                                            <div className=\"comment-content\">\n                                                                <div className=\"comment-title\">\n                                                                    <h6>Katrin Kay</h6>\n                                                                </div>\n                                                                <div className=\"date-rating d-flex justify-content-between\">\n                                                                    <p>Mar 26, 2020</p>\n                                                                    <ul className=\"list-unstyled list-inline\">\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i></li>\n                                                                    </ul>\n                                                                </div>\n                                                                <div className=\"comment-desc\">\n                                                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum quas placeat perspiciatis est, nisi expedita consectetur sit minus illum laudantium nostrum dolore odit asperiores quisquam ad enim iusto laborum quas placeat perspiciatis saepe.</p>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                        <div className=\"comment-box d-flex\">\n                                                            <div className=\"comment-image\">\n                                                                <img src={ `/assets/images/testimonial-2.jpg`} alt=\"\" />\n                                                            </div>\n                                                            <div className=\"comment-content\">\n                                                                <div className=\"comment-title\">\n                                                                    <h6>David Show</h6>\n                                                                </div>\n                                                                <div className=\"date-rating d-flex justify-content-between\">\n                                                                    <p>Mar 26, 2020</p>\n                                                                    <ul className=\"list-unstyled list-inline\">\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star\"></i></li>\n                                                                        <li className=\"list-inline-item\"><i className=\"las la-star-half-alt\"></i></li>\n                                                                    </ul>\n                                                                </div>\n                                                                <div className=\"comment-desc\">\n                                                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto laborum quas placeat perspiciatis est, nisi expedita consectetur sit minus illum laudantium nostrum dolore odit asperiores quisquam ad enim iusto laborum quas placeat perspiciatis saepe.</p>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n\n                                                    <div className=\"review-form\">\n                                                        <h5>Write a Review</h5>\n                                                        <ReviewForm />\n                                                    </div>\n                                                </Tab.Pane>\n                                            </Tab.Content>\n                                        </Tab.Container>\n                                    </div>\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default ProductDetails","import styled from \"styled-components\";\nimport { colors } from \"../../../components/common/element/elements.js\";\n\nexport const Styles = styled.div`\n    .cart-page {\n        .cart-area {\n            padding : 70px 0;\n            .product-list {\n                table.table.table-bordered {\n                    border: 1px solid ${colors.border3};\n                    margin-bottom: 0;\n                    thead {\n                        tr {\n                            th {\n                                border: none;\n                                padding: 20px 10px;\n                                font-size: 15px;\n                                color: ${colors.black1};\n                            }\n                        }\n                    }\n                    tbody {\n                        tr {\n                            td {\n                                border: none;\n                                border-top: 1px solid ${colors.border3};\n                                padding: 25px 10px;\n                                color: ${colors.text2};\n                                vertical-align: middle;\n                            }\n                            td.product-remove {\n                                padding: 15px 25px;\n                                text-align: center;\n                                i {\n                                    font-size : 20px;\n                                    color: ${colors.text3};\n                                    &:hover {\n                                        color: ${colors.red};\n                                    }\n                                }\n                            }\n                            td.product-thumbnail {\n                                img {\n                                    width: 75px;\n                                    height: auto;\n                                    border-radius: 5px;\n                                }\n                            }\n                            td.product-title {\n                                a {\n                                    font-size : 14px;\n                                    color: ${colors.black1};\n                                    font-weight : 500;\n                                    &:hover {\n                                        color: ${colors.green};\n                                    }\n                                }\n                            }\n                            td.product-price {\n                                span {\n                                    font-size : 14px;\n                                    color: ${colors.black1};\n                                }\n                            }\n                            td.product-quantity {\n                                input.form-control {\n                                    padding: 10px;\n                                    height: 38px;\n                                    width: 58px;\n                                    font-size: 14px;\n                                    border-color: ${colors.border1};\n                                    color: ${colors.text2};\n                                    border-radius: 5px;\n                                    &:focus {\n                                        box-shadow : none;\n                                        border-color: ${colors.green};\n                                    }\n                                }\n                            }\n                            td.product-subtotal {\n                                span {\n                                    font-size : 14px;\n                                    color: ${colors.black1};\n                                }\n                            }\n                        }\n                    }\n                }\n\n                .actions {\n                    display: flex;\n                    border: 1px solid ${colors.border3};\n                    border-top: none;\n                    padding: 20px 25px;\n                    flex-wrap: wrap;\n                    .coupon {\n                        form {\n                            input {\n                                width: 200px;\n                                height: 45px;\n                                border: 1px solid ${colors.border1};\n                                font-size: 14px;\n                                color: ${colors.black1};\n                                padding-left: 15px;\n                                margin-right: 10px;\n                                &::placeholder {\n                                    font-size  : 14px;\n                                    font-style : italic;\n                                    color      : ${colors.text2};\n                                }\n                                &:focus {\n                                    box-shadow : none;\n                                    border-color: ${colors.green};\n                                }\n                            }\n                            button {\n                                font-size: 14px;\n                                color: #ffffff;\n                                background: ${colors.gr_bg};\n                                width: 120px;\n                                height: 45px;\n                                border: none;\n                                border-radius: 5px;\n                                &:hover {\n                                    background: ${colors.gr_bg2};\n                                }\n                            }\n                        }\n                    }\n                    .update-cart {\n                        a.update-btn {\n                            display: inline-block;\n                            font-size: 14px;\n                            color: #ffffff;\n                            background: ${colors.gr_bg};\n                            width: 120px;\n                            height: 45px;\n                            text-align : center;\n                            padding-top: 12px;\n                            border-radius: 5px;\n                            &:hover {\n                                background: ${colors.gr_bg2};\n                            }\n                        }\n                    }\n                }\n\n                @media(max-width: 991px) {\n                    margin-bottom : 30px;\n                }\n            }\n\n            .cart-summary {\n                box-shadow: 0 8px 25px rgba(0,0,0,0.1);\n                border-radius: 5px;\n                padding: 25px 35px 35px;\n                .cs-title {\n                    h5 {\n                        color: ${colors.black1};\n                        font-weight: 600;\n                        padding-bottom : 10px;\n                        margin-bottom: 20px;\n                        position: relative;\n                        &:before {\n                            position: absolute;\n                            content: \"\";\n                            background: ${colors.green};\n                            width: 50px;\n                            height: 2px;\n                            bottom: 0;\n                            left: 42%;\n                        }\n                    }\n                }\n\n                .cs-content {\n                    ul {\n                        border-bottom: 1px solid ${colors.text2};\n                        padding-bottom: 10px;\n                        margin-bottom: 10px;\n                        li {\n                            font-size: 14px;\n                            color: ${colors.black2};\n                            font-weight: 500;\n                            margin-bottom: 10px;\n                            span {\n                                float : right;\n                                font-weight: 400;\n                            }\n                            &:nth-child(4) {\n                                color: ${colors.red};\n                            }\n                            &:last-child {\n                                margin-bottom : 0;\n                            }\n                        }\n                    }\n                    p.cart-total {\n                        font-size: 15px;\n                        color: ${colors.black1};\n                        font-weight: 500;\n                        margin-bottom: 35px;\n                        span {\n                            float : right;\n                        }\n\n                        @media(max-width: 991px) {\n                            margin-bottom: 18px;\n                        }\n                    }\n                    button.checkout-btn {\n                        font-size: 16px;\n                        color: #ffffff;\n                        background: ${colors.gr_bg};\n                        display: inline-block;\n                        width: 100%;\n                        height: 45px;\n                        border: none;\n                        border-radius: 5px;\n                        &:hover {\n                            background: ${colors.gr_bg2};\n                        }\n                    }\n                }\n            }\n\n            @media(max-width: 767px) {\n                padding: 35px 0;\n            }\n        }\n    }\n`;","import React, { Component } from 'react';\nimport { Container, Row, Col, Table } from 'react-bootstrap';\nimport HeaderTwo from '../../components/HeaderTwo';\nimport { BreadcrumbBox } from '../../components/common/Breadcrumb';\nimport FooterTwo from '../../components/FooterTwo';\nimport { Styles } from './styles/cart.js';\n\nclass Cart extends Component {\n    render() {\n        return (\n            <Styles>\n                {/* Main Wrapper */}\n                <div className=\"main-wrapper cart-page\">\n\n                    {/* Header 2 */}\n                    <HeaderTwo />\n\n                    {/* Breadcroumb */}\n                    <BreadcrumbBox title=\"Cart\" />\n\n                    {/* Product Details */}\n                    <section className=\"cart-area\">\n                        <Container>\n                            <Row>\n                                <Col lg=\"8\" md=\"12\">\n                                    <div className=\"product-list table-responsive\">\n                                        <Table className=\"table-bordered\">\n                                            <thead>\n                                                <tr>\n                                                    <th className=\"product-remove\"></th>\n                                                    <th className=\"product-thumbnail\"></th>\n                                                    <th className=\"product-name\">Product</th>\n                                                    <th className=\"product-price\">Price</th>\n                                                    <th className=\"product-quantity\">Quantity</th>\n                                                    <th className=\"product-subtotal\">Subtotal</th>\n                                                </tr>\n                                            </thead>\n                                            <tbody>\n                                                <tr>\n                                                    <td className=\"product-remove\"><a href={ \"/\"}><i className=\"las la-trash\"></i></a></td>\n                                                    <td className=\"product-thumbnail\"><a href={ \"/\"}><img src={ `/assets/images/product-01.jpg`} alt=\"\" /></a></td>\n                                                    <td className=\"product-title\"><a href={ \"/\"}>Product Title Here ...</a></td>\n                                                    <td className=\"product-price\"><span className=\"amount\">$49.00</span></td>\n                                                    <td className=\"product-quantity\">\n                                                        <input type=\"number\" className=\"form-control\" defaultValue=\"1\" />\n                                                    </td>\n                                                    <td className=\"product-subtotal\"><span className=\"subtotal\">$49.00</span></td>\n                                                </tr>\n                                                <tr>\n                                                    <td className=\"product-remove\"><a href={ \"/\"}><i className=\"las la-trash\"></i></a></td>\n                                                    <td className=\"product-thumbnail\"><a href={ \"/\"}><img src={ `/assets/images/product-02.jpg`} alt=\"\" /></a></td>\n                                                    <td className=\"product-title\"><a href={ \"/\"}>Product Title Here ...</a></td>\n                                                    <td className=\"product-price\"><span className=\"amount\">$39.00</span></td>\n                                                    <td className=\"product-quantity\">\n                                                        <input type=\"number\" className=\"form-control\" defaultValue=\"1\" />\n                                                    </td>\n                                                    <td className=\"product-subtotal\"><span className=\"subtotal\">$39.00</span></td>\n                                                </tr>\n                                                <tr>\n                                                    <td className=\"product-remove\"><a href={ \"/\"}><i className=\"las la-trash\"></i></a></td>\n                                                    <td className=\"product-thumbnail\"><a href={ \"/\"}><img src={ `/assets/images/product-03.jpg`} alt=\"\" /></a></td>\n                                                    <td className=\"product-title\"><a href={ \"/\"}>Product Title Here ...</a></td>\n                                                    <td className=\"product-price\"><span className=\"amount\">$59.00</span></td>\n                                                    <td className=\"product-quantity\">\n                                                        <input type=\"number\" className=\"form-control\" defaultValue=\"1\" />\n                                                    </td>\n                                                    <td className=\"product-subtotal\"><span className=\"subtotal\">$59.00</span></td>\n                                                </tr>\n                                            </tbody>\n                                        </Table>\n                                        <div className=\"actions d-flex justify-content-between\">\n                                            <div className=\"coupon\">\n                                                <form action=\"#\" className=\"form-inline\">\n                                                    <input type=\"text\" className=\"form-control\" placeholder=\"Coupon code ...\" />\n                                                    <button type=\"submit\" className=\"apply-btn\">Apply Coupon</button>\n                                                </form>\n                                            </div>\n                                            <div className=\"update-cart\">\n                                                <a className=\"update-btn\" href={ \"/\"}>Update cart</a>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </Col>\n\n                                <Col lg=\"4\" md=\"6\">\n                                    <div className=\"cart-summary\">\n                                        <div className=\"cs-title text-center\">\n                                            <h5>Cart Summary</h5>\n                                        </div>\n                                        <div className=\"cs-content\">\n                                            <ul className=\"list-unstyled\">\n                                                <li>Sub Total <span>$147.00</span></li>\n                                                <li>Shipping and Handling <span>$9.00</span></li>\n                                                <li>Vat (2.5%) <span>$3.68</span></li>\n                                                <li>Discount (10%) <span>$14.70</span></li>\n                                            </ul>\n                                            <p className=\"cart-total\">Grand Total <span>$143.72</span></p>\n                                            <button type=\"button\" className=\"checkout-btn\">Proceed to checkout</button>\n                                        </div>\n                                    </div>\n                                </Col>\n                            </Row>\n                        </Container>\n                    </section>\n\n                    {/* Footer 2 */}\n                    <FooterTwo />\n\n                </div>\n            </Styles>\n        )\n    }\n}\n\nexport default Cart","import React from 'react';\nimport { BrowserRouter as Router, Switch, Route } from 'react-router-dom';\nimport ScrollToTop from './helper/ScrollToTop';\nimport { GlobalStyle } from \"./components/common/styles/global.js\";\nimport HomeOne from './HomeOne';\nimport HomeTwo from './HomeTwo';\nimport About from './pages/about/About';\nimport CourseGrid from './pages/courses/CourseGrid';\nimport CourseList from './pages/courses/CourseList';\nimport CourseDetails from './pages/courses/CourseDetails';\nimport Instructor from './pages/instructor/Instructors';\nimport InstructorDetails from './pages/instructor/InstructorDetails';\nimport Gallery from './pages/gallery/Gallery';\nimport Events from './pages/events/Events';\nimport EventDetails from './pages/events/EventsDetails';\nimport Login from './pages/account/Login';\nimport Register from './pages/account/Register';\nimport Contact from './pages/contact/Contact';\nimport Faq from './pages/faq/Faq';\nimport PageNotFound from './pages/404/PageNotFound';\nimport ComingSoon from './pages/comingsoon/ComingSoon';\nimport BlogClassic from './pages/blog/BlogClassic';\nimport BlogGrid from './pages/blog/BlogGrid';\nimport BlogDetails from './pages/blog/BlogDetails';\nimport Product from './pages/shop/Products';\nimport ProductDetails from './pages/shop/ProductDetails';\nimport Cart from './pages/shop/Cart';\n\nfunction App() {\n    return (\n        <Router>\n            <GlobalStyle />\n            <ScrollToTop />\n            <Switch>\n                <Route exact path={\"/\"} component={HomeTwo} />\n                <Route path={\"/home-two\"} component={HomeTwo} />\n                <Route path={\"/about\"} component={About} />\n                <Route path={\"/course-grid\"} component={CourseGrid} />\n                <Route path={\"/course-list\"} component={CourseList} />\n                <Route path={\"/course-details\"} component={CourseDetails} />\n                <Route path={\"/instructor\"} component={Instructor} />\n                <Route path={\"/instructor-details\"} component={InstructorDetails} />\n                <Route path={\"/gallery\"} component={Gallery} />\n                <Route path={\"/events\"} component={Events} />\n                <Route path={\"/event-details\"} component={EventDetails} />\n                <Route path={\"/login\"} component={Login} />\n                <Route path={\"/registration\"} component={Register} />\n                <Route path={\"/contact\"} component={Contact} />\n                <Route path={\"/faq\"} component={Faq} />\n                <Route path={\"/404\"} component={PageNotFound} />\n                <Route path={\"/coming-soon\"} component={ComingSoon} />\n                <Route path={\"/blog-classic\"} component={BlogClassic} />\n                <Route path={\"/blog-grid\"} component={BlogGrid} />\n                <Route path={\"/blog-details\"} component={BlogDetails} />\n                <Route path={\"/products\"} component={Product} />\n                <Route path={\"/product-details\"} component={ProductDetails} />\n                <Route path={\"/cart\"} component={Cart} />\n            </Switch>\n        </Router>\n    )\n}\n\nexport default App;","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' },\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport * as serviceWorker from \"./serviceWorker\";\n\nReactDOM.render(<App />, document.getElementById(\"root\"));\n\nserviceWorker.unregister();"],"sourceRoot":""}