/* import color variables file */
@import url("./colors_variables.css");
@import url("modules/modules.css");

/*  Global style */
:root {
    --navbar-height: 50px;
}

html,
body {
    margin: 0;
    padding: 0 !important;
    width: 100%;
    font-family:  "Roboto","Almarai", 'sans-serif';
    pointer-events: auto !important;
    z-index: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: var(--primary-page-bg);
    color: var(--primary-text-color);
}

/* dark theme */
body.dark {
    --primary-page-bg: hsl(219, 35%, 11%);
    --special-page-bg:hsl(219, 35%, 11%);
    --primary-text-color: hsl(228, 5%, 100%);
    --snippet-text-color: hsl(0, 0%, 80%);
    --snippet-bg-color: hsl(210, 20%, 12%);
    --secondary-color: var(--secondary-color-500);
    --snippet-text-color: hsl(0, 0%, 100%);
    --snippet-bg-color: hsl(204, 15%, 20%);
    --main-color-500: var(--snippet-bg-color);
    --main-color-700: var(--snippet-bg-color);
    --special-text-color:hsl(0, 0%, 80%);
    --special-heading-color:hsl(0, 0%, 100%);
}

body.special-bk-color{
    background-color: var(--special-page-bg) !important;
}


.ltr {
    direction: ltr;
    unicode-bidi: -webkit-isolate;
    unicode-bidi: -moz-isolate;
    unicode-bidi: isolate
}

body[dir="ltr"] {
    #dark-mood-switcher-mobile {
        left: revert !important;
        right: 0 !important;
    }

}

body[dir="rtl"]{
    .testimonial__container{

        -webkit-animation: scroll-right 50s linear infinite;

                animation: scroll-right 50s linear infinite;
      }

      #rtl_testimonial {
        -webkit-animation: ltr-scroll-left 80s linear infinite;
                animation: ltr-scroll-left 80s linear infinite;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
        }

        #ltr_testimonial {
        -webkit-animation: rtl-scroll-right 80s linear infinite;
                animation: rtl-scroll-right 80s linear infinite;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
        }

        .testimonial .testimonial__item-header::before{
            display: none !important;
        }
        .testimonial .testimonial__item-header::after{
            font-family: "Font Awesome 5 Free";
            content: "\f10e";
            display: inline-block;
            padding-right: 3px;
            vertical-align: middle;
            font-weight: 900;
            position: absolute;
            top: 20%;
            -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
            left: 0;
            padding-right: 16px;
            font-size: 3rem;
            color: #CBF5EA;
            -webkit-transform: scaleX(-1);
                -ms-transform: scaleX(-1);
                    transform: scaleX(-1);
         }


        .subscribe form  input[type="email"]{
            padding-right:10px;


        }
        .subscribe form .subscribe__btn{
            right: 65% !important;
        }

        .offcanvas-header .btn-close svg{
            -webkit-transform: translateX(50%);
                -ms-transform: translateX(50%);
                    transform: translateX(50%);
        }


}


* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}


a,
a:hover {
    text-decoration: none;
    color: inherit;
}


.mt-6 {
    margin-top: 80px;
    margin-top: 5rem;
}
.my-6{
    margin: 5rem 0;
}
.mb-6{
    padding-bottom: 80px;
}

.pt-6 {
    padding-top: 80px;
    padding-top: 5rem;
}
.py-6{
    padding: 80px 0;
}
.pb-6{
    padding-bottom: 80px;
}


img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}


.main-btn,
.secondary-btn,
.main-btn-inverted,
.secondary-btn-inverted {
    border-radius: 5px;
    padding: .5em 1em;
    -webkit-transition: -webkit-transform 0.1s;
    transition: -webkit-transform 0.1s;
    -o-transition: transform 0.1s;
    transition: transform 0.1s;
    transition: transform 0.1s, -webkit-transform 0.1s;
    font-size: 1rem;
    border: none;
    font-weight: 500;
    cursor: pointer;
    margin: 0 5px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    -webkit-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
    color: var(--primary-page-bg) !important;
    height: 50px;
    /* background-color: var(--secondary-color); */

}


.main-btn,
.main-btn-inverted:hover {
    background-color: var(--main-color);
    color: rgb(255, 255, 255) !important;
}
.secondary-btn {
    background-color: var(--secondary-color);
}

.main-btn:hover,
.secondary-btn:hover {
    background-color: inherit
}

.main-btn:hover,
.main-btn-inverted {
    outline: 1px solid var(--main-color) !important;
    color: var(--main-color) !important;
}

.secondary-btn:hover {
    outline: 1px solid var(--secondary-color);
    color: var(--secondary-color) !important;

}

.gradient-bk{
    position: relative;
}

.gradient-bk::before{
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    top: 0;
    left: 0;
    opacity: .10;
    background-image: -webkit-gradient(linear,  left top, right top,  from(var(--main-color)), color-stop(var(--main-color)), color-stop(var(--secondary-color))   , to(var(--secondary-color)));
    background-image: -o-linear-gradient(left,  var(--main-color), var(--main-color), var(--secondary-color)   , var(--secondary-color));
    background-image: linear-gradient(to right,  var(--main-color), var(--main-color), var(--secondary-color)   , var(--secondary-color));
    z-index: -1;
}




/* social-wrapper style */
.social-default{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    margin: 0 -5px;
}
/* social icons */
.social_icon{
    margin: 0 7px;
    --size: 35px;
    width: var(--size);
    height: var(--size);
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 5px;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    position: relative;
    border: 1px solid var(--secondary-color);
    cursor: pointer;
}
.social_icon:after{
    position: absolute;
    content:"";
    width:100%;
    height: 100%;
    left:0;
    top:0;
    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5);
    opacity: 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border-radius: 100%;

}
.social_icon:hover::after{
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    opacity: 1;
    background-color: var(--secondary-color);
}
/*  / social wrapper-style */


.social_icon:hover svg{
     color:  rgb(255, 255, 255) !important;
     z-index: 2;

}

/* section generec title */

.default-section-title{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 2rem 0;


    h2{
        font-size: 2.5rem;
        font-weight: 600 !important;
        position: relative;

    }

    span{
        position: relative;
    }
    svg{
        stroke: var(--secondary-color);

    }

}.default-section-title h2 svg{
    content: "";
    position: absolute;
    display: inline-block;
    width: 100%;
    height:10px;
    stroke-width: 3px;
    bottom: -4px;
    left: 0;
    z-index: -1;
}

/* .default-section-title h2::after{
    content: "";
    position: absolute;
    display: inline-block;
    width: 25%;
    height: 10%;
    border-radius:50px ;
    bottom: 1px;
    background-color: var(--secondary-color);
    right: 0;
    z-index: -1;
} */



.see-more-btn {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;

}

.see-more-btn:hover {
    background-color: var(--secondary-color);
    color: var(--inverted-primary-text-color);
}

.see-more-btn:hover svg {
    -webkit-transform: translateY(1px);
        -ms-transform: translateY(1px);
            transform: translateY(1px);
}

/* sticky-top */
.sticky-top {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1050;
        -webkit-transition: 1s -webkit-transform ease-in-out;
        transition: 1s -webkit-transform ease-in-out;
        -o-transition: 1s transform ease-in-out;
        transition: 1s transform ease-in-out;
        transition: 1s transform ease-in-out, 1s -webkit-transform ease-in-out;
        -webkit-animation: sticky-top-animation 0.5s ease-in-out forwards;
                animation: sticky-top-animation 0.5s ease-in-out forwards;
        background-color: var(--primary-page-bg);
    }

    @-webkit-keyframes sticky-top-animation {
        0% {
            -webkit-transform: translateY(-100%);
                    transform: translateY(-100%)
        }

        100% {
            -webkit-transform: translateY(0px);
                    transform: translateY(0px)
        }
    }

    @keyframes sticky-top-animation {
        0% {
            -webkit-transform: translateY(-100%);
                    transform: translateY(-100%)
        }

        100% {
            -webkit-transform: translateY(0px);
                    transform: translateY(0px)
        }
    }


/* sticky-top */



.navlink-decorate{
    position: relative;
}
.navlink-decorate:hover.navlink-decorate::after,
.navlink-decorate.active.navlink-decorate::after
{
    width:100%;
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
}

.navlink-decorate::after{
  content: "";
  display: block;
  width:100%;
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
          transform: translateY(-2px);
  opacity: 0;
  height: 5px;
  background-color: var(--secondary-color);
  bottom: -2px;
  position: absolute;
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;

}

/* in-active status for hidding */
.in-active{
    display: none !important;
}

.secondary-color-1{
   background-color:   hsl(from var(--secondary-color) 150 s 75% / .4) !important;
}
.secondary-color-2{
    background-color:   hsl(from var(--secondary-color) 255  s 75% / .4) !important;
}
.secondary-color-3{
    background-color:   hsl(from var(--secondary-color) 80 s 75% / .4) !important;
}
.secondary-color-4{
    background-color:  hsl(from var(--secondary-color) 20 s 75% / .4) !important;

}
.secondary-color-5{
    background-color:  hsl(from var(--secondary-color) 200 s 75% / .4) !important;

}

h1,h2,h3,h4,h5,h6{
    color: var(--special-heading-color) !important;
}

.secondary-text{
    color: var(--special-text-color) !important ;
}


/* ********************
    Custom Style
***********************/


.fancy-shadow{
    -webkit-box-shadow: 0px 20px 34px rgba(0, 0, 0, 0.0509803922);
            box-shadow: 0px 20px 34px rgba(0, 0, 0, 0.0509803922)
 }


header {

    .top-nav{
        height: 40px;
        font-size: .92rem;
        background-color: var(--topnav-color);
        color: var(--special-text-color);

        img{
            width: 22px;
           margin-right: 5px;
        }
    }

    background-color: var(--primary-page-bg);


    &.hide {
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);

    }

    &.show {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);

    }

    .main-menu {
        font-size: 1.1rem;
    }

}


/*  */

/* Custom styling for offcanvas menu */
.offcanvas {
    background-color: var(--primary-page-bg);
    color: var(--primary-text-color) !important;
    width: 250px; /* Adjust width as needed */
    -webkit-box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    height: 100vh;
}


/* Offcanvas Toggle Button */
.offcanvas-toggle {
    position: relative;
    /* top: 15px;
    left: 15px; */
    z-index: 1044;
    background-color: var(--main-color);
    border-color: var(--main-color) !important;
    color: #fff;
    border-radius: 5px;
    font-size: 18px;
    padding: 10px 15px;
}
.offcanvas-toggle:hover{
    background-color: inherit;
    color: var(--main-color);
}

/* Menu Links */
.offcanvas-body .nav-link {
    font-size: 16px;
    padding: 10px;
    color: var(--primary-text-color);
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

.offcanvas-body .nav-link:hover {
    color: var(--primaruy-text-color-50);
    border-radius: 5px;
}

.offcanvas-header .btn-close {
    --bs-btn-close-bg:none;
}

.offcanvas-header .btn-close svg{
    fill: var(--primary-text-color);
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}
/* Hide button on larger screens */
@media (min-width:992px) {
    .offcanvas-toggle {
        display: none;
    }
}

/*  */

/* navbar */
.navbar {


    --bs-navbar-padding-y: 0 !important;

    .navbar-collapse {
        -webkit-box-flex: 0;
            -ms-flex-positive: 0;
                flex-grow: 0;
    }

    .navbar-brand {
        img {
            width: auto;
            height: auto;
            max-height: var(--navbar-height);
        }
    }

    .nav-link {
        /*   */

        color: var(--snippet-text-color);

        &.active {
            color: var(--bg-main-color);
        }

        &:hover {
            color: var(--bg-main-color);
        }
    }
  /* Search Form */
.search-form {
    position: relative;
    max-width: 450px;
    margin: auto;
}

/* Search Bar */
.search-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: #fff;
    border-radius: 30px;
    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #ddd;
}

/* Category Dropdown */
.search-category {
    border: none;
    background : inherit;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 20px 0 0 20px;
    cursor: pointer;
    outline: none;
}

/* Search Input */
.search-input {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    border: none;
    padding: 12px;
    font-size: 14px;
    outline: none;
    background: #fff;
    width: 100%;
}

/* Search Button */
.search-button {
    background: inherit; /* Your primary color */
    color: #333;
    border: none;
    padding: 10px 14px;
    border-radius: 0 30px 30px 0;
    cursor: pointer;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.search-button:hover {
    background: inherit; /* Your secondary color */
}

/* Search Results */
.search-results {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 10px 0;
    display: block;
    z-index: 1000;
}

.search-results li {
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.search-results li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.search-results li img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* Show results on focus */
.search-input:focus + .search-results {
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .search-bar {
        width: 100%;
        /* max-width: 320px; */
    }
}




/* / search form   */

    .util-icon {
        font-size: 1.4rem;
        -webkit-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 2px 0;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        color: var(--main-color);
        line-height: 1.4rem;
        height: 100%;
        margin: 0 2px;


        &:hover {
            /* font-size: 1.4rem; */
            /* transform: translateY(-1px); */
            color: var(--secondary-color);
        }
    }
    .menu-action .secondary-btn,
    .menu-action .main-btn{
        height: 38px;
    }
}



/*  */
#search_form_mobile{
    width: 90%;
    display: block;
    margin: 0 auto;
}

#search_form_mobile.hide{
    display: none;
}



.dashboard-util {

       color: var(--primary-text-color);
       display: inline-block;


        & .user {


            position: relative;

            i {
                font-size: 1.9rem;
            }

            .user__name {
                font-size: .9rem;
                width: 66px;
                display: inline-block;
                overflow: hidden;
                max-height: 22px;
            }

            &:hover .user__dropdown-widget {
                opacity: 1;
                visibility: visible;

            }


            .user__dropdown-widget {
                position: absolute;
                background-color: hsl(from var(--snippet-bg-color) h s l /.98);
                color: var(--snippet-text-color);
                border: 1px solid var(--snippet-bg-color);
                border-radius: 4px;
                width: 250px;
                left: 50%;
                -webkit-transform: translateX(-50%) translateY(10px);
                    -ms-transform: translateX(-50%) translateY(10px);
                        transform: translateX(-50%) translateY(10px);
                padding: 5px;
                opacity: 0;
                visibility: hidden;
                -webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
                -o-transition: opacity 0.5s ease, visibility 0.5s ease;
                transition: opacity 0.5s ease, visibility 0.5s ease;
                font-size: .9rem;
                z-index: 1055;

                .user-list {
                    overflow-y: scroll;
                    /* height: 30vh; */
                    background-color: var(--snippet-bg-color);

                    .nav-item {
                        border-radius: 3px;
                        border-bottom: 1px;
                        border-bottom-style: dashed;
                        border-bottom-color: hsl(from var(--primary-text-color) h s 70%) !important;
                        -webkit-transition: background-color .2s linear;
                        -o-transition: background-color .2s linear;
                        transition: background-color .2s linear;

                        .nav-link {
                            color: var(--snippet-text-color);

                        }

                        .nav-link:hover {
                            color: var(--secondary-color) !important;
                        }


                    }

                }

                .user__dashboardFooter {

                    .user__lougout-btn {
                        border-radius: 5px;
                        padding: 5px 0px;
                        background-color: var(--secondary-color);
                        display: block;
                        width: 100%;
                    }

                    .user__lougout-btn:hover {
                        background-color: hsl(from var(--secondary-color) h s 40%);
                        color: var(--inverted-primary-text-color);
                    }
                }
            }

            .user__dropdown-widget::before {
                content: "";
                display: block;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid var(--snippet-bg-color);
                position: absolute;
                top: -10px;
                left: calc(50% - 10px);

            }
        }

}






/* Hero Section */

    .hero-section {
       height: 550px;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       position: relative;

    &.hero-section-bk {
            position: relative;
    }

    &.hero-section-bk::before{
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        top: 0;
        left: 0;
        opacity: .10;
        /* background-image: -webkit-gradient(linear,  left top, right top,  from(var(--main-color)), color-stop(var(--main-color)), color-stop(var(--secondary-color))   , to(var(--secondary-color))); */
        background-image: -o-linear-gradient(left,  var(--main-color), var(--main-color), var(--secondary-color)   , var(--secondary-color));
        background-image: linear-gradient(to right,  var(--main-color), var(--main-color), var(--secondary-color)   , var(--secondary-color));
    }


    .hero-section__badge-group a{
        border: 1px solid #fff;
        /* width: 225px; */
        height: 40px;

    }
    .hero-section__badge-group .img-wrapper{
        width: 30px;
        height: 30px;
    }
        .hero-section__badge-group a .name{
        color: var(--main-color);
    }

    .hero-section__hero-img-container {
        position: relative;
        max-width: 400px;
        margin: 0 auto;
    }

    .hero-section__hero-bk-pattern {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;

        svg {
            fill: var(--main-color-700);
        }
    }

    /* play btn  */
    .play-btn-wrapper{
        position: absolute;
        top:50%;
        left:50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
    }

    .play-btn{
        position: relative;
        --size:60px;
        width: var(--size);
        height: var(--size);
        background-color: rgb(255, 255, 255);
        border: none;
        border-radius: 50%;
        color: var(--main-color);
        font-size: 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

   .play-btn.animation::after,
   .play-btn.animation::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0);
        border: 1px solid rgb(255, 255, 255);
        transform: scale(0.9);
        z-index: -1;



    }
   .play-btn.animation::after,
   .play-btn.animation::before {
        -webkit-animation: ripple 2s linear infinite;
        animation: ripple 2s linear infinite;
        opacity: 1;
    }

    .play-btn.animation::before  {
        -webkit-animation-delay: 1s;
                animation-delay: 1s;
    }
    /* Keyframes for Ripple Animation */


     /* / play btn  */


    .hero-section__hero-img-container .hero-bk svg {
        fill: var(--main-color-500);
        stroke: var(--main-color-500);
    }




    .hero-section__hero-img-container .pop-img {
        position: absolute;
        width: 50px;
        fill: white;
        background-color: var(--secondary-color-700);
        border-radius: 50%;
        padding: 10px;
        z-index: 3;
    }

    .hero-section__hero-img-container .pop1 {
        right: 30px;
        top: 13px;
        width: 65px;
        -webkit-animation: moveUpAndDown 4s ease infinite;
        animation: moveUpAndDown 4s ease infinite;
    }

    .hero-section__hero-img-container .pop2 {
        right: 93px;
        bottom: -20px;
        -webkit-animation: moveUpAndDown 4s ease infinite;
        animation: moveUpAndDown 4s ease infinite;
    }

    .hero-section__hero-img-container .pop3 {
        left: -18px;
        bottom: 186px;
        -webkit-animation: moveUpAndDown 4s ease infinite;
        animation: moveUpAndDown 4s ease infinite;
    }

    .hero-section__hero-img-container img {
        width: 65%;
        position: relative;
        z-index: 3;
    }


    .hero-section__hero-desc h1 {
        font-size: 64px;
        font-size: 4.5rem;
        font-weight: 600;
    }

    .hero-section__hero-desc h1 span {
        color: var(--main-color);
    }

    .hero-section__hero-desc p {
        color: var(--special-text-color);
        font-size: 32px;
        font-size: 2rem;
        font-weight: 600;
    }
    .hero-section__hero-action-wrapper .main-btn,
    .hero-section__hero-action-wrapper .secondary-btn{
        width: 191px;
        height: 52px;
        font-size: 1.2rem;
        opacity: .9;
    }


   .hero-bk-widget{
    position: absolute;
    right:0;
    width: auto;
    max-width: auto;
    bottom: 0;
    z-index: -1;
    }

    /* .hero-bk-widget .path{
        stroke-dasharray: 3000   ;
        stroke-dashoffset: 0;
        animation: dash 5s linear forwards;
    } */


}

/* ripple animation */
@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    75% {
        transform: scale(2);
        opacity: 0.5;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
    }

/* / Hero Section */


/* testimonial */
.testimonial{
    position: relative;
    overflow: hidden;

  .testimonial__container{
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    -webkit-animation: scroll-left 50s linear infinite;
            animation: scroll-left 50s linear infinite;
  }

  .testimonial__item{
    width: calc(100vw / 3);
    max-width: 425px;
    background-color: var(--primary-page-bg);
    -webkit-box-shadow: 0 13px 48px 0 rgba(215, 216, 222, 0.44);
            box-shadow: 0 13px 48px 0 rgba(215, 216, 222, 0.44);
    position: relative;

  }
  .testimonial__item-header{
    position: relative;
  }
  .testimonial__item-header:before{
    font-family: "Font Awesome 5 Free";
    content: "\f10e";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
    position: absolute;
    top: 35px;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    right: 0;
    padding-right: 16px;
    font-size: 3rem;
    color: #CBF5EA;
  }

  .testimonial__item-thump {
    position: relative;
    display: inline-block;
    --size:70px;
    max-width: var(--size);
    height:70px;
    border-radius: 50%;
    overflow: hidden;
    padding: 3px;
    border:2px solid hsl(from var(--special-text-color) h s l /.5);

  }

  .testimonial__item-info-title{
    color: var(--primary-text-color);
    font-size: 1.2rem;
  }
  .testimonial__item-desc p{
    font-size: 18px;
    line-height: 1.45;
    overflow-wrap:break-word;
    color: var(--special-text-color);
  }



}

#rtl_testimonial {
-webkit-animation: scroll-right 80s linear infinite;
        animation: scroll-right 80s linear infinite;
-webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
}

#ltr_testimonial {
-webkit-animation: scroll-left 80s linear infinite;
        animation: scroll-left 80s linear infinite;
-webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
}

@-webkit-keyframes scroll-left {
from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}
}

@keyframes scroll-left {
from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}
}

@-webkit-keyframes scroll-right {
from {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}
to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
}

@keyframes scroll-right {
from {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
}
to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
}
@-webkit-keyframes ltr-scroll-left {
    from {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(50%);
                transform: translateX(50%);
    }
    }
@keyframes ltr-scroll-left {
    from {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(50%);
                transform: translateX(50%);
    }
    }

    @-webkit-keyframes rtl-scroll-right {
    from {
        -webkit-transform: translateX(50%);
                transform: translateX(50%);
    }
    to {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    }

    @keyframes rtl-scroll-right {
    from {
        -webkit-transform: translateX(50%);
                transform: translateX(50%);
    }
    to {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    }
/* / testimonial */


/* category */
.category{



    .category__items-slider{
        background-color: transparent;
        position: initial; /*important, allows container-fluid to be the relative*/
        height: 100%;
        position: relative;

    }



    .category__item{
        display: inline-block;
        text-align: center;
        width:288.75px;
        margin: 5px 10px;
        -webkit-box-shadow: 0px 2px 6px 0px rgba(181, 181, 181, 0.5);
                box-shadow: 0px 2px 6px 0px rgba(181, 181, 181, 0.5)
    }
    .category__item-thumbnail {
        max-height: 250px;
    }

    .category__item-content{
        color: var(--special-heading-color);
    }
    .category__item-content a{
        font-size: .9rem;
        -webkit-transition: translateX .5s ease-out;
        -o-transition: translateX .5s ease-out;
        transition: translateX .5s ease-out;
    }
    .category__item-content a:hover svg{
        -webkit-transform: translateX(5px);
            -ms-transform: translateX(5px);
                transform: translateX(5px);
    }
    .slick-list{
        height: 100%;
    }

    .category__items-slider .slick-list{
        overflow: hidden;
    }
    .category__items-slider .slick-arrow{
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        z-index: 2;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        opacity: 0.4;
        width: 58px;
        height: 58px;
        border-radius: 100%;
        color: var(--main-color);
        background-color: var(--snippet-bg-color);
        border: 0;
        cursor: pointer;
    }
    .category__items-slider .slick-arrow:hover{
        -webkit-transform: translateX(10px,-50%);
            -ms-transform: translateX(10px,-50%);
                transform: translateX(10px,-50%);
        opacity:1;
    }
    .category__items-slider .slick-arrow .slick-next{
        right: 0 !important;
    }
}


/* Services Section */
.services-section {
        .services-section__service {
            background-color: #E5E5E5;
            color: #333;
            border-radius: 10px;
            padding: 8px 16px;
            padding: .5rem 1rem;
            height: 88px;
            max-height: 88px;
        }

        .services-section__service-icon svg {
            font-size: 48px;
            font-size: 3rem;
            color: var(--secondary-color);
        }

        .services-section__service-caption {
            font-size: 16px;
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0 !important;
            padding: .5em .5em;
        }
}
/* / service area  */


/* certificates slider section */
.certificates-slider {

        padding: 32px 0;
        background-color: var(--main-color-700);
        position: relative;


        .carousel-control-prev,
        .carousel-control-next {
            background: #333;
            color: white;
            border-radius: 50%;
            width: 43px;
            height: 45px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        }

        .certificates-slider__top-wavy {
            width: 100%;
            height: 29px;
            position: absolute;
            top: 0px;
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
                transform: rotate(180deg);
            color: var(--primary-page-bg);
            border: 0;

            svg {
                height: 100%;
                width: 100%;
            }
        }

        .certificates-slider__down-wavy {
            width: 100%;
            height: 29px;
            position: absolute;
            bottom: 0;
            color: var(--primary-page-bg);
            border: 0;

            svg {
                height: 100%;
                width: 100%;
            }
        }



        /* card wrapper */
        .cards-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin: 0 auto;
            -ms-flex-pack: distribute;
            justify-content: space-around;
        }

        .card {
            border: none;
            padding: 5px;
            background-color: inherit;
            margin: 0;
            width: calc(100% / 3);
        }

        .image-wrapper,
        .card-body {
            width: 15vw;
            margin: 0 auto;
            /* background-color:var(--bg-main-color); */
        }

        .image-wrapper {
            background-color: #333;
            position: relative;
            height: 21vw;
        }

        .image-wrapper a {
            display: block;
        }

        .card-body {
            position: absolute;
            width: 100%;
            margin: 0 auto;
            bottom: 0;
            height: 25%;
            overflow: hidden;
            left: 0;
            color: var(--primary-text-color-50);
            background-color: var(--primary-page-bg-alpha);

            padding: 5px !important;

            p {
                height: 100%;
                padding: 5px;
                font-size: clamp(8px, 1vw, 1.5rem);


            }



        }
 }
/* / certificates slider section */



/* courses section*/
.courses {
        color: var(--primary-text-color) !important;

        .courses h1 {
            font-size: 40px;
            font-size: 2.5rem;
            font-weight: 600;
        }

        .courses h1 span {
            color: var(--primary-text-color);
        }

        .courses__item-wrapper {
            -webkit-box-shadow: 0px 10px 33px 0px rgba(0, 0, 0, 0.18);
                    box-shadow: 0px 10px 33px 0px rgba(0, 0, 0, 0.18);
            border-radius: 7px;
            border: 0 !important;
            -webkit-transition: all 10s ease-in-out;
            -webkit-transition: -webkit-transform 10s ease-in-out;
            transition: -webkit-transform 10s ease-in-out;
            -o-transition: transform 10s ease-in-out;
            transition: transform 10s ease-in-out;
            transition: transform 10s ease-in-out, -webkit-transform 10s ease-in-out;
            background-color: var(--snippet-bg-color);
        }

        .courses__item-wrapper:hover img {
            -o-object-fit: cover;
            object-fit: cover;
            -webkit-transform: scale(102%);
            -ms-transform: scale(102%);
                transform: scale(102%);
        }

        .courses__img-wrapper {
            overflow: hidden;
            border-top-left-radius: 7px;;
            border-top-right-radius: 7px;;

        }

        .courses__img-wrapper img {
            width: 100%;
            height: 100%;

        }

        .courses__item-desc {
            font-size: .9rem;
            position: relative;
        }

        .courses__course-info-numbers{
            svg{
                color: var(--main-color);
            }
        }
        .courses__course_name {
            border-bottom: 1px solid #cecece;
            padding-bottom: 20px;
        }

        .courses__course-info {
            height: 52px;
            overflow: hidden;
            color: var(--special-text-color);
        }

        .courses__course-price-wrapper {
            position: absolute;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            top: -29px;
            left: 0;
            color: var(--inverted-primary-text-color);
            background-color: var(--secondary-color);
            border-radius: 5px;
            font-size: 17.6px;
            font-size: 1.1rem;
            font-weight: 600;
            padding: 2px 10px;
            margin: 10px 10px;
            text-align: left;
            max-width: 150px;

        }

        .courses__course-currency {
            margin-right: 5px;
            font-size: 12.8px;
            font-size: .8rem;
        }
        .courses__course-status-badge{
            position: absolute;
            top:20px;
            right:10px;
            background-color: var(--secondary-color);
            color: rgb(255, 255, 255);
            padding: 2px 12px;
        }

        .courses__overlay{
            visibility: hidden;
            opacity:0;
            height: 30%;
            border-radius: 7px;
            border: 1px solid hsla(from var(--special-text-color) h s l /20%);
            background-color: var(--snippet-bg-color);
            -webkit-transition: opacity .5s ease-in-out,  height .5s ease-in-out;
            -o-transition: opacity .5s ease-in-out,  height .5s ease-in-out;
            transition: opacity .5s ease-in-out,  height .5s ease-in-out;

        }
        .courses__item-wrapper:hover .courses__overlay{
            visibility: visible;
            opacity: 1;
            height: 80%;

        }

        .courses__overlay .courses__course_category span{
            color: var(--main-color);
        }

        .courses__overlay  .courses__course-info{
            color: var(--special-text-color);
        }
        .courses__course-price-wrapper{
            position: relative;
            background-color: inherit;
            color: var(--special-text-color);
            max-width: none;

        }
       .courses__course-price-before{
            color: var(--main-color) !important;
        }

}
/* / courses section */


/* mobile apps */
.mobile-apps {

        background-color: var(--main-color-700);
        height: 350px;

        .mobile-apps__container{

            height: 350px;
        }


       .mobile-apps__img-wrapper {
        z-index: 2;

         position: absolute;
        left:50%;
        bottom: -1px;
        -webkit-transform: translateX(-50%) rotate(-0deg);
            -ms-transform: translateX(-50%) rotate(-0deg);
                transform: translateX(-50%) rotate(-0deg);

        width: 430px;

        }



        .mobile-apps__apps-icons-wrapper,
        .mobile-apps__apps-icons {
            z-index: 2;
        }

        .mobile-apps__store-icons {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 2fr 2fr;
            grid-template-columns: 2fr 2fr;
            -ms-flex-line-pack: space-evenly;
                align-content: space-evenly;
            -ms-flex-pack: distribute;
                justify-content: space-around;
        }

        .mobile-apps__right-title {
            position: relative;

            h2 {
                color: var(--inverted-primary-text-color);
                font-size: 2rem !important;
            }
        }

        .mobile-apps__right-title span {
            position: absolute;
            top: 84%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
            color: var(--primary-text-color);
        }

        .mobile-apps__right-title path {
            fill: var(--secondary-color);
            height: 5px;

        }


        .mobile-apps__apps-icons-wrapper .mobile-apps__icon {

            display: inline-block;
            max-width: 160px;
        }

        .mobile-apps__apps-icons-wrapper .mobile-apps__icon img {
            height: auto;
            width: 100%;
        }



        .mobile_apps__bk-wrapper {

            position: absolute;
            top: 27%;
            left: 0;
            width: 100%;
            z-index: 1;
        }

        .mobile_apps__bk-wrapper .mobile-apps__bk1 {
            position: absolute;
            top: -17px;
            left: 13%;
            width: 100%;
            max-width: 467px;
            overflow: hidden;

            svg {
                fill: var(--secondary-color-700);
            }
        }

        .mobile_apps__bk-wrapper .mobile-apps__bk2 {
            position: absolute;
            top: -15px;
            left: 18%;
            width: 150px;

            svg {
                width: 100%;
                height: auto;
                fill: var(--main-color)
            }
        }

        .mobile_apps__bk-wrapper .mobile-apps__bk3 {
            position: absolute;
            bottom: 0;
            right: -10px;
            width: 150px;

            svg {
                width: 100%;
                height: auto;
                fill: var(--primaruy-text-color);
            }
        }

        .mobile_apps__bk-wrapper .mobile-apps__bk4 {
            position: absolute;
            bottom: 65px;
            left: 390px;
            width: 150px;

            svg {
                width: 100%;
                height: auto;
                fill: #fff
            }
        }



}
/* / mobile apps */


/* wwlearn */
.wwlearn{


        .wwlearn__item{
            background-color: var(--primary-page-bg);
            -webkit-box-flex: 1;
                -ms-flex: 1 1 calc(33.333% - 20px);
                    flex: 1 1 calc(33.333% - 20px); /* 3 items per row */
            max-width: calc(33.333% - 20px);
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            border-radius: 5px;
        }

        .inner{
            padding: 30px;
        }

        .wwlearn__item-icon{
            font-size: 3.5rem;
            position: relative;
            display: inline-block;
            color: var(--secondary-color);
        }

        .wwlearn__item-title{
            color:var(--primaruy-text-color);
        }
        .wwlearn__item-desc{
            line-height: 1.6;
            color: var(--special-text-color);

        }

        .opacity_image::before {
            position: absolute;
            content: "";
            display: block;
            width: 75%;
            height: 100%;
            -webkit-transform: translateX(-50%) scale(0.5);
                -ms-transform: translateX(-50%) scale(0.5);
                    transform: translateX(-50%) scale(0.5);
            opacity: 0.8;
            background-color: var(--secondary-color);
            z-index: -1;
            -webkit-filter: blur(15px);
            filter: blur(20px);
            left: 50%;
            bottom: -7px;
        }


        @media (max-width:992px) {
            .wwlearn__item {
                -webkit-box-flex: 1;
                    -ms-flex: 1 1 100%;
                        flex: 1 1 100%;
                max-width:calc(50% - 20px);
            }
        }



        /* Responsive: 1 item per row on mobile */
        @media (max-width:576px ) {
            .wwlearn__item {
                -webkit-box-flex: 1;
                    -ms-flex: 1 1 100%;
                        flex: 1 1 100%;
                max-width:calc(100% - 20px);
            }
        }
}
/* /wwlearn */

/* about */
.about{

    padding: 100px 0;
     background: -o-radial-gradient(circle, #ffffff 10%, #f8f9fa 50%, #e0e0e0 100%);
     background: radial-gradient(circle, #ffffff 10%, #f8f9fa 50%, #e0e0e0 100%);
     position: relative;
     overflow: hidden;
      /* z-index: -1; */

    .about__subtitle{
        background-color: var(--main-color-700);
        color: var(--main-color) ;
        font-size: .9rem;
    }
    .about__img-wrapper{
        --size:310px;
        max-width: var(--size);
        width: var(--size);
        height: var(--size);;
        border-radius: 100%;
        position: relative;
        overflow: hidden;
        background-color: #f0f0f0;
    }
    .about__decs{
        font-size: 1.2rem ;
    }


    .main-btn{width: 150px;}

    /*  */
    .widget-container{
        position: absolute;
        right: -275px;
        width: auto;
        max-width: auto;
        top: -15px;
        z-index: -1;
    }
    .widget-container {
       -webkit-animation: rotate-x 15s normal infinite linear;
               animation: rotate-x 15s normal infinite linear;
       -webkit-animation-duration: 30s;
               animation-duration: 30s;
    }

    /* @keyframes rotate-x   {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    } */



}
/* Contact us  */
.contact-us{

        .contact-us__title{
            font-size: 4rem;
            font-weight: bolder;
        }
        .contact-us__form{
            padding: 55px;
            background-color: var(--snippet-bg-color);
            color: var(--special-text-color);
            border-radius: 10px;
            width: 85%;
            margin: 0 auto;
        }
        .contact-us__form [type=text],
        .contact-us__form [type=email],
        .contact-us__form textarea{
                width: 100%;
                padding: 12px 0;
                margin: 8px 0;
                -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                border: none;
                outline: none;
                background-color: transparent;
                border-radius: 0;
                border-bottom: 2px solid #e6e3f1;
                color: var(--special-text-color);
        }
        .contact-us__form .form-group{
            position: relative;
            z-index: 2;
            margin-bottom: 30px;
            display: block;
        }
        .form-group label{
            position: absolute;
            left: 0;
            width: 100%;
            top: 9px;
            color: var(--special-text-color) !important;
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
            z-index: -1;
            letter-spacing: 0.5px;
            font-size: 18px;
            line-height: 28px;
        }
        .contact-us__form .form-group .form-control:focus{
            border-bottom: 2px solid var(--main-color);
            outline:none ;
            -webkit-box-shadow: 0 0 0 0;
                    box-shadow: 0 0 0 0;
        }
        .form-group.focused label{
            top:-10px;
            font-size:12px;
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
            color: var(--main-color) !important;
        }

        textarea {
            resize: none;
        }


        .conatct-us__social-wrapper h5{
            color: var(--special-text-color);
        }
        .social_icon{
            --size:45px
        }


        @media screen and (max-width:576px){
            .contact-us__form{
                padding:35px;
            }

            button[type="submit"]{
                height: 30px;
                font-size: .8em;
            }
        }
 }
/* / Conatct us */
.subscribe{


    .subscribe__newsletter-form {
        position: relative;
        max-width: 600px;
        margin: 0 auto;
        z-index: 1;
        background-color: #fff;
        border-radius: 10px;

    }

    .subscribe__newsletter-form input{
        border: 0 none;
        height: 70px;
        line-height: 70px;
        padding: 0 20px;
        padding-right: 172px;
    }
    .subscribe__newsletter-form input:focus{
        outline: none;
    }
    .subscribe__btn {
        position: absolute;
        right: 10px;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        padding: 0 50px;
        height: 50px;
        line-height: 48px;

    }



}
@media screen and (max-width:576px) {
    .subscribe{
       padding: 50px 0 80px 0 !important;
    }
    .subscribe .subscribe__btn{
       -webkit-transform: translate(-50%,100%);
           -ms-transform: translate(-50%,100%);
               transform: translate(-50%,100%);

    }

    .subscribe__newsletter-form input{
        width: 100%;
        padding-right: 0 !important ;
    }
}

/* footer */
footer {

        color: var(--inverted-primary-text-color);

        .footer__container {
            background-color: var(--main-color-500);
        }

        .footer__wavy {
            height: 29px;
            background-color: var(--main-color-700);
        }

        .footer__wavy svg {
            height: 100%;
            width: 100%;
        }

        .footer__wavy svg path {

            width: 100%;
            fill: var(--main-color-500)
        }



        .footer__widget {
            padding-top: 56px;
            padding-top: 3.5rem;
        }

        .footer__widget-title {

            margin-bottom: 0;
            color: var(--inverted-primary-text-color) !important;
            font-size: 22px;
            font-weight: 600;
            position: relative;
            padding-bottom: 20px;
            margin-bottom: 20px;
        }

        .footer__widget-title:before {
            content: "";
            position: absolute;

            bottom: 0;
            width: 30px;
            height: 4px;
            border-radius: 2px;
            background-color: var(--secondary-color);
        }

        .footer__mobile-apps {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 2fr 2fr;
            grid-template-columns: 2fr 2fr;
            -ms-flex-line-pack: space-evenly;
                align-content: space-evenly;
            -ms-flex-pack: distribute;
                justify-content: space-around;
        }

        .footer__widget-icon {
            color: var(--inverted-primary-text-color) !important;
            margin: 0 5px;
            --size: 30px;
            width: var(--size);
            height: var(--size);
            border-radius: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .footer__widget-social-icon {
            background-color: var(--secondary-color);
            color: var(--inverted-primary-text-color);
            margin: 0 7px;
            --size: 30px;
            width: var(--size);
            height: var(--size);
            border-radius: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin: 0 10xp;
        }

        .footer__widget-app {
            display: inline-block;
            max-height: 60px;
            max-width: 175px;
            margin: 5px;
        }

        .footer__widget-app img {
            height: 100%;
            width: 100%;
        }

        .footer__copyrigt {
            font-size: 12.8px;
            font-size: .8rem;
            font-size: clamp(8px, 12.8px, 16px);
            font-size: clamp(.5rem, .8rem, 1rem);
            border-top: 1px dotted;
        }

}
/* / footer */

.mfp-bg {
  z-index: 1052 !important;
 }

.mfp-wrap {
    z-index: 1053 !important;
}






    /* language widget */
    #language-widget{

        position: relative;

        &:hover .language__list {
            opacity: 1;
            visibility: visible;
        }

        .language__list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            position: absolute;
            background-color: var(--snippet-bg-color);
            color: var(--snippet-text-color);
            border-radius: 4px;
            width: 120px;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(10px);
                -ms-transform: translateX(-50%) translateY(10px);
                    transform: translateX(-50%) translateY(10px);
            padding: 5px;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
            -o-transition: opacity 0.5s ease, visibility 0.5s ease;
            transition: opacity 0.5s ease, visibility 0.5s ease;
            font-size: 1rem;
            z-index: 1050;


            & .nav-item {
                margin-bottom: 3px;
            }

            & a:hover,
            a.active {
                color: var(--secondary-color);
                display: block;
                width: 100%;
                padding: 0 5px;
                border-radius: 5px;
            }

        }

        .language__list::before {
            content: "";
            display: block;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid var(--snippet-bg-color);
            position: absolute;
            top: -10px;
            left: calc(50% - 10px);
        }


    }


    /* notification widget */
    #notification {
        position: relative;
        opacity: 1;
        visibility: visible;
        padding: 5px 0;

        i {
            font-size: 1.5rem;
            /* padding: 5px 0; */
        }

        .notify-icon {
            position: relative;
        }


        &:hover .notification__dropdown-widget {
            opacity: 1;
            visibility: visible;

        }

        .notify-counter {
            position: absolute;
            font-size: .8rem;
            font-weight: 600;
            background-color: var(--secondary-color);
            color: var(--inverted-primary-text-color);
            border-radius: 50%;
            --size: 21px;
            width: var(--size);
            height: var(--size);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            top: -6px;
            left: -5px;
            z-index: 1044;


        }


        & .notification__dropdown-widget {
            position: absolute;
            background-color: var(--snippet-bg-color);
            color: hsl(from var(--primary-text-color) h s 0%) !important;
            border: 1px solid var(--snippet-bg-color);
            border-radius: 4px;
            width: 274px;
            max-width: 274px;
            left: 50%;
            -webkit-transform: translateX(-50%) translateY(10px);
                -ms-transform: translateX(-50%) translateY(10px);
                    transform: translateX(-50%) translateY(10px);
            padding: 5px;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: opacity 0.5s ease, visibility 0.5s ease;
            -o-transition: opacity 0.5s ease, visibility 0.5s ease;
            transition: opacity 0.5s ease, visibility 0.5s ease;
            font-size: .9rem;
            z-index: 1050;


            .notification-list {
                overflow-y: scroll;
                height: 30vh;
                background-color: var(--snippet-bg-color);

                .nav-item {
                    border-radius: 3px;
                    border-bottom: 1px;
                    border-bottom-style: dashed;
                    border-bottom-color: hsl(from var(--primary-text-color) h s 70%) !important;
                    -webkit-transition: background-color .2s linear;
                    -o-transition: background-color .2s linear;
                    transition: background-color .2s linear;

                    .nav-link {
                        color: var(--snippet-text-color);

                    }

                    .nav-link:hover {
                        color: var(--secondary-color) !important;
                    }


                }

            }


        }

        .notification__dropdown-widget::before {
            content: "";
            display: block;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid var(--snippet-bg-color);
            position: absolute;
            top: -10px;
            left: calc(50% - 10px);

        }



    }

    #dark-mood-switcher-mobile {
        display: none;
    }

    #dark-mood-switcher-mobile,
    #dark-mood-switcher-desktop {

        z-index: 1050;

        .checkbox {
            opacity: 0;
            position: absolute;
        }

        .checkbox-label {
            background-color: var(--main-color);
            width: 50px;
            height: 26px;
            border-radius: 50px;
            position: relative;
            padding: 5px;
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

        .fa-moon {
            color: #f1c40f;
            z-index: 2;
        }

        .fa-sun {
            color: #f39c12;
            z-index: 2;
        }

        .checkbox-label .ball {
            z-index: 1;
            background-color: rgb(255, 255, 255);
            width: 22px;
            height: 22px;
            position: absolute;
            left: 2px;
            top: 2px;
            border-radius: 50%;
            -webkit-transition: -webkit-transform 0.2s linear;
            transition: -webkit-transform 0.2s linear;
            -o-transition: transform 0.2s linear;
            transition: transform 0.2s linear;
            transition: transform 0.2s linear, -webkit-transform 0.2s linear;
        }

        .checkbox:checked~.checkbox-label .ball {
            -webkit-transform: translateX(24px);
                -ms-transform: translateX(24px);
                    transform: translateX(24px);
        }


    }





    /* Media Query */

    /* medium screen */
    @media screen and (max-width:992px) {
        .mobile-apps__bk1 {
            left: 0 !important;

        }

        .mobile-apps__bk2 {
            left: 12% !important;
        }

        #notification {
            .notification__dropdown-widget {
                -webkit-transform: translateX(-50%) translateY(10px) !important;
                    -ms-transform: translateX(-50%) translateY(10px) !important;
                        transform: translateX(-50%) translateY(10px) !important;
            }

            .notification__dropdown-widget::before {
                display: none;
            }
        }

        body[dir='ltr'] {
            #notification .notification__dropdown-widget {
                /* transform: translateX(-95%) translateY(10px) !important; */
                margin: 0 auto;
            }


        }

        body[dir='rtl'] {

            #notification .notification__dropdown-widget {
                -webkit-transform: translateX(0) translateY(10px) !important;
                    -ms-transform: translateX(0) translateY(10px) !important;
                        transform: translateX(0) translateY(10px) !important;
            }

        }

        .hero-section__hero-desc h1{
            font-size: 3.5rem !important;
           }
        .testimonial__item{
            width: calc(100vw / 2) !important;
        }



    }

    /* small screen */
    @media screen and (min-width:576px) {
        .navbar-collapse .navbar-nav {
            background-color: var(--primary-page-bg);

            li {
                display: inline;

            }
        }



        .mobile-apps__right-title h1 {
            font-size: 2rem;
            padding-top: 35px;
        }

        /* card wrapper */
        .cards-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin: 0 auto;
            -ms-flex-pack: distribute;
            justify-content: space-around;
        }

        .image-wrapper,
        .card-body {
            width: 15vw;
            margin: 0 auto;
        }

        .image-wrapper {
            background-color: #333;
            position: relative;
            height: 21vw;

        }


    }

    @media screen and (max-width:576px) {

        .container {
            padding: 0 15px;
        }

        .navbar-collapse {
            background-color: var(--primary-page-bg)
        }


        .hero-section{
            height: 100%;
        }



        .courses__item-wrapper {
            max-width: 95%;
            margin: 0 auto;
        }


        .mobile-apps__bk1 {
            left: -25px !important;

        }

        .mobile-apps__right-title h1 {
            font-size: 2rem;
            padding-top: 35px;
        }

        .card:not(:first-child) {
            display: none;
        }

        .card {
            margin: 0 auto;
            min-height: 41vw;

        }

        .certificates-slider .image-wrapper {
            width: 100%;
            margin: 0 auto;
            height: 100%;

        }

        .image-wrapper img {
            max-height: 100%;
            max-width: 100%;

        }

        .card-body {
            width: 100%;
        }

        .contact-us__title {
            font-size: 2.8rem !important;
        }
        .notification {
            .notification__dropdown-widget {
                -webkit-transform: translateX(50%) translateY(10px) !important;
                    -ms-transform: translateX(50%) translateY(10px) !important;
                        transform: translateX(50%) translateY(10px) !important;
            }

            .notification__dropdown-widget::before {
                display: none;
            }
        }

        body[dir='ltr'] {
            .notification .notification__dropdown-widget {
                -webkit-transform: translateX(-50%) translateY(10px) !important;
                    -ms-transform: translateX(-50%) translateY(10px) !important;
                        transform: translateX(-50%) translateY(10px) !important;
            }

        }

        body[dir='rtl'] {

            .notification .notification__dropdown-widget {
                -webkit-transform: translateX(-50%) translateY(10px) !important;
                    -ms-transform: translateX(-50%) translateY(10px) !important;
                        transform: translateX(-50%) translateY(10px) !important;
            }

            .subscribe form .subscribe__btn{
                right: 10px !important;
            }

            .btn-close{
                margin-right:80% !important
            }
        }


        #dark-mood-switcher-desktop {
            display: none;
        }

        #dark-mood-switcher-mobile {
            -webkit-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                    transform: rotate(90deg);
            position: fixed;
            left: 0;
            top: 25%;
            display: inline-block !important;
        }



        .mobile-apps__container{
            display: none;
        }

        .mobile-apps__apps-icons-wrapper{
            height: 350px;
            padding-top: 45px;


          }

          .testimonial__item{

            width: calc(100vw / 1) !important;
          }

          .hero-section{
            padding-top: calc(var(--navbar-height) + 10px);
          }

    }