Getting Started

Thank you for choosing our template. This documentation will help you get started creating your site with Rakon. If you face any problems , Please open a ticket in the support forum to get in touch with us.

First Steps

All the files are well organized, its so easy to work with the template.

  • Unzip the files.
  • Open "Rakon-MultiPurpose Template" folder.
  • You will find two folders, One is for "Source files" it has icons , illustration and license of the used font "circular-std-master" the second is for "main-file" it has Documentation folder and rakon-template folder.
  • rakon-template Folder ==> Contains on
    1. html Folder Contains HTML Files.
    2. html-rtl Folder Contains HTML Files.
    3. Assets Folder Contains on Css, Fonts, Img and Js.
      1. Fonts Contains on icon files "The-Icon-of" and text-font Folder that used in the site.

Main File Structure

All the files are well organized, its so easy to work with the template.

rakon-template/ ├── assets/css/ | └── animate.css | └── bootstrap.min.css | └── aos.css | └── icons.css | └── main.css | └── main.scss | └── main-rtl.css | └── main-rtl.scss | └── normalize.css | └── swiper.min.css ├── assets/css/sass/components | └── _alert.scss | └── _breadcrumb.scss | └── _button.scss | └── _dropdowns.scss | └── _effects.scss | └── _variables.scss | └── _form.scss | └── _modal.scss | └── _pagination.scss | └── _toasts.scss | └── _tooltip.scss ├── assets/sass/helpers | └── _mixins.scss | └── _variables.scss ├── assets/sass/layout | └── _about.scss | └── _account.scss | └── _banner_section.scss | └── _blog.scss | └── _contact.scss | └── _crypto.scss | └── _faq.scss | └── _features.scss | └── _footer.scss | └── _header.scss | └── _logos.scss | └── _map.scss | └── _newsletter.scss | └── _other.scss | └── _pricing.scss | └── _products.scss | └── __projects.scss | └── _search.scss | └── _services.scss | └── _slider.scss | └── _sliderscroll.scss | └── _state.scss | └── _tabs.scss | └── _team.scss | └── _testimonial.scss | └── _timeline.scss ├── assets/sass/pages | └── _globalpage.scss | └── _rtl.scss | ├── assets/fonts | └── The-Icon-of.eot | └── The-Icon-of.svg | └── The-Icon-of.ttf | └── The-Icon-of.woff | └── The-Icon-of.woff2 | ├── assets/fonts/text-font | └── CircularStd | ├── assets/js/ │ ├── bootstrap.min.js │ ├── jquery-3.3.1.js │ ├── jquery-migrate.min.js │ ├── main.js │ ├── popper.min.js | ├── assets/js/pages │ ├── agency.js │ ├── crypto.js │ ├── hosting.js │ ├── interior.js │ ├── mobile.js │ ├── sass.js │ ├── sass2.js | ├── assets/js/vendor │ ├── animation.gsap.js │ ├── charming.min.js │ ├── countdown.js │ ├── cryptodark.js │ ├── debug.addIndicators.min.js │ ├── aos.js │ ├── imagesloaded.pkgd.min.js │ ├── jquery.counterup.min.js │ ├── jquery.bxslider.min.js │ ├── particles.min.js │ ├── ScrollMagic.js │ ├── sharer.js │ ├── simpleParallax.min.js │ ├── swiper.min.js │ ├── sticky.min.js │ ├── TweenMax.min.js │ ├── waypoints.min.js │ ├── html,html-rtl Folder ├── about: ├── about.html ├── about-2.html ├── about-3.html ├── account: ├── forgot-2.html ├── forgot-3.html ├── signin-2.html ├── signin-3.html ├── signup.html ├── signup-2.html ├── signup-3.html ├── blog: ├── blog-classic.html ├── blog-classic-three-columen.html ├── blog-creative.html ├── blog-standard.html ├── single-background-color.html ├── single-blog.html ├── single-featured-image.html ├── contact: ├── contact-agency.html ├── contact-blocks.html ├── contact-classic.html ├── contact-corporate.html ├── contact-creative.html ├── contact-simple.html ├── elements: ├── accordion.html ├── alert.html ├── blog-posts.html ├── button.html ├── call-to-action.html ├── carousel.html ├── clients-logo.html ├── contact-form.html ├── countdown.html ├── counter.html ├── grid.html ├── heading.html ├── iconbox.html ├── parallax.html ├── pricing-table.html ├── process.html ├── services.html ├── social-networks.html ├── tabs.html ├── team.html ├── pricing-table.html ├── testimonial.html ├── video.html ├── home: ├── mobile-app-2.html ├── mobile-app-3.html ├── charity.html ├── workspace.html ├── software.html ├── agency.html ├── crypto-currency.html ├── crypto-dark.html ├── hosting.html ├── Interior.html ├── mobile-app.html ├── sass-modern.html ├── sass-products.html ├── portfolio.html ├── pricing: ├── pricing-list.html

Body Structure

All the files are well organized, its so easy to work with the template.

Css Files
                      
                        <!-- Bootstrap 4.5 -->
                        <link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" />
                        <!-- Bootstrap rtl 4.2 -->
                        <link rel="stylesheet" href="assets/css/bootstrap-rtl.min.css" type="text/css" />
                        <!-- animate -->
                        <link rel="stylesheet" href="assets/css/animate.css" type="text/css" />
                        <!-- Swiper -->
                        <link rel="stylesheet" href="assets/css/swiper.min.css" />
                        <!-- aos -->
                        <link rel="stylesheet" href="assets/css/aos.css" type="text/css" />
                        <!-- icons -->
                        <link rel="stylesheet" href="assets/css/icons.css" type="text/css" />
                        <!-- main css -->
                        <link rel="stylesheet" href="assets/css/main.css" type="text/css" />
                        <!-- main rtl css -->
                        <link rel="stylesheet" href="assets/css/main-rtl.css" type="text/css" />
                        <!-- normalize -->
                        <link rel="stylesheet" href="assets/css/normalize.css" type="text/css" />
                      
                    
Default Header
                      

                        <!-- Start header -->
              <header class="header-nav-center" id="myNavbar">
              <div class="container">
              <!-- navbar -->
              <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="sass-products.html">
                  <img class="logo" src="../Rakon/assets/img/logo.svg" alt="logo" />
                  Rakon
                </a>

                <button class="navbar-toggler menu ripplemenu" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <svg viewBox="0 0 64 48">
                    <path d="M19,15 L45,15 C70,15 58,-2 49.0177126,7 L19,37"></path>
                    <path d="M19,24 L45,24 C61.2371586,24 57,49 41,33 L32,24"></path>
                    <path d="M45,33 L19,33 C-8,33 6,-2 22,14 L45,37"></path>
                  </svg>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mx-auto nav-pills">
                    <li class="nav-item">
                      <a class="nav-link" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#Products">Products</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#Pricing">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#faq">FAQ</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#Testimonial">Testimonial</a>
                    </li>
                  </ul>
                  <div class="nav_account">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#mdllLogin">Sign in</button>
                    <a href="#Testimonial" class="btn scale btn_sm_primary bg-blue c-white effect-letter rounded-pill">
                      Try for free
                    </a>
                  </div>
                </div>
              </nav>
              <!-- End Navbar -->
              </div>
              <!-- end container -->
              </header>
              <!-- End header -->

                      
                    
All Sections are inside the tag <main>

The base structure was organized by row, col-** class

                      
                        <main data-spy="scroll" data-target="#navbar-example2" data-offset="0">
                    <!-- Start Banner Section -->
                    <section class="demo_1 banner_section" id="home">
                      <div class="container">
                        <div class="row justify-content-md-center text-center">
                          <div class="col-md-6">
                            <div class="banner_title">
                              <h1>Your Visual Bookmark Manager</h1>
                              <p>
                                The project management tool teams use to stay organized, avoid delays, and have time for the work that matters most.
                              </p>
                              <button type="button" class="btn scale rounded-pill btn-video btn_video" data-toggle="modal" data-src="https://www.youtube.com/embed/VvHoHw5AWTk" data-target="#mdllVideo">
                                <span class="tio play_circle"></span>
                                Discover this video
                              </button>
                            </div>
                          </div>
                          <!-- image Product -->
                          <div class="image_product">
                            <img src="../Rakon/assets/img/web-sass.png" alt="" />
                          </div>
                        </div>
                      </div>
                    </section>
                    <!-- End Banner -->
                  </main>
                      
                    
Tilte Section

You can use class .title_sections for titles

                      
                        <div class="title_sections">
                                          <div class="before_title">
                                            <span>Cryptocurrency</span>
                                            <span>Portfolio</span>
                                          </div>
                                          <h2>A project planner that won't let anything slip through the cracks</h2>
                                          <p>
                                            Lovely to look at and easy-to-use, Toggl Plan gives teams a visual overview of who’s doing what, and what’s coming up next. That means less stress and better results.
                                          </p>
                                        </div>
                      
                    
Default Footer
                      
                        <!-- Start footer -->
                            <footer class="footer_short position-relative bg-white padding-py-3 z-index-1">
                              <div class="container">
                                <div class="row justify-content-md-center text-center">
                                  <div class="col-md-8">
                                    <a class="logo c-dark" href="sass-products.html">
                                      <img src="../Rakon/assets/img/logo.svg" alt="">
                                      Rakon
                                    </a>
                                    <div class="social--media">
                                      <a href="#" class="btn so-link">
                                        <span class="tio appstore"></span>
                                      </a>
                                      <a href="#" class="btn so-link">
                                        <span class="tio github"></span>
                                      </a>
                                      <a href="#" class="btn so-link">
                                        <span class="tio instagram"></span>
                                      </a>
                                      <a href="#" class="btn so-link">
                                        <span class="tio google"></span>
                                      </a>
                                      <a href="#" class="btn so-link">
                                        <span class="tio twitter"></span>
                                      </a>
                                      <a href="#" class="btn so-link">
                                        <span class="tio facebook_square"></span>
                                      </a>
                                    </div>
                                    <div class="other--links">
                                      <a href="#">White paper</a>
                                      <a href="#">Support</a>
                                      <a href="#">API</a>
                                      <a href="#">Privacy Policy</a>
                                      <a href="#">Cookie Policy</a>
                                    </div>
                                    <div class="opyright">
                                      <p>
                                        © 2020 <a href="https://themeforest.net/user/orinostu" target="_blank">OrinoStu.</a> All Right Reseved
                                      </p>
                                    </div>

                                  </div>
                                </div>
                              </div>
                            </footer>
                            <!-- End. Footer -->
                      
                    
JavaScript Fils

Add JavaScript before end the tag of </body>

                      
                        <!-- jquery -->
                        <script src="assets/js/jquery-3.5.0.js" type="text/javascript"></script>
                        <!-- jquery-migrate -->
                        <script src="assets/js/jquery-migrate.min.js" type="text/javascript"></script>
                        <!-- popper -->
                        <script src="assets/js/popper.min.js" type="text/javascript"></script>
                        <!-- bootstrap -->
                        <script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
                        <!--
                           ============
                           vendor file
                           ============
                            -->
                        <!-- particles -->
                        <script src="assets/js/vendor/particles.min.js" type="text/javascript"></script>
                        <!-- TweenMax -->
                        <script src="assets/js/vendor/TweenMax.min.js" type="text/javascript"></script>
                        <!-- ScrollMagic -->
                        <script src="assets/js/vendor/ScrollMagic.js" type="text/javascript"></script>
                        <!-- animation.gsap -->
                        <script src="assets/js/vendor/animation.gsap.js" type="text/javascript"></script>
                        <!-- addIndicators -->
                        <script src="assets/js/vendor/debug.addIndicators.min.js" type="text/javascript"></script>
                        <!-- Swiper js -->
                        <script src="assets/js/vendor/swiper.min.js" type="text/javascript"></script>
                        <!-- countdown -->
                        <script src="assets/js/vendor/countdown.js" type="text/javascript"></script>
                        <!-- simpleParallax -->
                        <script src="assets/js/vendor/simpleParallax.min.js" type="text/javascript"></script>
                        <!-- waypoints -->
                        <script src="assets/js/vendor/waypoints.min.js" type="text/javascript"></script>
                        <!-- counterup -->
                        <script src="assets/js/vendor/jquery.counterup.min.js" type="text/javascript"></script>
                        <!-- charming -->
                        <script src="assets/js/vendor/charming.min.js" type="text/javascript"></script>
                        <!-- imagesloaded -->
                        <script src="assets/js/vendor/imagesloaded.pkgd.min.js" type="text/javascript"></script>
                        <!-- aos -->
                        <script src="assets/js/vendor/aos.js" type="text/javascript"></script>
                        <!-- BX-Slider -->
                        <script src="assets/js/vendor/jquery.bxslider.min.js" type="text/javascript"></script>
                        <!-- main file -->
                        <script src="assets/js/main.js" type="text/javascript"></script>
                      
                    
JavaScript Files for pages

JavaScript codes for some pages

                      
                        <!-- agency -->
                        <script src="assets/js/pages/agency.js" type="text/javascript"></script>
                        <!-- crypto -->
                        <script src="assets/js/pages/crypto.js" type="text/javascript"></script>
                        <!-- hosting -->
                        <script src="assets/js/pages/hosting.js" type="text/javascript"></script>
                        <!-- interior -->
                        <script src="assets/js/pages/interior.js" type="text/javascript"></script>
                        <!-- mobile -->
                        <script src="assets/js/pages/mobile.js" type="text/javascript"></script>
                        <!-- sass -->
                        <script src="assets/js/pages/sass.js" type="text/javascript"></script>
                        <!-- sass2 -->
                        <script src="assets/js/pages/sass2.js" type="text/javascript"></script>
                      
                    

Css Structure

To add or edit you can use Sass Files.

Header
                      

                        /* =========
                          Style header Default
                          ============*/
                        header .navbar {
                          height: 80px;
                        }
                        header .navbar .navbar-brand {
                          font-weight: 500;
                          font-size: 20px;
                        }
                        header .navbar .navbar-brand .logo {
                          vertical-align: bottom;
                          margin-right: .5rem;
                          width: 27px;
                        }
                        header .navbar .navbar-collapse {
                          margin-top: .4rem;
                        }
                        header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
                          font-size: 16px;
                          font-weight: 400;
                          text-transform: capitalize;
                          margin-right: 1.25rem;
                        }
                        header .navbar .navbar-collapse .nav_account .btn {
                          font-size: 15px;
                        }
                        header .navbar .navbar-collapse .nav_account.btn_demo2 .btn_sm_primary {
                          background-color: rgba(22, 93, 245, 0.1);
                          color: #165DF5;
                        }
                        header .navbar .navbar-collapse .nav_account.btn_demo3 .btn_sm_primary {
                          border: 1px solid #EDEEF1;
                        }
                        @media (max-width: 767px) {
                          header {
                            background: rgba(255, 255, 255, 0.8);
                            -webkit-backdrop-filter: saturate(1) blur(20px) !important;
                            -moz-backdrop-filter: saturate(1) blur(20px) !important;
                            -o-backdrop-filter: saturate(1) blur(20px) !important;
                            -ms-backdrop-filter: saturate(1) blur(20px) !important;
                            backdrop-filter: saturate(1) blur(20px) !important;
                          }
                          header .navbar-toggler:focus {
                            border: 0;
                            outline: 0;
                            box-shadow: none;
                          }
                          header .navbar {
                            height: auto;
                            padding: .75rem;
                          }
                          header .navbar-brand {
                            color: #0B2238 !important;
                            font-size: 18px !important;
                          }
                          header .navbar-brand .logo {
                            width: 24px !important;
                          }
                          header .navbar-collapse {
                            margin-left: 0 !important;
                          }
                          header .navbar-collapse .navbar-nav {
                            padding-bottom: 1rem;
                          }
                          header .navbar-collapse .navbar-nav .nav-item .nav-link {
                            color: #0B2238 !important;
                          }
                          header .navbar-collapse .navbar-nav .nav-item .nav-link.active {
                            color: #165DF5 !important;
                          }
                          header .navbar-collapse .nav_account {
                            border-top: 1px solid #EDEEF1;
                            padding: 1rem 0;
                          }
                          header .navbar-collapse .nav_account .btn-default {
                            color: #0B2238 !important;
                          }
                          header .navbar-collapse .nav_account .btn-primary {
                            background-color: #165DF5 !important;
                            color: #ffffff !important;
                          }
                        }

                        /* =========
                          header-nav-center
                          ============*/
                        .header-nav-center {
                          width: 100%;
                          left: 0;
                          z-index: 12;
                        }
                        .header-nav-center .navbar-brand {
                          color: #0B2238;
                        }
                        .header-nav-center .navbar-collapse .nav-item .nav-link {
                          color: #0B2238;
                          -webkit-transition: 0.4s !important;
                          -moz-transition: 0.4s !important;
                          -o-transition: 0.4s !important;
                          -ms-transition: 0.4s !important;
                          transition: 0.4s !important;
                        }
                        .header-nav-center .navbar-collapse .nav-item .nav-link:hover {
                          color: #165DF5;
                        }
                        .header-nav-center .navbar-collapse .nav-item .nav-link.active {
                          color: #165DF5;
                          background-color: transparent;
                        }
                        .header-nav-center .navbar-collapse .nav-item.active .nav-link {
                          color: #165DF5;
                          background-color: transparent;
                        }

                      
                    
Footer
                      

                        /*===========
                        footer_short
                        ===========*/
                        .footer_short .social--media {
                          margin-top: 2.25rem;
                        }
                        .footer_short .social--media .so-link {
                          width: 50px;
                          height: 50px;
                          border-radius: 20px;
                          background-color: rgba(11, 34, 56, 0.05);
                          margin: 0 .25rem;
                          -webkit-transition: 0.3s !important;
                          -moz-transition: 0.3s !important;
                          -o-transition: 0.3s !important;
                          -ms-transition: 0.3s !important;
                          transition: 0.3s !important;
                        }
                        @media (max-width: 767px) {
                          .footer_short .social--media .so-link {
                            margin-bottom: .5rem;
                          }
                        }
                        .footer_short .social--media .so-link .tio {
                          display: flex;
                          justify-content: center;
                          text-align: center;
                          font-size: 22px;
                          color: #0B2238;
                          padding-top: .6rem;
                          -webkit-transition: 0.3s !important;
                          -moz-transition: 0.3s !important;
                          -o-transition: 0.3s !important;
                          -ms-transition: 0.3s !important;
                          transition: 0.3s !important;
                        }
                        .footer_short .social--media .so-link:hover {
                          background-color: #165DF5;
                        }
                        .footer_short .social--media .so-link:hover .tio {
                          color: #ffffff;
                        }
                        .footer_short .other--links {
                          margin-top: 1.5rem;
                        }
                        .footer_short .other--links a {
                          color: #6C7A87;
                          font-size: 16px;
                          font-weight: 400;
                          margin: .6rem;
                          -webkit-transition: 0.3s !important;
                          -moz-transition: 0.3s !important;
                          -o-transition: 0.3s !important;
                          -ms-transition: 0.3s !important;
                          transition: 0.3s !important;
                        }
                        @media (max-width: 767px) {
                          .footer_short .other--links a {
                            margin-bottom: .5rem;
                          }
                        }
                        .footer_short .other--links a:hover {
                          color: #0B2238;
                        }
                        .footer_short .opyright {
                          margin-top: 1.5rem;
                        }
                        .footer_short .opyright p {
                          font-size: 14px;
                          font-weight: 400;
                          color: #9DA6AF;
                        }
                        .footer_short .opyright p a {
                          color: #0B2238;
                          -webkit-transition: 0.3s !important;
                          -moz-transition: 0.3s !important;
                          -o-transition: 0.3s !important;
                          -ms-transition: 0.3s !important;
                          transition: 0.3s !important;
                        }
                        .footer_short .opyright p a:hover {
                          color: #165DF5;
                        }

                        /*==========
                        Full Footer
                        ==========*/
                        .defalut-footer.light::before {
                          display: none;
                        }
                        .defalut-footer.light .item_about .logo {
                          color: #0B2238;
                        }
                        .defalut-footer.light .item_about p {
                          color: #6C7A87;
                        }
                        .defalut-footer.light .item_about .address span {
                          color: #0B2238;
                        }
                        .defalut-footer.light .item_about .address span a {
                          color: #165DF5;
                        }
                        .defalut-footer.light .item_links h4 {
                          color: #0B2238;
                        }
                        .defalut-footer.light .item_links .nav-link {
                          color: #6C7A87;
                        }
                        .defalut-footer.light .item_links .nav-link:hover {
                          color: #0B2238;
                        }
                        .defalut-footer.light .item_subscribe h4 {
                          color: #0B2238;
                        }
                        .defalut-footer.light .item_subscribe p {
                          color: #6C7A87;
                        }
                        .defalut-footer.light .item_subscribe .input_subscribe input {
                          border-color: #EDEEF1;
                          color: #0B2238 !important;
                        }
                        .defalut-footer.light .item_subscribe .input_subscribe input::placeholder {
                          color: #9DA6AF;
                        }
                        .defalut-footer.light .item_subscribe .input_subscribe .btn_subscribe {
                          color: #0B2238;
                        }
                        .defalut-footer.light .item_subscribe .input_subscribe:hover .btn_subscribe {
                          background-color: #FD6B3B;
                          color: #ffffff;
                        }
                        .defalut-footer.light .item_subscribe .app_smartphone .btn--app .blue {
                          background-color: rgba(22, 93, 245, 0.1);
                        }
                        .defalut-footer.light .item_subscribe .app_smartphone .btn--app .blue .tio {
                          color: #165DF5;
                        }
                        .defalut-footer.light .item_subscribe .app_smartphone .btn--app .dark {
                          background-color: rgba(56, 24, 64, 0.1);
                        }
                        .defalut-footer.light .item_subscribe .app_smartphone .btn--app .dark .tio {
                          color: #381840;
                        }
                        .defalut-footer.light .select-menu .button {
                          background: rgba(11, 34, 56, 0.05);
                          color: #0B2238;
                          font-size: 14px;
                        }
                        .defalut-footer.light .select-menu .button ul li {
                          color: #0B2238;
                        }
                        .defalut-footer.light .select-menu .button em::before {
                          border-left: 2px solid #6C7A87;
                          border-top: 2px solid #6C7A87;
                        }
                        .defalut-footer.light .select-menu .button em::after {
                          border-right: 2px solid #6C7A87;
                          border-bottom: 2px solid #6C7A87;
                        }
                        .defalut-footer.light .select-menu > ul {
                          background-color: #F7F8FA;
                        }
                        .defalut-footer.light .copyright span {
                          color: #6C7A87;
                        }
                        .defalut-footer.light .copyright span a {
                          color: #0B2238;
                          -webkit-transition: 0.3s !important;
                          -moz-transition: 0.3s !important;
                          -o-transition: 0.3s !important;
                          -ms-transition: 0.3s !important;
                          transition: 0.3s !important;
                        }
                        .defalut-footer.light .copyright span a:hover {
                          color: #165DF5;
                        }

                      
                    

Scss Structure

All the files are well organized, its so easy to work with the template.

Section

You can use class .title_sections for titles

                      
                        // Default Sections Title
                        .title_sections {
                          margin-bottom: 4rem;
                          @include maxMobile {
                            margin-bottom: 3rem;
                          }
                          .before_title {
                            margin-bottom: 20px;
                            span {
                              color: $dark-color;
                              font-size: 16px;
                              font-weight: 500;
                              &:last-child {
                                color: $blue-color;
                              }
                            }
                          }
                          h2 {
                            font-size: 2.188em;
                            margin-bottom: 20px;
                            font-weight: 600;
                            color: $dark-color;
                          }
                          p {
                            color: $gray-color;
                            font-size: 16px;
                            font-weight: 400;
                            margin-bottom: 20px;
                          }
                        }
                      
                    
                      
                        // feature_app
                        .feature_app {
                          background-color: rgba(#381840, .05);
                          .app--crypto {
                            width: 100%;
                            @include prefixer(box-shadow, 0px 0px 70px 0px rgba(56,24,64,0.1), webkit mo o ms);
                            @include prefixer(border-radius, 52px, webkit mo o ms);
                          }
                          .item-feat {
                            margin-bottom: 7rem;
                            @include maxMobile {
                              direction: ltr;
                              margin-bottom: 2rem;
                            }
                            .icon-iim {
                              width: 60px;
                              height: 60px;
                              background-color: $white-color;
                              display: flex;
                              text-align: center;
                              justify-content: center;
                              border-radius: 15px;
                              margin-bottom: 1.25rem;
                              padding: 1rem;
                            }
                            h3 {
                              font-size: 20px;
                              font-weight: 500;
                              color: $dark-color;
                              margin-bottom: 10px;
                            }
                            p {
                              font-size: 16px;
                              font-weight: 400;
                              color: $gray-color;
                            }
                          }
                        }
                    
                    
Buttons

there are for sizes of buttons (sm, md, lg, xl). .btn_sm_primary .btn_md_primary .btn_lg_primary .btn_xl_primary

                    
                      /*=== Small Button ====
                      ==================*/
                      .btn_sm_primary {
                        padding: .7rem 1.55rem;
                        font-size: 15px;
                        text-align: center;
                        @include prefixer (transition, .3s, webkit moz o ms);
                        &:hover {
                          opacity: .9;
                        }
                      }
                      /*=== Medium Button ====
                      ==================*/
                      .btn_md_primary {
                        padding: .85rem 1.8rem;
                        font-size: 15px;
                        text-align: center;
                        @include prefixer (transition, .3s, webkit moz o ms);
                        &:hover {
                          opacity: .9;
                        }
                      }
                      /*=== Large Button ====
                      ==================*/
                      .btn_lg_primary {
                        padding: .9rem 2.3rem;
                        font-size: 15px;
                        text-align: center;
                        @include prefixer (transition, .3s, webkit moz o ms);
                        &:hover {
                          opacity: .9;
                        }
                      }

                      /*=== XLarge Button ====
                      ==================*/
                      .btn_xl_primary {
                        padding: 1.1rem 2.3rem;
                        font-size: 15px;
                        text-align: center;
                        @include prefixer (transition, .3s, webkit moz o ms);
                        &:hover {
                          opacity: .9;
                        }
                      }
                    
                    
Variables

media query and Colors.

                    
                      /*-----------------------------
                      media query
                    -----------------------------*/
                    $maxMobile: "(max-width:767px)";
                    $maxSmall: "(max-width:991px)";
                    $minSmall: "(min-width:768px)";
                    $minMedium: "(min-width:992px)";
                    $minLarge: "(min-width:1200px)";
                    
                    /*-----------------------------
                      Colors
                    -----------------------------*/
                    $dark-color: #0b2238;
                    $white-color: #ffffff;
                    $blue-color: #165df5;
                    $orange-red-color: #fd6b3b;
                    $yollow-color: #ffc329;
                    $aquamarine-color: #17e79b;
                    $orange-color: #f28e1c;
                    $red-color: #f93542;
                    $gray-color: #6c7a87;
                    $light-color: #9da6af;
                    $bg-color: #f7f8fa;
                    $border-color: #edeef1;
                    $beiget-color: #ffe7aa;
                    $green-color: #19a389;
                    $lightgreen-color: #7bd88a;
                    $sea-color: #4d81f7;
                    $gold-color: #ffce53;
                    $purple-color: #6f5fa6;
                    $green2-color: #31d1ab;
                    $black-color: #000;
                    $blue2-color: #3875f7;
                    $orange2-color: #fd7028;
                    // color Currency
                    $sky-color: #6bb0f8;
                    $currency-p-color: #aa9bb3; //pargraph
                    $magenta-color: #fd4ffe;
                    $currency-d-color: #29013e;
                    
                    
                    
Clasess

You can use the clasess inside html codes.

margin, padding, color, background-color, border-radius, z-index, font-size, min-width
this classes only refer to template (Rakon).

                      
                        /*-----------------------------
                        Classes:
                        margin, padding, font-size, color,
                        background-color, border-radius,
                        z-index, min-width
                      -----------------------------*/
                      // margin bottom
                      .margin-b-1 {
                        margin-bottom: 0.625rem !important;
                      }
                      .margin-b-2 {
                        margin-bottom: 1.25rem !important;
                      }
                      .margin-b-3 {
                        margin-bottom: 1.875rem !important;
                      }
                      .margin-b-4 {
                        margin-bottom: 2.5rem !important;
                      }
                      .margin-b-5 {
                        margin-bottom: 3.125rem !important;
                        @include maxMobile {
                          margin-bottom: 1.875rem !important;
                        }
                      }
                      .margin-b-6 {
                        margin-bottom: 3.75rem !important;
                        @include maxMobile {
                          margin-bottom: 2.5rem !important;
                        }
                      }
                      .margin-b-7 {
                        margin-bottom: 4.375rem !important;
                        @include maxMobile {
                          margin-bottom: 2.5rem !important;
                        }
                      }
                      .margin-b-8 {
                        margin-bottom: 5rem !important;
                        @include maxMobile {
                          margin-bottom: 2.5rem !important;
                        }
                      }
                      
                      .margin-b-9 {
                        margin-bottom: 5.625rem !important;
                        @include maxMobile {
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-b-10 {
                        margin-bottom: 6.25rem !important;
                        @include maxMobile {
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-b-11 {
                        margin-bottom: 6.875rem !important;
                        @include maxMobile {
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-b-12 {
                        margin-bottom: 7.5rem !important;
                        @include maxMobile {
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-b-13 {
                        margin-bottom: 8.125rem !important;
                        @include maxMobile {
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-b-14 {
                        margin-bottom: 8.75rem !important;
                        @include maxMobile {
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-b-15 {
                        margin-bottom: 9.375rem !important;
                        @include maxMobile {
                          margin-bottom: 3.75rem !important;
                        }
                      }
                      // margin Top
                      .margin-t-1 {
                        margin-top: 0.625rem !important;
                      }
                      .margin-t-2 {
                        margin-top: 1.25rem !important;
                      }
                      .margin-t-3 {
                        margin-top: 1.875rem !important;
                      }
                      .margin-t-4 {
                        margin-top: 2.5rem !important;
                      }
                      .margin-t-5 {
                        margin-top: 3.125rem !important;
                      }
                      .margin-t-6 {
                        margin-top: 3.75rem !important;
                        @include maxMobile {
                          margin-top: 2.5rem !important;
                        }
                      }
                      .margin-t-7 {
                        margin-top: 4.375rem !important;
                        @include maxMobile {
                          margin-top: 2.5rem !important;
                        }
                      }
                      .margin-t-8 {
                        margin-top: 5rem !important;
                        @include maxMobile {
                          margin-top: 2.5rem !important;
                        }
                      }
                      
                      .margin-t-9 {
                        margin-top: 5.625rem !important;
                        @include maxMobile {
                          margin-top: 3.125rem !important;
                        }
                      }
                      .margin-t-10 {
                        margin-top: 6.25rem !important;
                        @include maxMobile {
                          margin-top: 3.125rem !important;
                        }
                      }
                      .margin-t-11 {
                        margin-top: 6.875rem !important;
                        @include maxMobile {
                          margin-top: 3.125rem !important;
                        }
                      }
                      .margin-t-12 {
                        margin-top: 7.5rem !important;
                        @include maxMobile {
                          margin-top: 3.125rem !important;
                        }
                      }
                      .margin-t-13 {
                        margin-top: 8.125rem !important;
                        @include maxMobile {
                          margin-top: 3.125rem !important;
                        }
                      }
                      .margin-t-14 {
                        margin-top: 8.75rem !important;
                        @include maxMobile {
                          margin-top: 3.125rem !important;
                        }
                      }
                      .margin-t-15 {
                        margin-top: 9.375rem !important;
                        @include maxMobile {
                          margin-top: 3.75rem !important;
                        }
                      }
                      // margin top and top
                      .margin-my-1 {
                        margin-top: 0.625rem !important;
                        margin-bottom: 0.625rem !important;
                      }
                      .margin-my-2 {
                        margin-top: 1.25rem !important;
                        margin-bottom: 1.25rem !important;
                      }
                      .margin-my-3 {
                        margin-top: 1.875rem !important;
                        margin-bottom: 1.875rem !important;
                      }
                      .margin-my-4 {
                        margin-top: 2.5rem !important;
                        margin-bottom: 2.5rem !important;
                      }
                      .margin-my-5 {
                        margin-top: 3.125rem !important;
                        margin-bottom: 3.125rem !important;
                      }
                      .margin-my-6 {
                        margin-top: 3.75rem !important;
                        margin-bottom: 3.75rem !important;
                        @include maxMobile {
                          margin-top: 2.5rem !important;
                          margin-bottom: 2.5rem !important;
                        }
                      }
                      .margin-my-7 {
                        margin-top: 4.375rem !important;
                        margin-bottom: 4.375rem !important;
                        @include maxMobile {
                          margin-top: 2.5rem !important;
                          margin-bottom: 2.5rem !important;
                        }
                      }
                      .margin-my-8 {
                        margin-top: 5rem !important;
                        margin-bottom: 5rem !important;
                        @include maxMobile {
                          margin-top: 2.5rem !important;
                          margin-bottom: 2.5rem !important;
                        }
                      }
                      
                      .margin-my-9 {
                        margin-top: 5.625rem !important;
                        margin-bottom: 5.625rem !important;
                        @include maxMobile {
                          margin-top: 3.125rem !important;
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-my-10 {
                        margin-top: 6.25rem !important;
                        margin-bottom: 6.25rem !important;
                        @include maxMobile {
                          margin-top: 3.125rem !important;
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-my-11 {
                        margin-top: 6.875rem !important;
                        margin-bottom: 6.875rem !important;
                        @include maxMobile {
                          margin-top: 3.125rem !important;
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-my-12 {
                        margin-top: 7.5rem !important;
                        margin-bottom: 7.5rem !important;
                        @include maxMobile {
                          margin-top: 3.125em !important;
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-my-13 {
                        margin-top: 8.125rem !important;
                        margin-bottom: 8.125rem !important;
                        @include maxMobile {
                          margin-top: 3.125rem !important;
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-my-14 {
                        margin-top: 8.75rem !important;
                        margin-bottom: 8.75rem !important;
                        @include maxMobile {
                          margin-top: 3.125rem !important;
                          margin-bottom: 3.125rem !important;
                        }
                      }
                      .margin-my-15 {
                        margin-top: 9.375rem !important;
                        margin-bottom: 9.375rem !important;
                        @include maxMobile {
                          margin-top: 1.875rem !important;
                          margin-bottom: 3.75rem !important;
                        }
                      }
                      
                      // padding
                      .padding-py-1 {
                        padding-top: 0.625rem !important;
                        padding-bottom: 0.625rem !important;
                      }
                      .padding-py-2 {
                        padding-top: 1.25rem !important;
                        padding-bottom: 1.25rem !important;
                      }
                      .padding-py-3 {
                        padding-top: 1.875rem !important;
                        padding-bottom: 1.875rem !important;
                      }
                      .padding-py-4 {
                        padding-top: 2.5rem !important;
                        padding-bottom: 2.5rem !important;
                      }
                      .padding-py-5 {
                        padding-top: 3.125rem !important;
                        padding-bottom: 3.125rem !important;
                      }
                      .padding-py-6 {
                        padding-top: 3.75rem !important;
                        padding-bottom: 3.75rem !important;
                        @include maxMobile {
                          padding-top: 2.5rem !important;
                          padding-bottom: 2.5rem !important;
                        }
                      }
                      .padding-py-7 {
                        padding-top: 4.375rem !important;
                        padding-bottom: 4.375rem !important;
                        @include maxMobile {
                          padding-top: 2.5rem !important;
                          padding-bottom: 2.5rem !important;
                        }
                      }
                      .padding-py-8 {
                        padding-top: 5rem !important;
                        padding-bottom: 5rem !important;
                        @include maxMobile {
                          padding-top: 2.5rem !important;
                          padding-bottom: 2.5rem !important;
                        }
                      }
                      .padding-py-9 {
                        padding-top: 5.625rem !important;
                        padding-bottom: 5.625rem !important;
                        @include maxMobile {
                          padding-top: 3.125rem !important;
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-py-10 {
                        padding-top: 6.25rem !important;
                        padding-bottom: 6.25rem !important;
                        @include maxMobile {
                          padding-top: 3.125rem !important;
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-py-11 {
                        padding-top: 6.875rem !important;
                        padding-bottom: 6.875rem !important;
                        @include maxMobile {
                          padding-top: 3.125rem !important;
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-py-12 {
                        padding-top: 7.5rem !important;
                        padding-bottom: 7.5rem !important;
                        @include maxMobile {
                          padding-top: 3.125rem !important;
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-py-13 {
                        padding-top: 8.125rem !important;
                        padding-bottom: 8.125rem !important;
                        @include maxMobile {
                          padding-top: 3.125rem !important;
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-py-14 {
                        padding-top: 8.75rem !important;
                        padding-bottom: 8.75rem !important;
                        @include maxMobile {
                          padding-top: 3.125rem !important;
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-py-15 {
                        padding-top: 9.375rem !important;
                        padding-bottom: 9.375rem !important;
                        @include maxMobile {
                          padding-top: 3.75rem !important;
                          padding-bottom: 3.75rem !important;
                        }
                      }
                      
                      // padding top
                      .padding-t-1 {
                        padding-top: 0.625rem !important;
                      }
                      .padding-t-2 {
                        padding-top: 1.25rem !important;
                      }
                      .padding-t-3 {
                        padding-top: 1.875rem !important;
                      }
                      .padding-t-4 {
                        padding-top: 2.5rem !important;
                      }
                      .padding-t-5 {
                        padding-top: 3.125rem !important;
                      }
                      .padding-t-6 {
                        padding-top: 3.75rem !important;
                        @include maxMobile {
                          padding-top: 2.5rem !important;
                        }
                      }
                      .padding-t-7 {
                        padding-top: 4.375rem !important;
                        @include maxMobile {
                          padding-top: 2.5rem !important;
                        }
                      }
                      .padding-t-8 {
                        padding-top: 5rem !important;
                        @include maxMobile {
                          padding-top: 2.5rem !important;
                        }
                      }
                      
                      .padding-t-9 {
                        padding-top: 5.625rem !important;
                        @include maxMobile {
                          padding-top: 3.125rem !important;
                        }
                      }
                      .padding-t-10 {
                        padding-top: 6.25rem !important;
                        @include maxMobile {
                          padding-top: 3.125rem !important;
                        }
                      }
                      .padding-t-11 {
                        padding-top: 6.875rem !important;
                        @include maxMobile {
                          padding-top: 3.125rem !important;
                        }
                      }
                      .padding-t-12 {
                        padding-top: 7.5rem !important;
                        @include maxMobile {
                          padding-top: 3.125rem !important;
                        }
                      }
                      .padding-t-13 {
                        padding-top: 8.125rem !important;
                        @include maxMobile {
                          padding-top: 1.875rem !important;
                        }
                      }
                      .padding-t-14 {
                        padding-top: 8.75rem !important;
                        @include maxMobile {
                          padding-top: 3.125rem !important;
                        }
                      }
                      .padding-t-15 {
                        padding-top: 9.375rem !important;
                        @include maxMobile {
                          padding-top: 3.75rem !important;
                        }
                      }
                      
                      // padding left & Right
                      .padding-px-1 {
                        padding-left: 0.625rem !important;
                        padding-right: 0.625rem !important;
                      }
                      .padding-px-2 {
                        padding-left: 1.25rem !important;
                        padding-right: 1.25rem !important;
                      }
                      .padding-px-3 {
                        padding-left: 1.875rem !important;
                        padding-right: 1.875rem !important;
                      }
                      .padding-px-4 {
                        padding-left: 2.5rem !important;
                        padding-right: 2.5rem !important;
                      }
                      .padding-px-5 {
                        padding-left: 3.125rem !important;
                        padding-right: 3.125rem !important;
                        @include maxMobile {
                          padding-left: 1.875rem !important;
                          padding-right: 1.875rem !important;
                        }
                      }
                      .padding-px-6 {
                        padding-left: 3.75rem !important;
                        padding-right: 3.75rem !important;
                        @include maxMobile {
                          padding-left: 2.5rem !important;
                          padding-right: 2.5rem !important;
                        }
                      }
                      .padding-px-7 {
                        padding-left: 4.375rem !important;
                        padding-right: 4.375rem !important;
                        @include maxMobile {
                          padding-left: 2.5rem !important;
                          padding-right: 2.5rem !important;
                        }
                      }
                      .padding-px-8 {
                        padding-left: 5rem !important;
                        padding-right: 5rem !important;
                        @include maxMobile {
                          padding-left: 2.5rem !important;
                          padding-right: 2.5rem !important;
                        }
                      }
                      .padding-px-9 {
                        padding-left: 5.625rem !important;
                        padding-right: 5.625rem !important;
                        @include maxMobile {
                          padding-left: 3.125rem !important;
                          padding-right: 3.125rem !important;
                        }
                      }
                      .padding-px-10 {
                        padding-left: 6.25rem !important;
                        padding-right: 6.25rem !important;
                        @include maxMobile {
                          padding-left: 3.125rem !important;
                          padding-right: 3.125rem !important;
                        }
                      }
                      .padding-px-11 {
                        padding-left: 6.875rem !important;
                        padding-right: 6.875rem !important;
                        @include maxMobile {
                          padding-left: 3.125rem !important;
                          padding-right: 3.125rem !important;
                        }
                      }
                      .padding-px-12 {
                        padding-left: 7.5rem !important;
                        padding-right: 7.5rem !important;
                        @include maxMobile {
                          padding-left: 3.125rem !important;
                          padding-right: 3.125rem !important;
                        }
                      }
                      .padding-px-13 {
                        padding-left: 8.125rem !important;
                        padding-right: 8.125rem !important;
                        @include maxMobile {
                          padding-left: 3.125rem !important;
                          padding-right: 3.125rem !important;
                        }
                      }
                      .padding-px-14 {
                        padding-left: 8.75rem !important;
                        padding-right: 8.75rem !important;
                        @include maxMobile {
                          padding-left: 3.125rem !important;
                          padding-right: 3.125rem !important;
                        }
                      }
                      .padding-px-15 {
                        padding-left: 9.375rem !important;
                        padding-right: 9.375rem !important;
                        @include maxMobile {
                          padding-left: 3.75rem !important;
                          padding-right: 3.75rem !important;
                        }
                      }
                      // padding bottom
                      .padding-b-1 {
                        padding-bottom: 0.625rem !important;
                      }
                      .padding-b-2 {
                        padding-bottom: 1.25rem !important;
                      }
                      .padding-b-3 {
                        padding-bottom: 1.875rem !important;
                      }
                      .padding-b-4 {
                        padding-bottom: 2.5rem !important;
                      }
                      .padding-b-5 {
                        padding-bottom: 3.125rem !important;
                      }
                      .padding-b-6 {
                        padding-bottom: 3.75rem !important;
                        @include maxMobile {
                          padding-bottom: 2.5rem !important;
                        }
                      }
                      .padding-b-7 {
                        padding-bottom: 4.375rem !important;
                        @include maxMobile {
                          padding-bottom: 2.5rem !important;
                        }
                      }
                      .padding-b-8 {
                        padding-bottom: 5rem !important;
                        @include maxMobile {
                          padding-bottom: 2.5rem !important;
                        }
                      }
                      
                      .padding-b-9 {
                        padding-bottom: 5.625rem !important;
                        @include maxMobile {
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-b-10 {
                        padding-bottom: 6.25rem !important;
                        @include maxMobile {
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-b-11 {
                        padding-bottom: 6.875rem !important;
                        @include maxMobile {
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-b-12 {
                        padding-bottom: 7.5rem !important;
                        @include maxMobile {
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-b-13 {
                        padding-bottom: 8.125rem !important;
                        @include maxMobile {
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-b-14 {
                        padding-bottom: 8.75rem !important;
                        @include maxMobile {
                          padding-bottom: 3.125rem !important;
                        }
                      }
                      .padding-b-15 {
                        padding-bottom: 9.375rem !important;
                        @include maxMobile {
                          padding-bottom: 3.75rem !important;
                        }
                      }
                      
                      // Colors
                      .c-dark {
                        color: $dark-color !important;
                      }
                      .c-white {
                        color: $white-color !important;
                      }
                      .c-blue {
                        color: $blue-color !important;
                      }
                      .c-gold {
                        color: $gold-color !important;
                      }
                      .c-green {
                        color: $green-color !important;
                      }
                      .c-aquamarine {
                        color: $aquamarine-color !important;
                      }
                      .c-orange {
                        color: $orange-color !important;
                      }
                      .c-orange-red {
                        color: $orange-red-color !important;
                      }
                      .c-red {
                        color: $red-color !important;
                      }
                      .c-yollow {
                        color: $yollow-color !important;
                      }
                      .c-gray {
                        color: $gray-color !important;
                      }
                      .c-light {
                        color: $light-color !important;
                      }
                      .c-beiget {
                        color: $beiget-color !important;
                      }
                      .c-skuy {
                        color: $sky-color !important;
                      }
                      .c-magenta {
                        color: $magenta-color !important;
                      }
                      .c-currency-d {
                        color: $currency-d-color !important;
                      }
                      .c-currency-p {
                        color: $currency-p-color !important;
                      }
                      .c-sea {
                        color: $sea-color !important;
                      }
                      .c-purple {
                        color: $purple-color !important;
                      }
                      .c-lightgreen {
                        color: $lightgreen-color !important;
                      }
                      .c-green2 {
                        color: $green2-color !important;
                      }
                      .c-black {
                        color: $black-color !important;
                      }
                      .c-blue2 {
                        color: $blue2-color !important;
                      }
                      .c-orange2 {
                        color: $orange2-color !important;
                      }
                      // background
                      .bg-dark {
                        background-color: $dark-color !important;
                      }
                      .bg-white {
                        background: $white-color !important;
                      }
                      .bg-blue {
                        background-color: $blue-color !important;
                      }
                      .bg-gold {
                        background-color: $gold-color !important;
                      }
                      .bg-green {
                        background-color: $green-color !important;
                      }
                      .bg-aquamarine {
                        background-color: $aquamarine-color !important;
                      }
                      .bg-orange {
                        background-color: $orange-color !important;
                      }
                      .bg-red {
                        background-color: $red-color !important;
                      }
                      .bg-yollow {
                        background-color: $yollow-color !important;
                      }
                      .bg-gray {
                        background-color: $gray-color !important;
                      }
                      .bg-light {
                        background-color: $light-color !important;
                      }
                      .bg-beiget {
                        background-color: $beiget-color !important;
                      }
                      .bg-skuy {
                        background-color: $sky-color !important;
                      }
                      .bg-magenta {
                        background-color: $magenta-color !important;
                      }
                      .bg-green2 {
                        background-color: $green2-color !important;
                      }
                      .bg-currency-d {
                        background-color: $currency-d-color !important;
                      }
                      .bg-orange-red {
                        background-color: $orange-red-color !important;
                      }
                      .bg-currency-p {
                        background-color: $currency-p-color !important;
                      }
                      .bg-sea {
                        background-color: $sea-color !important;
                      }
                      .bg-purple {
                        background-color: $purple-color !important;
                      }
                      .bg-lightgreen {
                        background-color: $lightgreen-color !important;
                      }
                      .bg-black {
                        background-color: $black-color !important;
                      }
                      .bg-snow {
                        background-color: $bg-color !important;
                      }
                      .bg-blue2 {
                        background-color: $blue2-color !important;
                      }
                      .bg-orange2 {
                        background-color: $orange2-color !important;
                      }
                      // border-radius
                      .rounded-0 {
                        @include prefixer(border-radius, 0, webkit moz o ms);
                      }
                      .rounded-1 {
                        @include prefixer(border-radius, 1px, webkit moz o ms);
                      }
                      .rounded-2 {
                        @include prefixer(border-radius, 2px, webkit moz o ms);
                      }
                      .rounded-3 {
                        @include prefixer(border-radius, 3px, webkit moz o ms);
                      }
                      .rounded-4 {
                        @include prefixer(border-radius, 04px, webkit moz o ms);
                      }
                      .rounded-5 {
                        @include prefixer(border-radius, 5px, webkit moz o ms);
                      }
                      .rounded-6 {
                        @include prefixer(border-radius, 6px, webkit moz o ms);
                      }
                      .rounded-7 {
                        @include prefixer(border-radius, 7px, webkit moz o ms);
                      }
                      .rounded-8 {
                        @include prefixer(border-radius, 8px, webkit moz o ms);
                      }
                      .rounded-9 {
                        @include prefixer(border-radius, 9px, webkit moz o ms);
                      }
                      .rounded-10 {
                        @include prefixer(border-radius, 10px, webkit moz o ms);
                      }
                      .rounded-11 {
                        @include prefixer(border-radius, 11px, webkit moz o ms);
                      }
                      .rounded-12 {
                        @include prefixer(border-radius, 12px, webkit moz o ms);
                      }
                      .rounded-13 {
                        @include prefixer(border-radius, 13px, webkit moz o ms);
                      }
                      .rounded-14 {
                        @include prefixer(border-radius, 14px, webkit moz o ms);
                      }
                      .rounded-15 {
                        @include prefixer(border-radius, 15px, webkit moz o ms);
                      }
                      .rounded-16 {
                        @include prefixer(border-radius, 16px, webkit moz o ms);
                      }
                      .rounded-17 {
                        @include prefixer(border-radius, 17px, webkit moz o ms);
                      }
                      .rounded-18 {
                        @include prefixer(border-radius, 18px, webkit moz o ms);
                      }
                      .rounded-19 {
                        @include prefixer(border-radius, 19px, webkit moz o ms);
                      }
                      .rounded-20 {
                        @include prefixer(border-radius, 20px, webkit moz o ms);
                      }
                      .rounded-21 {
                        @include prefixer(border-radius, 21px, webkit moz o ms);
                      }
                      .rounded-22 {
                        @include prefixer(border-radius, 22px, webkit moz o ms);
                      }
                      .rounded-23 {
                        @include prefixer(border-radius, 23px, webkit moz o ms);
                      }
                      .rounded-24 {
                        @include prefixer(border-radius, 24px, webkit moz o ms);
                      }
                      .rounded-25 {
                        @include prefixer(border-radius, 25px, webkit moz o ms);
                      }
                      // height
                      .h-100vh {
                        height: 100vh !important;
                      }
                      // z-index
                      .z-index-0 {
                        z-index: 0;
                      }
                      .z-index-1 {
                        z-index: 1;
                      }
                      .z-index-2 {
                        z-index: 2;
                      }
                      .z-index-3 {
                        z-index: 3;
                      }
                      
                      // transform Rotate
                      .transform-r-15 {
                        transform: rotate(-15deg) !important;
                      }
                      // text-align
                      .align-justify {
                        text-align: justify !important;
                      }
                      
                      // font-size
                      .font-s-8 {
                        font-size: 8px !important;
                      }
                      .font-s-10 {
                        font-size: 10px !important;
                      }
                      .font-s-12 {
                        font-size: 12px !important;
                      }
                      .font-s-13 {
                        font-size: 13px !important;
                      }
                      .font-s-14 {
                        font-size: 14px !important;
                      }
                      .font-s-15 {
                        font-size: 15px !important;
                      }
                      .font-s-16 {
                        font-size: 16px !important;
                      }
                      .font-s-17 {
                        font-size: 17px !important;
                      }
                      .font-s-18 {
                        font-size: 18px !important;
                      }
                      .font-s-19 {
                        font-size: 19px !important;
                      }
                      .font-s-20 {
                        font-size: 20px !important;
                      }
                      .font-s-21 {
                        font-size: 21px !important;
                      }
                      .font-s-22 {
                        font-size: 22px !important;
                      }
                      .font-s-23 {
                        font-size: 23px !important;
                      }
                      .font-s-24 {
                        font-size: 24px !important;
                      }
                      .font-s-25 {
                        font-size: 25px !important;
                      }
                      .font-s-26 {
                        font-size: 26px !important;
                      }
                      .font-s-27 {
                        font-size: 27px !important;
                      }
                      .font-s-28 {
                        font-size: 28px !important;
                      }
                      .font-s-29 {
                        font-size: 29px !important;
                      }
                      .font-s-30 {
                        font-size: 30px !important;
                      }
                      .font-s-35 {
                        font-size: 35px !important;
                      }
                      .font-s-40 {
                        font-size: 40px !important;
                      }
                      .font-s-45 {
                        font-size: 45px !important;
                      }
                      .font-s-50 {
                        font-size: 50px !important;
                        @include maxSmall {
                          font-size: 40px !important;
                        }
                      }
                      .font-s-55 {
                        font-size: 55px !important;
                        @include maxSmall {
                          font-size: 45px !important;
                        }
                      }
                      .font-s-60 {
                        font-size: 60px !important;
                        @include maxSmall {
                          font-size: 30px !important;
                        }
                      }
                      .font-s-65 {
                        font-size: 65px !important;
                        @include maxSmall {
                          font-size: 30px !important;
                        }
                      }
                      .font-s-70 {
                        font-size: 70px !important;
                        @include maxSmall {
                          font-size: 40px !important;
                        }
                      }
                      .font-s-75 {
                        font-size: 75px !important;
                        @include maxSmall {
                          font-size: 40px !important;
                        }
                      }
                      .font-s-80 {
                        font-size: 80px !important;
                        @include maxSmall {
                          font-size: 40px !important;
                        }
                      }
                      .font-s-85 {
                        font-size: 85px !important;
                        @include maxSmall {
                          font-size: 40px !important;
                        }
                      }
                      .font-s-90 {
                        font-size: 90px !important;
                        @include maxSmall {
                          font-size: 40px !important;
                        }
                      }
                      .font-s-95 {
                        font-size: 95px !important;
                        @include maxSmall {
                          font-size: 40px !important;
                        }
                      }
                      .font-s-100 {
                        font-size: 100px !important;
                        @include maxSmall {
                          font-size: 40px !important;
                        }
                      }
                      // font wight
                      .font-w-400 {
                        font-weight: 400 !important;
                      }
                      .font-w-500 {
                        font-weight: 500 !important;
                      }
                      .font-w-600 {
                        font-weight: 600 !important;
                      }
                      .font-w-700 {
                        font-weight: 700 !important;
                      }
                      .font-w-800 {
                        font-weight: 800 !important;
                      }
                      
                      // min width
                      .wd-50 {
                        min-width: 50px !important;
                        justify-content: center;
                      }
                      .wd-100 {
                        min-width: 100px !important;
                        justify-content: center;
                      }
                      .wd-120 {
                        min-width: 120px !important;
                        justify-content: center;
                      }
                      .wd-130 {
                        min-width: 130px !important;
                        justify-content: center;
                      }
                      .wd-140 {
                        min-width: 140px !important;
                        justify-content: center;
                      }
                      .wd-160 {
                        min-width: 160px !important;
                        justify-content: center;
                      }
                      .wd-170 {
                        min-width: 170px !important;
                        justify-content: center;
                      }
                      
                      .border-0 {
                        border: 0 !important;
                      }
                      
                      .border-1 {
                        border: 1px solid$border-color !important;
                      }
                      
                      .opacity-1 {
                        opacity: 1 !important;
                      }
                      
                      .h-fit-content {
                        height: fit-content !important;
                      }
                      
                      /*-----------------------------
                        Active, hover Colors for Navbar
                      -----------------------------*/
                      
                      .active-dark {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $dark-color !important;
                                  }
                                  &.selected {
                                    color: $dark-color !important;
                                  }
                                  &:hover {
                                    color: $dark-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $dark-color !important;
                                        }
                                        &.active {
                                          background-color: $dark-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $dark-color !important;
                                      }
                                      &.active {
                                        background-color: $dark-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $dark-color !important;
                                        }
                                        &.active {
                                          background-color: $dark-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $dark-color !important;
                                    &:hover {
                                      color: $dark-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-blue {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $blue-color !important;
                                  }
                                  &:hover {
                                    color: $blue-color !important;
                                  }
                                  &.selected {
                                    color: $blue-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $blue-color !important;
                                        }
                                        &.active {
                                          background-color: $blue-color;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $blue-color !important;
                                      }
                                      &.active {
                                        background-color: $blue-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $blue-color !important;
                                        }
                                        &.active {
                                          background-color: $blue-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $blue-color !important;
                                    &:hover {
                                      color: $blue-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-gold {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $gold-color !important;
                                  }
                                  &.selected {
                                    color: $gold-color !important;
                                  }
                                  &:hover {
                                    color: $gold-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $gold-color !important;
                                        }
                                        &.active {
                                          background-color: $gold-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $gold-color !important;
                                      }
                                      &.active {
                                        background-color: $gold-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $gold-color !important;
                                        }
                                        &.active {
                                          background-color: $gold-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $gold-color !important;
                                    &:hover {
                                      color: $gold-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-green {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $green-color !important;
                                  }
                                  &.selected {
                                    color: $green-color !important;
                                  }
                                  &:hover {
                                    color: $green-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $green-color !important;
                                        }
                                        &.active {
                                          background-color: $green-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $green-color !important;
                                      }
                                      &.active {
                                        background-color: $green-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $green-color !important;
                                        }
                                        &.active {
                                          background-color: $green-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $green-color !important;
                                    &:hover {
                                      color: $green-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-aquamarine {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $aquamarine-color !important;
                                  }
                                  &.selected {
                                    color: $aquamarine-color !important;
                                  }
                                  &:hover {
                                    color: $aquamarine-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $aquamarine-color !important;
                                        }
                                        &.active {
                                          background-color: $aquamarine-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $aquamarine-color !important;
                                      }
                                      &.active {
                                        background-color: $aquamarine-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $aquamarine-color !important;
                                        }
                                        &.active {
                                          background-color: $aquamarine-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $aquamarine-color !important;
                                    &:hover {
                                      color: $aquamarine-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-orange {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $orange-color !important;
                                  }
                                  &.selected {
                                    color: $orange-color !important;
                                  }
                                  &:hover {
                                    color: $orange-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $orange-color !important;
                                        }
                                        &.active {
                                          background-color: $orange-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $orange-color !important;
                                      }
                                      &.active {
                                        background-color: $orange-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $orange-color !important;
                                        }
                                        &.active {
                                          background-color: $orange-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $orange-color !important;
                                    &:hover {
                                      color: $orange-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-orange-red {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $orange-red-color !important;
                                  }
                                  &.selected {
                                    color: $orange-red-color !important;
                                  }
                                  &:hover {
                                    color: $orange-red-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $orange-red-color !important;
                                        }
                                        &.active {
                                          background-color: $orange-red-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $orange-red-color !important;
                                      }
                                      &.active {
                                        background-color: $orange-red-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $orange-red-color !important;
                                        }
                                        &.active {
                                          background-color: $orange-red-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $orange-red-color !important;
                                    &:hover {
                                      color: $orange-red-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-red {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $red-color !important;
                                  }
                                  &.selected {
                                    color: $red-color !important;
                                  }
                                  &:hover {
                                    color: $red-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $red-color !important;
                                        }
                                        &.active {
                                          background-color: $red-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $red-color !important;
                                      }
                                      &.active {
                                        background-color: $red-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $red-color !important;
                                        }
                                        &.active {
                                          background-color: $red-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $red-color !important;
                                    &:hover {
                                      color: $red-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-yollow {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $yollow-color !important;
                                  }
                                  &.selected {
                                    color: $yollow-color !important;
                                  }
                                  &:hover {
                                    color: $yollow-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $yollow-color !important;
                                        }
                                        &.active {
                                          background-color: $yollow-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $yollow-color !important;
                                      }
                                      &.active {
                                        background-color: $yollow-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $yollow-color !important;
                                        }
                                        &.active {
                                          background-color: $yollow-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $yollow-color !important;
                                    &:hover {
                                      color: $yollow-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-gray {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $gray-color !important;
                                  }
                                  &.selected {
                                    color: $gray-color !important;
                                  }
                                  &:hover {
                                    color: $gray-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $gray-color !important;
                                        }
                                        &.active {
                                          background-color: $gray-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $gray-color !important;
                                      }
                                      &.active {
                                        background-color: $gray-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $gray-color !important;
                                        }
                                        &.active {
                                          background-color: $gray-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $gray-color !important;
                                    &:hover {
                                      color: $gray-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      
                      .active-beiget {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $beiget-color !important;
                                  }
                                  &.selected {
                                    color: $beiget-color !important;
                                  }
                                  &:hover {
                                    color: $beiget-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $beiget-color !important;
                                        }
                                        &.active {
                                          background-color: $beiget-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $beiget-color !important;
                                      }
                                      &.active {
                                        background-color: $beiget-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $beiget-color !important;
                                        }
                                        &.active {
                                          background-color: $beiget-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $beiget-color !important;
                                    &:hover {
                                      color: $beiget-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-sky {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $sky-color !important;
                                  }
                                  &.selected {
                                    color: $sky-color !important;
                                  }
                                  &:hover {
                                    color: $sky-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $sky-color !important;
                                        }
                                        &.active {
                                          background-color: $sky-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $sky-color !important;
                                      }
                                      &.active {
                                        background-color: $sky-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $sky-color !important;
                                        }
                                        &.active {
                                          background-color: $sky-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $sky-color !important;
                                    &:hover {
                                      color: $sky-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-magenta {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $magenta-color !important;
                                  }
                                  &.selected {
                                    color: $magenta-color !important;
                                  }
                                  &:hover {
                                    color: $magenta-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $magenta-color !important;
                                        }
                                        &.active {
                                          background-color: $magenta-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $magenta-color !important;
                                      }
                                      &.active {
                                        background-color: $magenta-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $magenta-color !important;
                                        }
                                        &.active {
                                          background-color: $magenta-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $magenta-color !important;
                                    &:hover {
                                      color: $magenta-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-currency-d {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $currency-d-color !important;
                                  }
                                  &.selected {
                                    color: $currency-d-color !important;
                                  }
                                  &:hover {
                                    color: $currency-d-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $currency-d-color !important;
                                        }
                                        &.active {
                                          background-color: $currency-d-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $currency-d-color !important;
                                      }
                                      &.active {
                                        background-color: $currency-d-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $currency-d-color !important;
                                        }
                                        &.active {
                                          background-color: $currency-d-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $currency-d-color !important;
                                    &:hover {
                                      color: $currency-d-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-currency-p {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $currency-p-color !important;
                                  }
                                  &.selected {
                                    color: $currency-p-color !important;
                                  }
                                  &:hover {
                                    color: $currency-p-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $currency-p-color !important;
                                        }
                                        &.active {
                                          background-color: $currency-p-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $currency-p-color !important;
                                      }
                                      &.active {
                                        background-color: $currency-p-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $currency-p-color !important;
                                        }
                                        &.active {
                                          background-color: $currency-p-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $currency-p-color !important;
                                    &:hover {
                                      color: $currency-p-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-sea {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $sea-color !important;
                                  }
                                  &.selected {
                                    color: $sea-color !important;
                                  }
                                  &:hover {
                                    color: $sea-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $sea-color !important;
                                        }
                                        &.active {
                                          background-color: $sea-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $sea-color !important;
                                      }
                                      &.active {
                                        background-color: $sea-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $sea-color !important;
                                        }
                                        &.active {
                                          background-color: $sea-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $sea-color !important;
                                    &:hover {
                                      color: $sea-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-purple {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $purple-color !important;
                                  }
                                  &.selected {
                                    color: $purple-color !important;
                                  }
                                  &:hover {
                                    color: $purple-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $purple-color !important;
                                        }
                                        &.active {
                                          background-color: $purple-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $purple-color !important;
                                      }
                                      &.active {
                                        background-color: $purple-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $purple-color !important;
                                        }
                                        &.active {
                                          background-color: $purple-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $purple-color !important;
                                    &:hover {
                                      color: $purple-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-lightgreen {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $lightgreen-color !important;
                                  }
                                  &.selected {
                                    color: $lightgreen-color !important;
                                  }
                                  &:hover {
                                    color: $lightgreen-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $lightgreen-color !important;
                                        }
                                        &.active {
                                          background-color: $lightgreen-color !important;
                                          color: $white-color;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $lightgreen-color !important;
                                      }
                                      &.active {
                                        background-color: $lightgreen-color !important;
                                        color: $white-color;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $lightgreen-color !important;
                                        }
                                        &.active {
                                          background-color: $lightgreen-color !important;
                                          color: $white-color;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $lightgreen-color !important;
                                    &:hover {
                                      color: $lightgreen-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-green2 {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $green2-color !important;
                                  }
                                  &.selected {
                                    color: $green2-color !important;
                                  }
                                  &:hover {
                                    color: $green2-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $green2-color !important;
                                        }
                                        &.active {
                                          background-color: $green2-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $green2-color !important;
                                      }
                                      &.active {
                                        background-color: $green2-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $green2-color !important;
                                        }
                                        &.active {
                                          background-color: $green2-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $green2-color !important;
                                    &:hover {
                                      color: $green2-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-black {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $black-color !important;
                                  }
                                  &.selected {
                                    color: $black-color !important;
                                  }
                                  &:hover {
                                    color: $black-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $black-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $black-color !important;
                                      }
                                      &.active {
                                        background-color: $black-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $black-color !important;
                                        }
                                        &.active {
                                          background-color: $black-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $black-color !important;
                                    &:hover {
                                      color: $black-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      .active-orange2 {
                        .navbar {
                          .navbar-collapse {
                            .navbar-nav {
                              .nav-item {
                                .nav-link {
                                  &.active {
                                    color: $orange2-color !important;
                                  }
                                  &.selected {
                                    color: $orange2-color !important;
                                  }
                                  &:hover {
                                    color: $orange2-color !important;
                                  }
                                }
                                .dropdown_menu_nav {
                                  .item_colume {
                                    .nav_meun {
                                      .dropdown-item {
                                        &:hover {
                                          color: $orange2-color !important;
                                        }
                                      }
                                    }
                                  }
                                  .dropdown-submenu {
                                    .dropdown-item {
                                      &:hover {
                                        color: $orange2-color !important;
                                      }
                                      &.active {
                                        background-color: $orange2-color !important;
                                        color: $white-color !important;
                                      }
                                    }
                                    .dropdown-menu {
                                      .dropdown-item {
                                        &:hover {
                                          color: $orange2-color !important;
                                        }
                                        &.active {
                                          background-color: $orange2-color !important;
                                          color: $white-color !important;
                                        }
                                      }
                                    }
                                  }
                                }
                                &.show {
                                  .nav-link {
                                    color: $orange2-color !important;
                                    &:hover {
                                      color: $orange2-color !important;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                      
                      .dividar_line {
                        border-bottom: 1px solid$border-color;
                        position: relative;
                        &::after {
                          content: "";
                          width: 50px;
                          height: 1px;
                          background-color: $dark-color;
                          position: absolute;
                          left: 0;
                        }
                      }
                      
                      .no-before {
                        &::before {
                          display: none !important;
                        }
                      }
                      .no-after {
                        &::after {
                          display: none !important;
                        }
                      }
                      
                      .shadow-none {
                        @include prefixer(box-shadow, nnoe, webkit moz o ms);
                      }
                      
                      .filter-blur {
                        @include prefixer(background, rgba(255, 255, 255, 0.2), webkit moz o ms);
                        @include prefixer(backdrop-filter, saturate(1) blur(20px), webkit moz o ms);
                      }
                      
                      .fixed-header {
                        .when-scroll {
                          .btn {
                            color: $dark-color !important;
                          }
                        }
                      }
                      
                      .oh-x {
                        overflow-x: hidden !important;
                      }
                      .oh-y {
                        overflow-y: hidden !important;
                      }
                      
                      .dividar {
                        border-bottom: 1px solid$border-color;
                      }
                      
                      .transition {
                        @include prefixer(transition, 0.3s, webkit moz o ms);
                      }
                      

                    
Source And Credit
  • Bootstrap
  • theiconof
  • UnSplash
  • Dribbble
  • UI8
  • Shutterstock
Fonts Included
  • circularStd
  • Yeseva One
Main Package
  • HTML Files.
  • Supporting CSS, JS files.
  • Example Images.
  • Documentation.

Support

Thank you for purchasing our template. Rakon - Creative Multi-Purpose HTML5 Template. If you have any question, please feel free to contact us.