/*@import url('https://fonts.googleapis.com/css?family=Cairo&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=Almarai&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=El+Messiri&display=swap');*/ *{ padding: 0; margin: 0; /*font-family: 'Cairo';*/ /*font-family: 'Almarai', sans-serif;*/ /*font-family: 'El Messiri', sans-serif;*/ list-style: none; text-transform: capitalize; } @font-face { font-family: 'Droid Arabic Kufi','sans'; src: url(Droid.Arabic.Kufi_DownloadSoftware.iR_.ttf); } a{ text-decoration: none!important; } :root{ /*--site-color: #E96594;*/ --site-color: #EC76A0; --dark-gray:#222; --gray:#424242; --gray-det:#707070; --back-radial:radial-gradient(#F8F1F1, #E5E1E1); --back-white:#F9F9F9; --footer-color:#272727; --secPadding: 60px; --title-back-img: url('../img/background_title.jpg'); --title-back-fil: #00000088; } body{ background: var(--back-white); } /* [start nav] */ .up-nav{ background:var(--site-color); color: var(--back-white); font-weight:normal; padding: 15px 0; font-size: 14px; display: flex; align-items: center; position: relative; } .up-nav .mail-col{ text-align: left; } .up-nav i.email-nav{ border: 1px solid var(--back-white); padding: 3px ; border-radius: 4px; margin-left: 4px; } .up-nav a{ text-transform: lowercase; color: var(--back-white); } .up-nav .user-create-acc a.btn-signup-link{ margin-right: 15px; position: relative; background: var(--back-white); padding: 4px 5px; font-weight: bold; border-radius: 4px; color: var(--site-color); } .up-nav .user-create-acc a.btn-signup-link:after{ content: '-'; position: absolute; right: -11px; top: 0px; color: #ffffff77; } .up-nav .user-create-acc a.btn-login-link{ margin-right: 20px; position: relative; } .up-nav .user-create-acc a.btn-login-link:after{ content: '|'; position: absolute; right: -15px; top: -1px; color: #ffffff77; } .up-nav .user-create-acc a.btn-login-link .btn-login-word{ color: var(--site-color); background-color: var(--back-white); padding: 4px 5px; border-radius: 4px; font-weight: bold; } .up-nav .user-create-acc .contact-numbers i{ border: 1px solid var(--back-white); padding: 3px ; border-radius: 4px; margin-left: 4px; } .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,"); } .navbar-light .navbar-toggler{ border-color: var(--gray); } .navbar{ background: var(--back-white); font-weight: bold; } .navbar .navbar-brand{ margin-right: 0; margin-left: 0; } .navbar .navbar-nav .nav-link { color: #222; transition: .2s ease-in-out; position: relative; font-weight: normal; font-size: 16px; padding: 8px 8px; } .navbar .navbar-nav .nav-item.more .nav-link{ color: var(--site-color); box-sizing: border-box; -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -ms-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } .navbar .navbar-nav .nav-item:last-child .nav-link .user-icon{ /*border: 1px solid red;*/ font-size: 15px; } .navbar .navbar-nav .nav-item.more .nav-link:hover{ background: var(--site-color); color: var(--back-white); border-radius: 3px; box-shadow: 0px 2px 3px 0px #707070; } .navbar .navbar-nav .nav-item.more .nav-link:hover i{ color: var(--back-white); } .navbar .navbar-nav .nav-item .nav-link.srch-btn{ margin-right: 5px; } .navbar .navbar-nav .active>.nav-link{ color: var(--back-white); background: var(--site-color); border-radius: 3px; box-shadow: 0px 2px 3px 0px #707070; } .navbar .navbar-nav .nav-item .nav-link i{ color: var(--gray-det); font-size: 16px; background: var(--back-white); padding: 5px; border-radius: 3px; cursor: pointer; } .navbar .navbar-brand img{ width: 100%; float: right; } .navbar-expand-lg .navbar-nav .dropdown-menu { background-color: var(--back-white); } .navbar-expand-lg .navbar-nav .notification{ position: relative; } .navbar-expand-lg .navbar-nav .notification i, .navbar-expand-lg .navbar-nav .message i, .navbar-expand-lg .navbar-nav .cart i{ position: relative; } .navbar-expand-lg .navbar-nav .notification .num, .navbar-expand-lg .navbar-nav .message .num, .navbar-expand-lg .navbar-nav .cart .num{ position: absolute; top: -13px; left: -5px; font-size: 12px; color: var(--site-color); padding: 3px; border-radius: 5px; } .navbar-expand-lg .navbar-nav .more{ padding-right: 5px; margin-right: 5px; } .navbar-expand-lg .navbar-nav .more:before{ content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: #bbbbbb77; } .navbar-expand-lg .navbar-nav .more-links{ padding-left: 5px; margin-left: 5px; } .navbar-expand-lg .navbar-nav .more-links:before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #bbbbbb77; } .navbar-expand-lg .navbar-nav .more .nav-link i{ background: transparent; color: var(--site-color); } .navbar-expand-lg .navbar-nav .dropdown-menu{ padding: 15px; } .navbar-expand-lg .navbar-nav .dropdown-menu a{ font-size: 16px; color: var(--back-white); transition: .2s ease-in-out; background: #ec76a0; margin: 10px 0; text-align: center; } /* .navbar-expand-lg .navbar-nav .dropdown-menu a:hover{ color: var(--site-color); }*/ .navbar-expand-lg .navbar-nav .dropdown-menu a:active{ /*background: transparent;*/ outline: none; } .navbar-expand-lg .navbar-nav .login .dropdown-menu, .navbar-expand-lg .navbar-nav .more .dropdown-menu, .navbar-expand-lg .navbar-nav .cart .dropdown-menu, .navbar-expand-lg .navbar-nav .notification .dropdown-menu, .navbar-expand-lg .navbar-nav .message .dropdown-menu{ left: 0; } .navbar-expand-lg .navbar-nav .cart .dropdown-menu, .navbar-expand-lg .navbar-nav .notification .dropdown-menu{ width: 400px; max-height: 400px; min-height: 50px; overflow-y: scroll; border-radius: 0px; } /*.navbar-expand-lg .navbar-nav .login .dropdown-toggle::after,*/ /*.navbar-expand-lg .navbar-nav .more-links .dropdown-toggle::after,*/ /*.navbar-expand-lg .navbar-nav .course .dropdown-toggle::after,*/ .navbar-expand-lg .navbar-nav .more .dropdown-toggle::after, .navbar-expand-lg .navbar-nav .notification .dropdown-toggle::after, .navbar-expand-lg .navbar-nav .cart .dropdown-toggle::after, .navbar-expand-lg .navbar-nav .message .dropdown-toggle::after { display: none; margin-right: 0; /* vertical-align: .; */ content: ""; border: none; } .navbar-expand-lg .navbar-nav .more .dropdown-menu .dropdown-item i{ color: var(--gray); display: none; } .navbar-expand-lg .navbar-nav .cart .dropdown-menu::-webkit-scrollbar, .navbar-expand-lg .navbar-nav .notification .dropdown-menu::-webkit-scrollbar { width: 5px; } .navbar-expand-lg .navbar-nav .cart .dropdown-menu::-webkit-scrollbar-track, .navbar-expand-lg .navbar-nav .notification .dropdown-menu::-webkit-scrollbar-track { background: var(--back-white); } .navbar-expand-lg .navbar-nav .cart .dropdown-menu::-webkit-scrollbar-thumb, .navbar-expand-lg .navbar-nav .notification .dropdown-menu::-webkit-scrollbar-thumb { background: var(--back-white); transition: .2s ease-in-out; } .navbar-expand-lg .navbar-nav .cart .dropdown-menu:hover::-webkit-scrollbar-thumb, .navbar-expand-lg .navbar-nav .notification .dropdown-menu:hover::-webkit-scrollbar-thumb { transition: .2s ease-in-out; background: var(--gray-det); } .navbar-expand-lg .navbar-nav .cart .dropdown-menu{ padding-bottom: 0; } .navbar-expand-lg .navbar-nav .cart .cart-group .cart-item{ display: flex; position: relative; padding:15px 0; } .navbar-expand-lg .navbar-nav .cart .cart-group .cart-item:after{ content: ''; border-bottom: 1px solid #bbbbbb66; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 10px; } .navbar-expand-lg .navbar-nav .cart .cart-group .cart-item:last-child:after{ } .navbar-expand-lg .navbar-nav .cart .cart-group .cart-item .cart-desc{ padding-right: 10px; padding-top: 10px; width: calc(100% - 75px); text-align: right; color: var(--gray); font-weight: normal; } .navbar-expand-lg .navbar-nav .cart .cart-group .cart-item .cart-desc .course-price{ margin-top: 5px; color: var(--site-color); } .navbar-expand-lg .navbar-nav .cart .cart-group .cart-item .img{ width: 75px; height: 85px; overflow: hidden; margin-right: 15px; } .navbar-expand-lg .navbar-nav .cart .cart-group .cart-item .img img{ width: 100%; height: 100%; } .navbar-expand-lg .navbar-nav .cart .hint form{ display: flex; margin:auto; justify-content: space-around; text-align: center; font-weight: normal; padding: 20px 0; } .navbar-expand-lg .navbar-nav .cart .hint form .view-cart{ width: 40%; } .navbar-expand-lg .navbar-nav .cart .hint form .view-cart a{ font-size: 16px; } .navbar-expand-lg .navbar-nav .cart .hint form .view-cart input{ width: 100%;padding: 10px 0; border: none; outline: none; cursor: pointer; background: var(--gray-det); color: var(--back-white); border-radius: 5px; } .navbar-expand-lg .navbar-nav .cart .hint form .btn-buy{ width: 40%; } .navbar-expand-lg .navbar-nav .cart .hint form .btn-buy a{ font-size: 16px; } .navbar-expand-lg .navbar-nav .cart .hint form .btn-buy input{ width: 100%;padding: 10px 0; border: none; outline: none; cursor: pointer; background: var(--site-color); color: var(--back-white); border-radius: 5px; } .navbar-expand-lg .navbar-nav .cart .hint .empty-cart{ color: var(--back-white); background-color: var(--gray-det); font-weight: normal; border-radius: 4px; margin: 30px 25px; } .navbar-expand-lg .navbar-nav .cart .hint .total-price{ text-align: center; padding: 20px 0; color: var(--gray-det); font-weight: normal; position: relative; } .navbar-expand-lg .navbar-nav .cart .hint .total-price:after{ content: ''; border-bottom: 1px solid #bbbbbb66; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 10px; } .navbar-expand-lg .navbar-nav .cart .cart-group .cart-item .btn-delet{ position: absolute; top: 15px; left: 15px; background: transparent; padding: 4px 2px; border-radius: 4px; color: var(--site-color); border-color: transparent; outline-color: transparent; cursor: pointer; transition: .2s ease-in-out; } .navbar-expand-lg .navbar-nav .cart .cart-group .cart-item .btn-delet:hover{ background: var(--site-color); color: var(--back-white); } .navbar-expand-lg .navbar-nav .notification .notification-group .notification-item{ display: flex; position: relative; padding:15px 5px; background: var(--back-white); } .notification .notification-group .notification-item.un_read{ background: #d8d8d855; } .navbar-expand-lg .navbar-nav .notification .notification-group .notification-item.un_read{ background: #d8d8d855; } .navbar-expand-lg .navbar-nav .notification .notification-group .notification-item:hover{ background: #bbbbbb66; } .navbar-expand-lg .navbar-nav .notification .notification-group .notification-item:after{ content: ''; border-bottom: 1px solid #bbbbbb66; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 10px; } .navbar-expand-lg .navbar-nav .notification .notification-group .notification-item:first-child:after{ padding-top: 0px; } .navbar-expand-lg .navbar-nav .notification .notification-group .notification-item:last-child:after{ border-bottom-color: transparent; padding-bottom: 0px; } .navbar-expand-lg .navbar-nav .notification .notification-group .notification-item .notification-desc{ padding-right: 10px; padding-top: 5px; width: calc(100% - 75px); text-align: right; color: var(--gray); font-weight: normal; } .navbar-expand-lg .navbar-nav .notification .notification-group .notification-item .notification-desc .notification-hint{ margin-top: 5px; font-size: 13px; color: var(--gray-det); } .navbar-expand-lg .navbar-nav .notification .notification-group .notification-item .notification-desc .notification-hint .hint-time{ margin-top: 3px; } .navbar-expand-lg .navbar-nav .notification .notification-group .notification-item .img{ width: 75px; height: 75px; overflow: hidden; border-radius: 100%; padding: 2px; border:1px solid var(--gray-det); display: none; } .navbar-expand-lg .navbar-nav .notification .notification-group .notification-item .img img{ width: 100%; border-radius: 100%; } .navbar-expand-lg .navbar-nav .notification .notification-group .all-notification .show-more a{ font-size: 16px; padding: 3px 8px; border-radius: 4px; font-weight: normal; } .header-carousel #carouselExampleFade{ overflow: hidden; background-size: cover; background-attachment: fixed; position: relative; } /* .header-carousel .carousel-item .imgHeader{ height: 100%; filter: blur(5px); }*/ .header-carousel .carousel-item{ background: #272727; } .header-carousel .carousel-inner{ height: 100%; } .header-carousel .carousel-item{ height: 100%; } .header-carousel .carousel-inner .carousel-item .carousel-caption{ height: 100%; display: flex; flex-direction: column; justify-content: center; top: 0; } .header-carousel .carousel-inner .carousel-item .carousel-caption .pic{ display: flex;align-items: center; } .header-carousel .carousel-inner .carousel-item .carousel-caption .pic img{ width: 100%; height: 90%; } .header-carousel .carousel-inner .carousel-item .carousel-caption .info{ justify-content: center; display: flex; flex-direction: column; text-align: right; text-shadow: 0px 2px 5px #525252; /*padding-right: 50px*/ } .header-carousel .carousel-control-next-icon, .carousel-control-prev-icon { color: #FFF; background: none; } .header-carousel .carousel-control-next-icon i, .carousel-control-prev-icon i{ padding: 10px 18px; background: rgba(0,0,0,.5); border-radius: 0px 4px 4px 0px; font-weight: bold; font-size: 20px; } .header-carousel .carousel-control-next-icon i{ border-radius: 4px 0px 0px 4px ; } .header-carousel .carousel-caption{ width: 100%; height: 100%; top: 0; right: 0; } .header-fixed{ position: fixed; top: 0; left: 0; right: 0; z-index: 20; } /* search modal */ .srch-modal{ width: 100%; height: 100%; background-color: rgb(0,0,0, 0.8); position: fixed; top: 0; z-index: 22; display: flex; justify-content: center; align-items: center; transition: .3s ease-in-out; display: none; } .login-modal{ width: 100%; height: 100%; background-color: rgb(0,0,0, 0.8); position: fixed; top: 0; z-index: 22; display: flex; justify-content: center; align-items: center; transition: .3s ease-in-out; display: none; } .login-modal .modal-content{ width: 400px; position: relative; background-color: var(--back-white); padding: 40px 0; text-align: center; opacity: 0; } .login-modal .modal-content .login-form .title-group{ position: relative; color: var(--dark-gray); font-weight: bold; } .login-modal .modal-content .login-form .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .login-modal .modal-content .login-form .form-title:before{ content: ""; height: 3px; width: 160px; background: var(--gray); position: absolute; bottom: -20px; left: calc(50% - 80px); } .login-modal .modal-content .login-form .form-title:after{ content: ""; height: 3px; width: 80px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 40px); } .login-modal .modal-content .login-form .filed{ position: relative; border: 1px solid var(--gray-det); margin: 10px 0; height: 50px; border-radius: 5px; overflow: hidden; } .login-modal .modal-content .login-form .forget-link{ border: none; margin: 0px 0; height: auto; border-radius: 0px; overflow: hidden; margin-top: 5px; } .login-modal .modal-content .login-form .forget-link span{ color: var(--gray); transition: .2s ease-in-out; } .login-modal .modal-content .login-form .forget-link span:hover{ color: var(--site-color); } .login-modal .modal-content .login-form .filed i{ position: absolute; color: var(--gray); padding: 0px 14px; height: 100%; align-items: center; display: flex; left: 0; top: 0; } .login-modal .modal-content .login-form .social-login img{ width: 40px; margin-bottom: 20px; margin-left: 20px; transition: .2s ease-in-out; } .login-modal .modal-content .login-form .social-login img:hover{ border-radius: 5px; } .login-modal .modal-content .login-form .social-login img.google-img { margin-left: 0; } .login-modal .modal-content .login-form .filed input{ width: 100%; height: 100%; padding: 5px 8px; outline: none; border: none; text-transform: lowercase; } .login-modal .modal-content .login-form .filed input.email, .login-modal .modal-content .login-form .filed input.password{ padding-left: 50px; } .login-modal .modal-content .login-form .filed .btn-login{ cursor: pointer; background-color: var(--site-color); color: var(--back-white); } .login-modal .modal-content .login-form .btn-filed{ width: 50%; margin: 20px auto; } .login-modal .modal-content .login-form .create-acc,.login-modal .modal-content .login-form .create-acc a{ color: var(--gray); transition: .2s ease-in-out; font-size: 15px; margin-top: 5px; } .login-modal .modal-content .login-form .create-acc:hover a{ color: var(--site-color); } .login-modal .modal-content .login-form .filed.remember{ border: none; height: auto; } .login-modal .modal-content .login-form .filed.remember label{ cursor: pointer; color: var(--gray); } .login-modal .modal-content .login-form .filed.remember input.remember-me{ width: 20px; height: 15px; cursor: pointer; margin-left: 6px } /* ------------ signup -------------- */ .signup-modal{ width: 100%; height: 100%; background-color: rgb(0,0,0, 0.8); position: fixed; top: 0; z-index: 22; display: flex; justify-content: center; align-items: center; transition: .3s ease-in-out; display: none; } .signup-modal .modal-content{ width: 600px; position: relative; background-color: var(--back-white); padding: 40px 0; text-align: center; opacity: 0; } .signup-modal .modal-content .signup-form .title-group{ position: relative; color: var(--dark-gray); font-weight: bold; } .signup-modal .modal-content .signup-form .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .signup-modal .modal-content .signup-form .form-title:before{ content: ""; height: 3px; width: 160px; background: var(--gray); position: absolute; bottom: -20px; left: calc(50% - 80px); } .signup-modal .modal-content .signup-form .form-title:after{ content: ""; height: 3px; width: 80px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 40px); } .signup-modal .modal-content .signup-form .social-signup img{ width: 40px; margin-bottom: 20px; margin-left: 20px; transition: .2s ease-in-out; } .signup-modal .modal-content .signup-form .social-signup img:hover{ border-radius: 5px; } .signup-modal .modal-content .signup-form .social-signup img.google-img { margin-left: 0; } .signup-modal .modal-content .signup-form .filed{ position: relative; border: 1px solid var(--gray-det); margin: 10px 0; height: 50px; border-radius: 5px; overflow: hidden; } .signup-modal .modal-content .signup-form .filed i{ position: absolute; color: var(--gray); padding: 0px 14px; height: 100%; align-items: center; display: flex; left: 0; top: 0; } .signup-modal .modal-content .signup-form .filed input{ width: 100%; height: 100%; padding: 5px 8px; outline: none; border: none; font-size: 13px; text-transform: lowercase; } .signup-modal .modal-content .signup-form .filed input.email, .signup-modal .modal-content .signup-form .filed input.password, .signup-modal .modal-content .signup-form .filed input.userName, .signup-modal .modal-content .signup-form .filed input.phone { padding-left: 50px; } .signup-modal .modal-content .signup-form .filed input.code-country{ background-color: var(--back-white); } .signup-modal .modal-content .signup-form .filed .btn-signup{ cursor: pointer; background-color: var(--site-color); color: var(--back-white); } .signup-modal .modal-content .signup-form .btn-filed{ width: 50%; margin: 0 auto; margin-top: 20px; } .signup-modal .modal-content .signup-form .login-acc, .signup-modal .modal-content .signup-form .login-acc a{ color: var(--gray); transition: .2s ease-in-out; font-size: 15px; margin-top: 15px; } .signup-modal .modal-content .signup-form .login-acc:hover a{ color: var(--site-color); } .srch-modal .srch-content{ position: relative; } .srch-modal .srch-content .srch-form{ width: 500px; position: relative; border: 1px solid var(--site-color); border-radius: 4px; opacity: 0; box-shadow: 0px 15px 15px -8px #000; } .srch-modal .srch-content .srch-form input.srch-box{ padding: 10px 15px ; width: 100%; border: none; outline: none; padding-left: 50px; height: 50px; } .srch-modal .srch-content .srch-form .srch-click{ position: absolute; left: 0; top: 0; padding: 10px 15px; cursor: pointer; border: none; outline: none; background: var(--site-color); height: 100%; color: var(--back-white); } /* [end nav] */ /* [start courses sec] */ .courses{ background: var(--back-radial); padding: var(--secPadding) 0px; } .courses .title-col{ padding-bottom: 80px; } .courses .item{ height: 360px; background: var(--back-white); box-shadow: 0 2px 10px 1px #b5b5b5; transition: .4s ease-in-out; margin-bottom: 30px; } .courses .item .item-group{ position: relative; text-align: right; } .courses .item .item-group .video, .courses .item .item-group .img{ width: 100%; height: 220px; /*background-color: var(--dark-gray);*/ background-color: #bbb; position: relative; text-align: center; } .courses .item .item-group .video iframe, .courses .item .item-group .img img{ height: 100%; width: 100%; } .courses .item .item-group .img img{ width: auto; } .courses .item .item-group .img .btn-click{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; cursor: pointer; align-items: center; font-size: 60px; } .courses .item .item-group .img .btn-click button.youtube{ background: none; border: none; outline: none; transition: .2s ease-in-out; cursor: pointer; color: #ea0000; position: relative; z-index: 2; } .courses .item .item-group .img .btn-click:after{ content: ''; position: absolute; width: 25px; height: 25px; background: #fff; } .courses .item .item-group .img .btn-click:hover button.youtube{ color: var(--site-color); } .courses .item .item-group .course-hint{ position: absolute; bottom: -1px; right: 20px; background: var(--back-white); padding: 3px 12px ; border-radius: 3px 3px 0 0; font-size: 14px; color: var(--site-color) } .courses .item .item-group .desc .item-title{ color: var(--dark-gray); transition: .3s ease-in-out; } .courses .item .item-group .desc{ margin: 10px 20px; } .courses .item .item-group .desc .usersNum, .price , .old-price , .videosNum , .time , .comments{ color: var(--gray-det); font-size: 14px; } .courses .item .item-group .desc .old-price{ /*color: var(--site-color); background: #d2cece;*/ background: var(--gray-det); color: var(--back-white); font-weight: bold; padding: 3px 8px; transition: .3s ease-in-out; text-decoration: line-through; margin-left: 5px; } .courses .item .item-group .desc .price{ /*color: var(--site-color); background: #d2cece;*/ background: var(--gray-det); color: var(--back-white); font-weight: bold; padding: 3px 8px; transition: .3s ease-in-out } .courses .item .item-group .desc .line{ width: 80%; height: 1px; background: #d2cece; margin: 20px auto 10px auto; } /* buy & add to cart */ .courses .item .item-group .video .shop-cart{ position: absolute; top: 30px; right: 0; background: #f9f9f9; padding: 3px 7px; border-radius: 10px 0 0 10px; color: var(--gray); box-shadow: -4px 0px 6px -2px #353535; border: transparent; outline-color: transparent; cursor: pointer; } .courses .item .item-group .video .shop-cart i{ transition: .2s ease-in-out; font-size: 15px; } .courses .item .item-group .video .shop-cart .add-to-cart{ font-size: 0px; transition: .2s ease-in-out; } .courses .item .item-group .video .shop-cart:hover .add-to-cart{ font-size: 14px; } .courses .item:hover .item-group .video .shop-cart i{ color: var(--site-color); } /* buy */ .courses .item .item-group .video .buy{ position: absolute; top: 70px; right: 0; background: #f9f9f9; padding: 3px 7px; border-radius: 10px 0 0 10px; color: var(--gray); box-shadow: -4px 0px 6px -2px #353535; } .courses .item .item-group .video .buy i{ transition: .2s ease-in-out; font-size: 15px; } .courses .item .item-group .video .buy .buy-course{ font-size: 0px; transition: .2s ease-in-out; } .courses .item .item-group .video .buy:hover .buy-course{ font-size: 14px; } .courses .item:hover .item-group .video .buy i{ color: var(--site-color); } /*fav*/ .courses .item .item-group .video .fav{ position: absolute; top: 30px; left: 15px; background: #f9f9f9; padding: 3px 7px; color: var(--gray); box-shadow: 0px 5px 6px -2px #353535; border-radius: 4px; opacity: 0; transition: .2s ease-in-out; } .courses .item:hover .item-group .video .fav{ opacity: 1; cursor: pointer; } .courses .item .item-group .video .fav i{ transition: .2s ease-in-out; font-size: 15px; } .courses .item .item-group .video .fav .fav-course{ font-size: 0px; transition: .2s ease-in-out; } .courses .item .item-group .video .fav:hover .fav-course{ font-size: 14px; } .courses .item .item-group .video .fav i.active{ color: var(--site-color); } /*Hover*/ .courses .item:hover{ box-shadow: 0 5px 6px 1px #b5b5b5; transform: translateY(-4px); } .courses .item:hover .item-group .desc .item-title{ color: var(--site-color); } .courses .item:hover .item-group .desc .price{ background: var(--site-color); color: var(--back-white); } .courses .item:hover .item-group .desc .old-price{ background: var(--gray); color: var(--back-white); } .courses .title-group{ position: relative; } .courses .title{ position: relative; color: var(--dark-gray); font-weight: bold; } .courses .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .courses .title:before{ content: ""; height: 3px; width: 180px; background: var(--gray); position: absolute; bottom: -20px; left: calc(50% - 90px); } .courses .title:after{ content: ""; height: 3px; width: 90px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 45px); } /* [start courses-online sec] */ /* start title sec */ .courses-online-page, .courses-practical-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .courses-online-page .courses-online-title-row, .courses-practical-page .courses-practical-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .courses-online-page .courses-online-title-row:after, .courses-practical-page .courses-practical-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .courses-online-page .courses-online-title-row:before, .courses-practical-page .courses-practical-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .courses-online-page .title-group, .courses-practical-page .title-group{ position: relative; } .courses-online-page .title, .courses-practical-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .courses-online-page .title-img, .courses-practical-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .courses-online-page .title:before, .courses-practical-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .courses-online-page .title:after, .courses-practical-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .courses-online-page .item, .courses-practical-page .item{ overflow: hidden; height: 360px; background: var(--back-white); box-shadow: 0 2px 10px 1px #b5b5b5; transition: .4s ease-in-out; margin-bottom: 30px; } .courses-online-page .item .item-group, .courses-practical-page .item .item-group{ position: relative; text-align: right; } .courses-online-page .item .item-group .img, .courses-online-page .item .item-group .video, .courses-practical-page .item .item-group .img, .courses-practical-page .item .item-group .video{ width: 100%; height: 220px; background-color: #bbb; position: relative; } .courses-online-page .item .item-group .video iframe, .courses-online-page .item .item-group .video img, .courses-practical-page .item .item-group .video iframe, .courses-practical-page .item .item-group .video img{ height: 100%; width: 100%; } .courses-online-page .item .item-group .video img, .courses-practical-page .item .item-group .video img{ height: 100%; width: auto; text-align: center; } .courses-online-page .item .item-group .course-hint, .courses-practical-page .item .item-group .course-hint{ position: absolute; bottom: -1px; right: 20px; background: var(--back-white); padding: 3px 12px ; border-radius: 3px 3px 0 0; font-size: 14px; color: var(--site-color) } .courses-online-page .item .item-group .desc .item-title, .courses-practical-page .item .item-group .desc .item-title{ color: var(--dark-gray); transition: .3s ease-in-out; } .courses-online-page .item .item-group .desc, .courses-practical-page .item .item-group .desc{ margin: 10px 20px; } .courses-online-page .item .item-group .desc .usersNum, .price , .videosNum , .time , .comments, .courses-practical-page .item .item-group .desc .usersNum, .price , .videosNum , .time , .comments{ color: var(--gray-det); font-size: 14px; } .courses-online-page .item .item-group .desc .price, .courses-practical-page .item .item-group .desc .price{ color: var(--back-white); background: var(--gray-det); font-weight: bold; padding: 3px 8px; transition: .3s ease-in-out } .courses-online-page .item .item-group .desc .line, .courses-practical-page .item .item-group .desc .line{ width: 80%; height: 1px; background: #d2cece; margin: 20px auto 10px auto; } /*Hover*/ .courses-online-page .item:hover, .courses-practical-page .item:hover{ box-shadow: 0 5px 6px 1px #b5b5b5; transform: translateY(-4px); } .courses-online-page .item:hover .item-group .desc .item-title, .courses-practical-page .item:hover .item-group .desc .item-title{ color: var(--site-color); } .courses-online-page .item:hover .item-group .desc .price, .courses-practical-page .item:hover .item-group .desc .price{ background: var(--site-color); color: var(--back-white); } /* [end courses-online sec] */ /* [end courses sec] */ /* [start choose sec] */ .choose-us{ position: relative; padding: var(--secPadding) 0px; overflow: hidden; } .choose-us:after{ background: url("../img/whyus/chooseus.jpg"); background-size: cover; background-attachment: fixed; position: absolute; content: ''; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; filter: blur(5px); opacity: .5; } .choose-us .title-group{ position: relative; } .choose-us .title{ position: relative; color: var(--dark-gray); font-weight: bold; } .choose-us .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .choose-us .title:before{ content: ""; height: 3px; width: 180px; background: var(--gray); position: absolute; bottom: -20px; left: calc(50% - 90px); } .choose-us .title:after{ content: ""; height: 3px; width: 90px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 45px); } .choose-us .item{ background: var(--back-white); color: var(--dark-gray); text-align: center; margin-bottom: 10px; width: 100%; position: relative; box-shadow: 0 2px 10px 1px #b5b5b5; transition: .2s ease-in-out; } .choose-us .item:hover{ border-bottom: 3px solid var(--site-color); box-shadow: 0 5px 6px 1px #b5b5b5; transform: translateY(-4px); } .choose-us .item .item-title{ transition: .3s ease-in-out; } .choose-us .item:hover .item-title{ color: var(--site-color); } .choose-us .item .item-group{ padding:20px 20px 0px 20px; } .choose-us .item img{ width: 80px; margin-bottom: 10px; transition: .2s ease-in-out; opacity: .7; } .choose-us .item:hover img{ box-shadow: 0px 0px 5px 3px #e2e2e2; padding: 5px; border-radius: 5px; } .choose-us .item .item-title{ margin-bottom: 20px; font-size: 16px; font-weight: bold; position: relative; } .choose-us .item .item-title:after{ content: ''; width: 100px; height: 2px; background: var(--dark-gray); position: absolute; bottom: -7px; left: calc(50% - 50px); transition: .3s ease-in-out; transform: scale(0); } .choose-us .item:hover .item-title:after{ transform: scale(1); } .choose-us .item .item-desc{ color: var(--gray-det); } /* [end choose sec] */ /* [start recipes sec] */ .recipes{ background: var(--back-white); padding: var(--secPadding) 0px; } .recipes .title-group{ position: relative; } .recipes .title{ position: relative; color: var(--dark-gray); font-weight: bold; } .recipes .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .recipes .title:before{ content: ""; height: 3px; width: 160px; background: var(--gray); position: absolute; bottom: -20px; left: calc(50% - 80px); } .recipes .title:after{ content: ""; height: 3px; width: 80px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 40px); } .recipes .item{ /*height: 300px;*/ background: var(--back-white); /*box-shadow: 0 2px 10px 1px #b5b5b5;*/ transition: .3s ease-in-out; margin-bottom: 15px; margin-top: 15px; } .recipes .item:hover{ box-shadow: 0 5px 6px 1px #b5b5b5; transform: translateY(-4px); } .recipes .item .item-group{ position: relative; text-align: right; display: flex; align-items: center; justify-content: center; } .recipes .item .item-group .pic{ width: 100%; height: 290px; background-color: var(--dark-gray); position: relative; overflow:hidden; } .recipes .item .item-group .pic img{ height: 100%; width: 100%; } .recipes .item .item-group .pic .hide{ width: 100%; height: 100%; background: rgb(0,0,0,.5); position: absolute; top: 0; opacity: 0; transition: .3s ease-in-out; display: flex; justify-content: center; align-items: center; color: var(--back-white); flex-direction: column; } .recipes .item .item-group .pic .hide h6{ padding: 5px; background-color: var(--site-color); border-radius: 4px; } .recipes .item .item-group .pic .hide i{ font-size: 40px; color: var(--site-color); margin-bottom: 10px; } .recipes .item:hover .item-group .pic .hide{ opacity: 1; } .recipes .item .item-group .desc{ position: absolute; bottom: 0; background-color: rgb(0,0,0,.7); /*width: 100%*/ left: 0; right: 0; } .recipes .item .item-group .desc .item-title{ color: var(--back-white); transition: .3s ease-in-out; } .recipes .item:hover .item-group .desc .item-title{ color: var(--site-color); } .recipes .showAll{ color: var(--gray-det); transition: .2s ease-in-out; } .recipes .showAll:hover{ color: var(--site-color); } /* -------------- [recipes-page Start] -------------- */ .recipes-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; } .recipes-page .recipes-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .recipes-page .recipes-title-row:after{ content: ''; background-image: url('../img/back.jpg'); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .recipes-page .recipes-title-row:before{ content: ''; position: absolute; background: #00000088; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .recipes-page .title-group{ position: relative; } .recipes-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .recipes-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .recipes-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .recipes-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* -------------- [recipes-page End] -------------- */ /* [end recipes sec] */ /* [start madeIt sec] */ .madeIt{ background: var(--back-radial); padding: var(--secPadding) 0px; } .madeIt .title-group{ position: relative; } .madeIt .title{ position: relative; color: var(--dark-gray); font-weight: bold; } .madeIt .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .madeIt .title:before{ content: ""; height: 3px; width: 180px; background: var(--gray); position: absolute; bottom: -20px; left: calc(50% - 90px); } .madeIt .title:after{ content: ""; height: 3px; width: 90px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 45px); } .madeIt .item{ height: 360px; background: var(--back-white); box-shadow: 0 2px 10px 1px #b5b5b5; transition: .3s ease-in-out; cursor: pointer; } .madeIt .owl-carousel .owl-stage{ padding: 15px 0px; } .madeIt .owl-carousel .item .item-group{ position: relative; text-align: right; } .madeIt .item .item-group{ position: relative; height: 360px; } .madeIt .item .item-group img{ width: 100%; height: 100%; } .madeIt .item .item-group .hide{ width: 100%; height: 100%; background: #1d1d1da6; position: absolute; top: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; } .madeIt .item .item-group .hide .item-title span{ background-color: var(--site-color); padding: 3px 8px; border-radius: 4px } .madeIt .item .item-group .item-title{ color: var(--back-white); } .madeIt .item .item-group .desc-hide{ background: #0000008f; width: 100%; position: absolute; bottom: 0; padding: 15px 0; text-align: center; color: var(--back-white); font-size: 15px; box-shadow: -1px -3px 4px -1px black; } .madeIt .item .item-group .hide .item-title, .madeIt .item .item-group .desc-hide .view{ color: var(--back-white); } .madeIt .item .item-group .hide, .madeIt .item .item-group .desc-hide{ opacity: 0; transition: .4s ease-in-out; } .madeIt .item:hover .item-group .hide, .madeIt .item:hover .item-group .desc-hide{ opacity: 1; } .madeIt .owl-carousel .owl-nav button.owl-prev, .madeIt .owl-carousel .owl-nav button.owl-next { color: var(--back-white); font-family: 'Cairo'; background: var(--dark-gray); padding: 3px 15px !important; font-weight: bold; transition: .2s ease-in-out; cursor: pointer; outline: none; } .madeIt .owl-carousel .owl-nav button.owl-prev:hover, .madeIt .owl-carousel .owl-nav button.owl-next:hover{ color: var(--dark-gray); background: var(--site-color); } .madeIt .item:hover{ box-shadow: 0 5px 6px 1px #b5b5b5; transform: translateY(-4px); } /* [end madeIt sec] */ /* [start payment sec] */ .payment{ background: var(--back-white); padding: var(--secPadding) 0px; text-align: right; } .payment:after{ background: url("../img/whyus/chooseus.jpg"); background-size: cover; background-attachment: fixed; position: absolute; content: ''; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; filter: blur(8px); opacity: .5; } .payment .title-group{ position: relative; } .payment .title{ position: relative; color: var(--dark-gray); font-weight: bold; margin-bottom: 50px; } .payment .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .payment .title:before{ content: ""; height: 3px; width: 160px; background: var(--gray); position: absolute; bottom: -20px; left: calc(50% - 80px); } .payment .title:after{ content: ""; height: 3px; width: 80px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 40px); } .payment .owl-carousel .item img{ filter: grayscale(100%); width: 60%; height: 100%; transition: .2s ease-in-out; } .payment .owl-carousel .item img:hover{ filter: grayscale(0); } .payment .item .item-group{ display: flex; justify-content: center; } .payment .owl-carousel .owl-nav{ display: none; } /* [end payment sec] */ /* [start testimonial sec] */ .testimonial{ background: var(--back-radial); padding: var(--secPadding) 0px; } .testimonial .title-group{ position: relative; } .testimonial .title{ position: relative; color: var(--dark-gray); font-weight: bold; } .testimonial .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .testimonial .title:before{ content: ""; height: 3px; width: 160px; background: var(--gray); position: absolute; bottom: -20px; left: calc(50% - 80px); } .testimonial .title:after{ content: ""; height: 3px; width: 80px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 40px); } .testimonial .owl-carousel .item{ height: 250px; width: 500px; position: relative; background: var(--back-radial); margin: 0 auto; margin-top: 50px; margin-bottom: 10px; text-align: center; box-shadow: 0 2px 10px 1px #b5b5b5; transition: .4s ease-in-out; } /*.testimonial .owl-carousel .item .item-group{ padding: 0 20px; }*/ .testimonial .owl-carousel .item .item-group .img{ width: 100px; height: 100px; background: var(--back-radial); border-radius: 100%; position: absolute; top: -50px; left: calc(50% - 50px); border: 3px solid var(--back-white); overflow: hidden; } .testimonial .owl-carousel .item .item-group .img .user-pic{ width: 100%; height: 100%; } .testimonial .owl-carousel .item .item-group .userName{ padding-top: 60px; font-weight: bold; color: var(--site-color); } .testimonial .owl-carousel .item .item-group .comment{ padding-top: 60px; color: var(--gray-dark); font-weight: bold; } .testimonial .owl-carousel .item .item-group .circle{ width: 40px; height: 40px; background: var(--back-radial); position: absolute; top: -20px; right: -20px; border-radius: 100%; border: 3px solid var(--back-white); line-height: 35px; font-size: 14px; } .testimonial .owl-carousel .item .item-group .star{ width: 11px; position: absolute; top: -11px; right: -14px; } .testimonial .owl-carousel .owl-stage-outer { /*overflow: visible; */ } .testimonial .owl-carousel .owl-nav button.owl-prev, .testimonial .owl-carousel .owl-nav button.owl-next { color: var(--back-white); font-family: 'Cairo'; background: var(--dark-gray); padding: 3px 15px !important; font-weight: bold; transition: .2s ease-in-out; cursor: pointer; outline: none; } .testimonial .owl-carousel .owl-nav button.owl-prev:hover, .testimonial .owl-carousel .owl-nav button.owl-next:hover{ color: var(--dark-gray); background: var(--site-color); } /* [end testimonial sec] */ /* [start footer sec] */ .footer{ background: #272727; padding: var(--secPadding) 0px; color: var(--back-white); text-align: right; font-size: 15px; } .footer a, .footer li, .footer p, .footer i{ color: #d6d6d6; transition: .1s ease-in-out; text-transform: lowercase; } .footer a:hover{ color: var(--back-white); } .footer h5{ position: relative; padding-bottom: 15px; } .footer h5:after{ content: ''; width: 100%; height: 2px; background: var(--gray-det); bottom: 0; right: 0; position: absolute; opacity: .2; } .footer h5:before{ content: ''; width: 33.3%; height: 2px; background: var(--site-color); bottom: 0; right: 0; position: absolute; opacity: 1; } .footer .social i{ font-size: 30px; margin-left: 15px; padding: 5px 8px; border-radius: 3px; transition: .2s ease-in-out; } .footer .social i.twitter{ background: #00aced; color: var(--back-white); } .footer .social i.facebook{ background: #3b5998; color: var(--back-white); } .footer .social i.youtube{ background: #dc0303; color: var(--back-white); } .footer .social i.linkedin{ background: #007bb6; color: var(--back-white); } .footer .social i.instagram{ background: #e4405f; color: var(--back-white); } .footer li, .footer p{ margin-top: 15px; } .footer .sec-desc p, .footer .sec-contact li{ margin-top: 23px; } .footer .sec-desc p{ line-height: 30px; } .footer .sec-contact .newsletter .subscribe, .footer .sec-contact .newsletter .subscribe .form{ position: relative; width: 100%; overflow: hidden; color: var(--gray-det); } .footer .sec-contact .newsletter h6{ color: #d6d6d6; margin-top: 15px; } .footer .sec-contact .newsletter .subscribe .form{ border: 2px solid var(--gray-det); border-radius: 3px; margin-top: 5px; width: 100%; } .footer .sec-contact .newsletter .subscribe .form input.email-input{ width: 100%; border: none; outline: none; height: 100%; padding: 10px 7px ; background: var(--back-white); font-size: 15px; padding-left: 65px; } .footer .sec-contact .newsletter .subscribe .form input.submit{ position: absolute; left: 0; top: 0; border: none; outline: none; padding: 5px 7px; background: var(--site-color); color: var(--back-white); height: 100%; cursor: pointer; } .footer .sec-desc .payments h6{ color: #d6d6d6; margin-bottom: 0px; margin-top: 30px; } .footer .sec-desc .payments img{ width: 60px; margin-left: 10px; margin-top: 15px; filter: grayscale(30%); transition: .2s ease-in-out; border-radius: 4px; } .footer .sec-desc .payments img:hover{ filter: grayscale(0); } .copyright{ background: #222; color: #d6d6d6; font-size: 14px; padding: 10px 0; } .copyright a{ color: #d6d6d6; } /* [start contactUs page] */ /* start title sec */ .contactUs-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .contactUs-page .contactUs-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .contactUs-page .contactUs-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .contactUs-page .contactUs-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .contactUs-page .title-group{ position: relative; } .contactUs-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .contactUs-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .contactUs-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .contactUs-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .contactUs-page { position: relative; overflow: hidden; } .contactUs-page .item-group{ padding: 20px 0; transition: .2s ease-in-out; } .contactUs-page .item-group:hover h6{ color: var(--site-color); } .contactUs-page .item-group:hover i{ transform: translateY(-5px); } .contactUs-page .item-group i, .contactUs-page .item-group h6, .contactUs-page .item-group p{ margin: 0; padding: 0; transition: .2s ease-in-out } .contactUs-page .item-group i{ font-size: 40px; color: var(--site-color); } .contactUs-page .item-group p{ font-size: 18px; color: var(--gray); } .contactUs-page .item-group p a{ color: var(--gray); text-transform: lowercase; transition: .1s ease-in-out; } .contactUs-page .item-group p a:hover{ color: var(--site-color); } .contactUs-page .item-group h6{ margin-top: 25px; margin-bottom: 10px; color: var(--dark-gray); font-weight: bold; } .contactUs-page .email{ border-left: 1px solid var(--gray-det); border-right: 1px solid var(--gray-det); } .contactUs-page .form{ padding-top: 40px; } .contactUs-page .form input, .contactUs-page .form textarea, .contactUs-page .form select{ width: 100%; border-radius: 4px; padding: 8px 15px; margin: 5px 0; border: 1px solid var(--gray-det); outline: none; background: var(--back-white) } .contactUs-page .form .btn-send input{ width: 110px; cursor: pointer; transition: .2s ease-in-out; background: var(--site-color); color: var(--back-white); outline: none; border: 2px solid transparent; } .contactUs-page .form .btn-send input:hover{ width: 130px; border: 2px solid var(--gray-det); } .contactUs-page .form select{ padding: 8px 15px; color: var(--gray); } .contactUs-page .form select option{ color: var(--gray); } .contactUs-page .form textarea{ resize: none; min-height: 140px; } .contactUs-page .keep-touch{ display: flex; justify-content: center; align-items: center; } .contactUs-page .keep-touch h4{ color: var(--dark-gray); } .contactUs-page .keep-touch i{ color: var(--site-color); padding: 10px 15px; margin:0px 5px; border-radius: 4px; font-size: 22px; border: 1px solid #bbbbbb; transition: .1s ease-in-out; box-shadow: 0px 10px 10px -11px #909090; } .contactUs-page .keep-touch i.twitter{ background: #00aced; color: var(--back-white); } .contactUs-page .keep-touch i.facebook{ background: #3b5998; color: var(--back-white); } .contactUs-page .keep-touch i.youtube{ background: #dc0303; color: var(--back-white); } .contactUs-page .keep-touch i.linkedin{ background: #007bb6; color: var(--back-white); } .contactUs-page .keep-touch i.instagram{ background: #e4405f; color: var(--back-white); } /* [end contactUs page] */ /* [start aboutUs page] */ .aboutUs-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .aboutUs-page .aboutUs-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .aboutUs-page .aboutUs-title-row:after{ content: ''; background-image: url('../img/back.jpg'); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .aboutUs-page .aboutUs-title-row:before{ content: ''; position: absolute; background: #00000088; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .aboutUs-page .title-group{ position: relative; } .aboutUs-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .aboutUs-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .aboutUs-page .title:before{ content: ""; height: 3px; width: 100px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 50px); } .aboutUs-page .title:after{ content: ""; height: 3px; width: 50px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 25px); } .aboutUs-page .img-group{ padding-left: 150px; position: relative; height: 500px; } .aboutUs-page .img-group .img{ border: 6px solid var(--gray-det); position: relative; width: 100%; height: 100%; border-radius: 5px; } .aboutUs-page .img-group .img img.main{ position: absolute; top: 20px; left: 20px; height: 100%; width: 100%; border-radius: 5px; } .aboutUs-page .img-group .img img.icon{ position: absolute; top: calc(50% - 50px); left: -50px; height: 200px; width: 150px; border-radius: 5px; opacity: .8; border: 3px solid var(--gray-det); padding: 5px; } .aboutUs-page .desc h1{ text-align: center; margin-bottom: 40px; color: var(--site-color) } .aboutUs-page .desc span{ font-size: 22px; line-height: 50px; word-break: keep-all; } /* [end aboutUs page] */ /* [start question page] */ /* start title sec */ .question-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .question-page .question-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .question-page .question-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .question-page .question-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .question-page .title-group{ position: relative; } .question-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .question-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .question-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .question-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .question-page .card{ color: var(--gray-det); } .question-page .card .card-header{ cursor: pointer; } .question-page .card:hover .btn-link{ color: var(--site-color); } .question-page .card .btn-link{ color: var(--dark-gray); text-decoration: none; transition: .3s ease-in-out; } /* [end question page] */ /* [start privacy page] */ /* start title sec */ .privacy-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .privacy-page .privacy-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .privacy-page .privacy-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .privacy-page .privacy-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .privacy-page .title-group{ position: relative; } .privacy-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .privacy-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .privacy-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .privacy-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .privacy-page{ position: relative; } .privacy-page .main-title-group{ text-align: center; } .privacy-page .main-title-group i.fa-user-secret{ font-size: 32px; border: 2px solid var(--back-white); background: var(--site-color); padding: 5px 15px; margin-bottom: 10px; color: var(--back-white) } .privacy-page .points-group .hint .hint-title{ transition: .2s ease-in-out; position: relative; } .privacy-page .points-group .hint:hover .hint-title{ color: var(--site-color); } .privacy-page .points-group .hint .hint-body{ font-size: 18px; } /* [end privacy page] */ /* [end footer sec] */ /* [start plugins sec] */ /* magnific-popup */ .mfp-zoom-out-cur .mfp-image-holder .mfp-close{ cursor: pointer; } .mfp-zoom-out-cur{ cursor: default; } .lg-outer.lg-visible { direction: ltr; } /* [end plugins sec] */ /* ------------ [Home Page Ended] ------------ */ /* [start profile user page] */ /* start title sec */ /* start title sec */ .profile-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .profile-page .profile-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .profile-page .profile-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .profile-page .profile-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .profile-page .title-group{ position: relative; } .profile-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .profile-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .profile-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .profile-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .profile-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .profile-page .profile-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .profile-page .profile-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .profile-page .profile-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .profile-page .title-group{ position: relative; } .profile-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .profile-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .profile-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .profile-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .profile-page, .profile-page .group{ position: relative; } .profile-page .group{ padding: 35px 15px; background: var(--back-white); border-radius: 4px; color: var(--gray); font-size: 15px; height:100%; } .profile-page .group .img{ width: 150px; height: 150px; margin: 0px auto; margin-bottom: 20px; border-radius: 100%; border: 2px solid var(--gray-det); position: relative; overflow: hidden; padding: 2px; } .profile-page .group .img img{ border-radius: 100%; height: 100%; } .profile-page .group .info .icon i{ margin-left: 10px; } .profile-page .group .info.userName{ font-weight: bold; } .profile-page .group .info{ margin: 10px 0; border: 1px solid var(--gray); color: var(--gray); padding: 7px 0px; border-radius: 3px; word-break: break-all; font-weight: bold; } .profile-page .group .info .badge-success{ font-size: 15px; } .profile-page .group .info.id-num .num{ background: var(--site-color); color: var(--back-white); padding: 0px 5px; border-radius: 3px; } .profile-page .tab-content.main{ background: var(--back-white); height: 100%; border-radius: 5px; padding: 35px 20px; } .profile-page .tab-content .tabs-status{ width: 100%; padding: 0 15px; } .profile-page .tab-content .tabs-status .nav-pills{ border-bottom: 1px solid #bbbbbb77; padding-bottom: 30px; } .profile-page .tab-content .tabs-status .nav-pills .nav-link{ color: var(--back-white); margin-left: 15px; } .profile-page .tab-content .tabs-status .nav-pills .nav-link.activee{ background: #8bc34a; } .profile-page .tab-content .tabs-status .nav-pills .nav-link.pending{ background: #17a2b8; } .profile-page .tab-content .tabs-status .nav-pills .nav-link.ended{ background: var(--gray-det); } .profile-page .tab-content .tabs-status .nav-pills .nav-link.reports{ background: #ca2222; } .profile-page .tab-content .tabs-status .tab-content{ padding: 0; } .profile-page .tab-content .title-sec{ border-bottom: 1px solid #bbbbbb99; color: var(--gray-det); padding-bottom: 10px; margin-bottom: 30px; position: relative; } .profile-page .tab-content .title-sec h2 span{ position: relative; } .profile-page .tab-content .title-sec h2 span:after{ content: ''; height: 1px; position: absolute; bottom: -20px; right: 0; width: 110%; background: var(--site-color); } .profile-page .tab-content .title-sec h2 span{ font-size: 22px } .profile-page .tab-content .title-sec.title-courses:before{ content: '\f19d'; font-family: 'Font Awesome 5 free'; font-weight: 900; position: absolute; top: -25px; right: -20px; transform: rotate(20deg); font-size: 30px; color: var(--site-color); } .profile-page .tab-content .title-sec.title-comments:before{ content: '\f086'; font-family: 'Font Awesome 5 free'; font-weight: 900; position: absolute; top: -25px; right: -20px; font-size: 30px; color: var(--site-color); } .profile-page .tab-content .title-sec.title-setting:before{ content: '\f509'; font-family: 'Font Awesome 5 free'; font-weight: 900; position: absolute; top: -25px; right: -20px; font-size: 30px; color: var(--site-color); } .profile-page .tab-content .title-sec.title-fav:before{ content: '\f004'; font-family: 'Font Awesome 5 free'; font-weight: 900; position: absolute; top: -25px; right: -20px; font-size: 30px; color: var(--site-color); } .profile-page .tab-content .title-sec i{ color: var(--site-color); } .profile-page .tab-content .setting-group label{ display: block; } .profile-page .tab-content .item-group{ position: relative; overflow: hidden; min-height: 300px; background: var(--back-white); box-shadow: 0 2px 10px 1px #b5b5b5; color: var(--gray-det); transition: .2s ease-in-out; padding-bottom: 5px; margin-bottom: 20px } .profile-page .tab-content .item-group .img{ position: relative; overflow: hidden; width: 100%; height: 240px; background: var(--gray); } .profile-page .tab-content .item-group .img img{ height: 100%; width: 100%; } .profile-page .nav-pills.main-pills{ margin-top: 20px; } .profile-page .tab-content .item-group .desc .desc-title a{ color: var(--gray); transition: .2s ease-in-out; font-size: 18px; } .profile-page .tab-content .item-group .desc .desc-title{ padding: 10px 15px; margin-bottom: 5px; color: var(--gray); position: relative; text-align: center; } .profile-page .tab-content .item-group .desc .desc-title:after{ content: ''; width: 90%; height: 1px; position: absolute; background: #bbbbbb; bottom: 0; right: calc(50% - 45%); } .profile-page .tab-content .item-group .desc .merg-col{ margin-top: 10px; position: relative; padding: 10px 0px; } .profile-page .tab-content .item-group .desc .merg-col:after{ content: ''; position: absolute; left: 0; right: 0; top: 0; margin: 0 10px; border-top: 1px solid #bbbbbb; } .profile-page .tab-content .item-group .desc{ font-size: 15px; margin-top: 4px; } .profile-page .tab-content .item-group .desc .badge { padding: 8px; font-size: 16px; } .profile-page .tab-content .item-group .desc .badge.underprocces{ background: #17a2b8; } .profile-page .tab-content .item-group:hover .desc .desc-title a{ color: var(--site-color); cursor: pointer; } .profile-page .tab-content .item-group:hover{ transform: translateY(-5px); box-shadow: 0 5px 6px 1px #b5b5b5; } .profile-page .tab-content .pagenation{ color: var(--gray-det); padding: 30px 0 10px 0; } .profile-page .tab-content .setting-group .sec-title{ position: relative; padding-bottom: 15px; } .profile-page .tab-content .setting-group .sec-title h6{ color: var(--gray); font-size: 18px; } .profile-page .tab-content .setting-group .sec-title:after{ content: ''; height: 1px; background: #bbbbbb66; position: absolute; bottom: 8px; right: 0; width: 100%; } .profile-page .tab-content .setting-group .sec-title i{ font-size: 14px; } .profile-page .tab-content .setting-group .edit-form:after{ content: ''; width: 1px; background: #bbbbbb66; position: absolute; left: 0; top: 0; bottom: 0; } .profile-page .tab-content .setting-group .edit-form, .profile-page .tab-content .setting-group .password-form{ color: var(--gray); } .profile-page .tab-content .setting-group .edit-form .sec, .profile-page .tab-content .setting-group .password-form .sec{ margin-bottom: 15px; } .profile-page .tab-content .setting-group .edit-form div.pic-hint{ margin-top: 5px; text-align: center; } .profile-page .tab-content .setting-group .edit-form span.pic-size{ font-size: 12px; color: var(--back-white); background: var(--gray-det); padding: 1px 3px; } .profile-page .tab-content .setting-group .edit-form input, .profile-page .tab-content .setting-group .password-form input{ width: 100%; padding: 8px 15px; font-size: 15px; border-radius: 4px; outline: none; border: 1px solid #bbbbbb; background: var(--back-white); } .profile-page .tab-content .setting-group .edit-form input.save-edit, .profile-page .tab-content .setting-group .password-form input.save-pass{ width: 100px; background: var(--site-color); border-color: transparent; color: var(--back-white); cursor: pointer; transition: .2s ease-in-out; } .profile-page .tab-content .setting-group .edit-form input.save-edit:hover, .profile-page .tab-content .setting-group .password-form input.save-pass:hover{ transform: translateY(-5px); box-shadow: 0px 4px 1px #bbbbbb66; } .profile-page .tab-content .setting-group .edit-form input.save-edit:active, .profile-page .tab-content .setting-group .password-form input.save-pass:active{ transform: translateY(0px); box-shadow: 0px 0px 0px #bbbbbb66; } .profile-page .nav-pills.main-pills .nav-link{ background: transparent; color: var(--gray); border-radius: 0; transition: .2s ease-in-out; padding-top: 15px; padding-bottom: 15px; position: relative; margin-top: 15px; font-weight: bold; } .profile-page .nav-pills.main-pills .nav-link:after{ content: ""; height: 1px; background: #bbbbbb; position: absolute; bottom: -9px; right: 0; left: 0; } .profile-page .nav-pills.main-pills .nav-link:first-child:before{ content: ""; height: 1px; background: #bbbbbb; position: absolute; top: -7px; right: 0; left: 0; } .profile-page .nav-pills.main-pills .nav-link:hover{ color: var(--site-color); } .profile-page .nav-pills.main-pills .nav-link.active{ background: var(--site-color); color: var(--back-white); border-radius: 2px; } .profile-page .tab-content .comment-group{ background: #ececec; padding: 10px 15px; border-radius: 3px; margin-bottom: 20px; transition: .2s ease-in-out; box-shadow: 0px 4px 7px -6px var(--gray); } .profile-page .tab-content .comment-group .date{ border-radius: 3px; background: #dadada; font-size: 14px; color: var(--gray); } .profile-page .tab-content .comment-group span a{ transition: .2s ease-in-out; color: var(--gray); } .profile-page .tab-content .comment-group span{ color: var(--gray-det); } .profile-page .tab-content .comment-group span.comment-head{ margin: 10px 0; font-size: 15px; } .profile-page .tab-content .comment-group .comment-head .comment-status{ display: block; padding: 8px 0px; margin-bottom: 5px; } .profile-page .tab-content .comment-group span.comment-msg{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 14px; } .profile-page .tab-content .comment-group:hover span a{ color: var(--site-color); } /*fav-page*/ .profile-page .tab-content .item-fav{ height: 360px; background: var(--back-white); transition: .4s ease-in-out; margin-bottom: 30px; } .profile-page .tab-content .item-fav .item-group{ position: relative; text-align: right; } .profile-page .tab-content .item-fav .item-group .video, .profile-page .tab-content .item-fav .item-group .img{ width: 100%; height: 220px; background-color: var(--dark-gray); position: relative; } .profile-page .tab-content .item-fav .item-group .video iframe, .profile-page .tab-content .item-fav .item-group .img img{ height: 100%; width: 100%; } .profile-page .tab-content .item-fav .item-group .img .btn-click{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; cursor: pointer; align-items: center; font-size: 60px; } .profile-page .tab-content .item-fav .item-group .img .btn-click button.youtube{ background: none; border: none; outline: none; transition: .2s ease-in-out; cursor: pointer; color: #ea0000; position: relative; z-index: 2; } .profile-page .tab-content .item-fav .item-group .img .btn-click:after{ content: ''; position: absolute; width: 25px; height: 25px; background: #fff; } .profile-page .tab-content .item-fav .item-group .img .btn-click:hover button.youtube{ color: var(--site-color); } .profile-page .tab-content .item-fav .item-group .course-hint{ position: absolute; bottom: -1px; right: 20px; background: var(--back-white); padding: 3px 12px ; border-radius: 3px 3px 0 0; font-size: 14px; color: var(--site-color) } .profile-page .tab-content .item-fav .item-group .desc .item-title{ color: var(--dark-gray); transition: .3s ease-in-out; } .profile-page .tab-content .item-fav .item-group .desc{ margin: 10px 20px; } .profile-page .tab-content .item-fav .item-group .desc .usersNum, .price , .old-price , .videosNum , .time , .comments{ color: var(--gray-det); font-size: 14px; } .profile-page .tab-content .item-fav .item-group .desc .usersNum, .videosNum , .time{ font-weight: bold; } .profile-page .tab-content .item-fav .item-group .desc .usersNum, .videosNum i , .time i{ color: var(--site-color); } .profile-page .tab-content .item-fav .item-group .desc .old-price{ color: var(--site-color); background: #d2cece; font-weight: bold; padding: 0px 8px; transition: .3s ease-in-out; text-decoration: line-through; margin-left: 5px; } .profile-page .tab-content .item-fav .item-group .desc .price{ color: var(--site-color); background: #d2cece; font-weight: bold; padding: 0px 8px; transition: .3s ease-in-out } .profile-page .tab-content .item-fav .item-group .desc .line{ width: 80%; height: 1px; background: #d2cece; margin: 20px auto 10px auto; } /* buy & add to cart */ .profile-page .tab-content .item-fav .item-group .video .shop-cart{ position: absolute; top: 30px; right: 0; background: #f9f9f9; padding: 3px 7px; border-radius: 10px 0 0 10px; color: var(--gray); box-shadow: -4px 0px 6px -2px #353535; } .profile-page .tab-content .item-fav .item-group .video .shop-cart i{ transition: .2s ease-in-out; font-size: 15px; } .profile-page .tab-content .item-fav .item-group .video .shop-cart .add-to-cart{ font-size: 0px; transition: .2s ease-in-out; } .profile-page .tab-content .item-fav .item-group .video .shop-cart:hover .add-to-cart{ font-size: 14px; } .profile-page .tab-content .item-fav:hover .item-group .video .shop-cart i{ color: var(--site-color); } /* buy */ .profile-page .tab-content .item-fav .item-group .video .buy{ position: absolute; top: 70px; right: 0; background: #f9f9f9; padding: 3px 7px; border-radius: 10px 0 0 10px; color: var(--gray); box-shadow: -4px 0px 6px -2px #353535; } .profile-page .tab-content .item-fav .item-group .video .buy i{ transition: .2s ease-in-out; font-size: 15px; } .profile-page .tab-content .item-fav .item-group .video .buy .buy-course{ font-size: 0px; transition: .2s ease-in-out; } .profile-page .tab-content .item-fav .item-group .video .buy:hover .buy-course{ font-size: 14px; } .profile-page .tab-content .item-fav:hover .item-group .video .buy i{ color: var(--site-color); } /*fav*/ .profile-page .tab-content .item-fav .item-group .video .fav{ position: absolute; top: 30px; left: 15px; background: #f9f9f9; padding: 3px 7px; color: var(--gray); box-shadow: 0px 5px 6px -2px #353535; border-radius: 4px; opacity: 0; transition: .2s ease-in-out; } .profile-page .tab-content .item-fav:hover .item-group .video .fav{ opacity: 1; cursor: pointer; } .profile-page .tab-content .item-fav .item-group .video .fav i{ transition: .2s ease-in-out; font-size: 15px; } .profile-page .tab-content .item-fav .item-group .video .fav .fav-course{ font-size: 0px; transition: .2s ease-in-out; } .profile-page .tab-content .item-fav .item-group .video .fav:hover .fav-course{ font-size: 14px; } .profile-page .tab-content .item-fav .item-group .video .fav i.active{ color: var(--site-color); } /*Hover*/ .profile-page .tab-content .item-fav:hover .item-group .desc .item-title{ color: var(--site-color); } .profile-page .tab-content .item-fav:hover .item-group .desc .price{ background: var(--site-color); color: var(--back-white); } .profile-page .tab-content .item-fav:hover .item-group .desc .old-price{ background: var(--gray); color: var(--back-white); } /* [end profile user page] */ /* [start product page] */ /* start title sec */ .product-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .product-page .product-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .product-page .product-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .product-page .product-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .product-page .title-group{ position: relative; } .product-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .product-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .product-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .product-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .product-page .product-group{ background: var(--back-white); height: 100%; display: flex; padding-top:70px; flex-direction: column; /* justify-content: center; */ align-items: center; position: relative; } .product-page .product-group .video-group, .product-page .product-group .img-group{ width: 98%; height: 350px; text-align: center; position: relative; margin: 0 auto; border: none; outline: none; overflow: hidden; } .product-page .product-group .video-group img, .product-page .product-group .video-group iframe{ height: 100%; width: 100%; border: none; outline: none; } .product-page .product-group .video-group iframe{ height: 100%; width: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .product-page .product-group .already-buy{ margin-bottom: 10px; background: var(--gray); color: var(--back-white); padding: 10px 0; width: 80%; text-align: center; font-size: 15px; animation: chngColorSite 1s infinite; margin-top: 10px; } @keyframes chngColorSite{ 50% {color: var(--gray-det)} } .product-page .product-group .title-course{ margin-bottom: 10px; background: var(--site-color); color: var(--back-white); padding: 10px 0; width: 80%; text-align: center; font-size: 20px; } .product-page .side-group{ background: var(--back-white); border-top: 5px solid var(--gray-det); height: 100%; position: relative; } .product-page .side-group:before{ content: ""; position: absolute; background: var(--site-color); height: 5px; top: -5px; right: 0; left: 0; box-shadow: 0px 2px 3px -2px #000000cc; } .product-page .side-group .side-title{ color: var(--back-white); padding: 15px 0; background: var(--gray); margin-bottom:15px; } .product-page .side-group .det-item{ color: var(--dark-gray); border-top: 1px dashed #b2b2b2; padding: 15px 0; font-size: 14px; text-align: center; } .product-page .side-group .det-item:first-child{ border-color: transparent; } .product-page .side-group .det-item .old_price{ text-decoration: line-through; text-decoration-color: var(--gray); color: var(--site-color); } .product-page .side-group .det-item i{ font-size: 14px; color: var(--site-color); margin-right: 5px; } .product-page .side-group .det-item input.buy-course{ width: 100%; padding: 10px 0; background: var(--site-color); color: var(--back-white); outline-color: transparent; border-color: transparent; cursor: pointer; font-size: 16px; transition: .3s ease-in-out; } .product-page .side-group .det-item button.buy-course:hover { text-shadow: 0px 2px 4px var(--gray); } .product-page .side-group .det-item input.proces-course{ background: transparent; outline: transparent; color: var(--back-white); border: none; padding: 3px; cursor: pointer; } .product-page .side-group .det-item button.shop-cart{ width: 100%; padding: 10px 0; background: var(--site-color); color: var(--back-white); outline-color: transparent; border-color: transparent; cursor: pointer; font-size: 16px; transition: .3s ease-in-out; } .product-page .side-group .det-item button.shop-cart:hover{ text-shadow: 0px 2px 4px var(--gray); } .product-page .side-group .det-item .oflline-course-hint{ color: var(--back-white); margin-bottom: 10px; font-size: 16px; /*background: #e96594;*/ background: #EC76A0; padding: 8px 0px; } .product-page .side-group .det-item .offline-course{ margin-bottom: 5px; } .product-page .side-group .det-item .badge{ font-size: 16px; padding: 5px; } .product-page .content-section{ width: 100%; } .product-page .content-section .last-courses, .product-page .content-section .videos-group{ background: var(--back-white); padding-bottom: 15px; } .product-page .content-section .last-courses .last-courses-title{ background: var(--gray); color: var(--back-white); margin-bottom: 15px; padding: 15px 0; padding-top: 20px; } .product-page .content-section .last-courses .last-courses-title:before{ content: ''; position: absolute; left: 0; right: 0; top: 0; border-top: 5px solid var(--site-color); box-shadow: 0px 2px 5px -1px #000000cc; } .product-page .content-section .last-courses{ position: relative; } .product-page .content-section .last-courses .last-courses-item{ padding: 0 15px; display: flex; margin-bottom: 10px; position: relative; } .product-page .content-section .last-courses .last-courses-item:after{ content: ""; position: absolute; right: 0; left: 0; bottom: -5px; border-bottom: 1px solid #bbbbbb33 } .product-page .content-section .last-courses .last-courses-item:last-child:after{ border-bottom-color: transparent; } .product-page .content-section .last-courses .last-courses-item .last-courses-img{ width: 75px; height: 95px; display: flex; justify-content: center; align-items: center; font-size: 12px; color: var(--dark); overflow: hidden; } .product-page .content-section .last-courses .last-courses-item .last-courses-img img{ color: var(--site-color); width: 100%; transition: .2s ease-in-out; } .product-page .content-section .last-courses .last-courses-item .desc{ margin-right: 5px; margin-top: 10px; text-align: right; } .product-page .content-section .last-courses .last-courses-item .desc .desc-title{ color: var(--gray); transition: .3s ease-in-out; } .product-page .content-section .last-courses .last-courses-item:hover .desc .desc-title{ color: var(--site-color); } .product-page .content-section .last-courses .last-courses-item:hover .last-courses-img img{ transform: scale(1.2); } .product-page .content-section .last-courses .last-courses-item .desc .desc-date{ font-size: 12px; color: var(--gray-det); } .product-page .content-section .videos-group .videos-group-title{ background: #aaa; color: #f9f9f9; padding: 15px 0; } .product-page .content-section .videos-group .video-item{ display: flex; padding: 0 15px; position: relative; margin: 20px 0; } .product-page .content-section .videos-group .video-item:after{ content: ""; position: absolute; right: 0; left: 0; bottom: -10px; margin:0px 15px; border-bottom: 2px dashed #bbbbbb33; } .product-page .content-section .videos-group .video-item:last-child:after{ border-bottom-color: transparent; } .product-page .content-section .videos-group .video-item-img{ width: 200px; height: 140px; background: #bbb; margin-left: 10px; position: relative; text-align: center; -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -ms-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } .product-page .content-section .videos-group .video-item:hover .video-item-img:after{ content: ''; position: absolute; right: 0; left: 0; bottom: 0; top: 0; background: #00000055; z-index: 1; display: flex; justify-content: center; align-items: center; } .product-page .content-section .videos-group .video-item:hover .video-item-img:before{ content: 'مشاهدة'; position: absolute; background: var(--site-color); color: var(--back-white); padding: 5px; z-index: 2; display: flex; justify-content: center; align-items: center; text-align: center; top: 38%; right: 35%; border-radius: 7px; box-shadow: 0px 2px 3px 0px #707070; } .product-page .content-section .videos-group .video-item-img img{ height: 100%; /*width: 100%;*/ position: relative; } .product-page .content-section .videos-group .video-item-img .video-num{ position: absolute; top: -5px; right: -5px; padding: 5px; background: var(--site-color); border-radius: 5px; font-size: 12px; color: var(--back-white); z-index: 2; } .product-page .content-section .videos-group .video-item-desc{ margin-top: 10px; } .product-page .content-section .videos-group .video-item-desc .video-item-title{ color: var(--dark-gray); transition: .2s ease-in-out; margin-bottom: 15px; } .product-page .content-section .videos-group .video-item:hover .video-item-desc .video-item-title{ color: var(--site-color); } .product-page .content-section .videos-group .video-item-desc .video-time{ font-size: 14px; color: var(--gray); } .product-page .content-section .videos-group .video-item-desc .video-time i{ color: var(--site-color); margin-left: 5px; font-size: 16px; } .product-page .content-section .videos-group .links-btn a{ width: 50%; text-align: center; color: var(--back-white); background: var(--gray); border-color: transparent; border-radius: 0px; transition: .1s ease-in-out; padding: 15px 0; font-size: 18px; font-weight: bold; } .product-page .content-section .videos-group .links-btn a.active{ background: var(--site-color); color: var(--back-white); } .product-page .content-section .videos-group .course-details-sec{ padding: 0 15px; margin: 10px 0; } .product-page .content-section .videos-group .course-details-sec .details-sec-title{ color: var(--gray); margin-top: 20px; } .product-page .content-section .videos-group .course-details-sec .details-sec-desc{ font-size: 15px; line-height: 27px; color: var(--gray-det); } .product-page .content-section .videos-group .course-details-sec .hint-title{ color: var(--gray); margin-top: 20px; } .product-page .content-section .videos-group .course-details-sec .hint-item{ color: var(--gray-det); margin: 10px 0px; } /* [end product page] */ /* [start video page] */ /* start title sec */ .video-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .video-page .video-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .video-page .video-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .video-page .video-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .video-page .title-group{ position: relative; } .video-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .video-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .video-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .video-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .video-page .title-course-videos h5{ text-align: center; background: var(--gray-det); margin: 0; padding: 25px 0; color: var(--back-white); position: relative; } .video-page .title-course-videos h5:before{ content: ''; left: 0; right: 0; top: 0; position: absolute; border-bottom: 5px solid var(--site-color); box-shadow: 0px 3px 3px -2px #000000; } .video-page .title-course-videos h5:after{ content: ''; left: 0; right: 0; bottom: 0; position: absolute; border-bottom: 5px solid var(--gray-det); box-shadow: 0px 3px 3px -1px #000000; z-index: 1 } .video-page .side-content{ background: var(--back-white); overflow-y: scroll; position: relative; border-right: 2px solid #bbbbbb66; } /*.video-page .side-content:before{ content: ''; position: absolute; left: 0; right: 0; top: 0; border-top: 5px solid var(--site-color); box-shadow: 0px 2px 5px -1px #000000cc; }*/ .video-page .side-content::-webkit-scrollbar{ width: 5px; } .video-page .side-content::-webkit-scrollbar-track{ background: var(--back-white); } .video-page .side-content::-webkit-scrollbar-thumb{ background: var(--gray-det); transition: .2s ease-in-out; } .video-page .side-content:hover::-webkit-scrollbar-thumb{ background: var(--gray); } .video-page .side-content .video-item{ position: relative; padding: 15px 10px; display: flex; box-sizing: border-box; } .video-page .side-content .video-item:after{ content: ''; border-bottom: 2px dotted #bbbbbb66; position: absolute; right: 0; left: 0; bottom: 0; margin: 0 10px; } .video-page .side-content .video-item:last-child:after{ border-bottom-color: transparent; } .video-page .side-content .video-item .img{ position: relative; width: 170px; height: 100px; text-align: center; background: #bbb; } .video-page .side-content .video-item .img img{ height: 100%; /*width: 100%;*/ } .video-page .side-content .video-item:hover .img:after{ content: ''; position: absolute; right: 0; left: 0; bottom: 0; top: 0; background: #00000055; z-index: 1; display: flex; justify-content: center; align-items: center; } .video-page .side-content .video-item:hover .img:before{ content: 'مشاهدة'; position: absolute; background: var(--site-color); color: var(--back-white); padding: 5px; z-index: 2; display: flex; justify-content: center; align-items: center; text-align: center; top: 34%; right: 32%; border-radius: 7px; box-shadow: 0px 2px 3px 0px #707070; } .video-page .side-content .video-item .img .video-num{ position: absolute; top: -5px; right: -5px; padding: 5px; background: var(--site-color); border-radius: 5px; font-size: 12px; color: var(--back-white); z-index: 2; } .video-page .side-content .video-item .desc{ margin-top: 5px; margin-right: 5px; color: var(--gray); text-align: right; width: calc(100% - 170px) } .video-page .side-content .video-item .desc .video-title{ color: var(--gray-dark); transition: .2s ease-in-out; } .video-page .side-content .video-item:hover .desc .video-title{ color: var(--site-color); } .video-page .side-content .video-item .desc .viwe-num{ font-size: 13px; margin-top: 10px; } .video-page .side-content .video-item .desc .date{ font-size: 13px; margin-top: 5px; } .video-page .side-content .video-item .desc .date i{ color: var(--site-color); margin-left: 3px; } .video-page .video-wtch{ background: var(--back-white); padding: 10px 5px; } .video-page .video-wtch .video-frame{ width: 100%; height: 375px; /*background: var(--gray);*/ outline: none; border: none; } .video-page .video-wtch .video-frame iframe, .video-page .video-wtch .video-frame img{ width: 100%; height: 100%; border: none; outline: none; } .video-page .video-wtch .video-frame img{ padding: 15px; } .video-page .video-wtch .desc{ margin-top: 20px; padding-right: 15px; } .video-page .video-wtch .desc .video-title{ color: var(--site-color); font-weight: bold; text-align: center; margin: auto; margin-bottom: 20px; background: var(--site-color); color: var(--back-white); padding: 10px 0; width: 80%; text-align: center; font-size: 20px; } .video-page .video-wtch .desc .date-view{ font-size: 14px; color: var(--gray-det); margin: 20px 0; padding: 0px 20px; } .video-page .video-wtch .desc .date-view .views{ display: none; } .video-page .video-wtch .desc .date-view .likes, .video-page .video-wtch .desc .date-view .share{ font-size: 16px; /*margin-right: 20px;*/ } .video-page .video-wtch .desc .date-view .likes a, .video-page .video-wtch .desc .date-view .share a{ color: var(--gray-det); } .video-page .video-wtch .desc .date-view .likes a.active{ color: var(--site-color); } .video-page .video-wtch .desc .date-view .vid_details{ margin-top: 15px; margin-bottom: 30px; font-size: 16px; background: var(--gray-det); color: var(--back-white); padding: 14px; text-align: center; border-radius: 15px; } .video-page .video-wtch .comments-write{ padding: 20px 0; position: relative; } .video-page .video-wtch .comments-write:before{ content: ''; right: 0; left: 0; top: 0; position: absolute; border: 1px solid var(--gray-det); opacity: .3; } .video-page .video-wtch .comments-write:after{ content: ''; right: 0; left: 0; bottom: 0; position: absolute; border: 1px solid var(--gray-det); opacity: .3; } .video-page .video-wtch .comments-write .write{ display: flex; } .video-page .video-wtch .comments-write .write .comment-img{ width: 75px; height: 75px; position: relative; border-radius: 100%; padding: 2px; border: 2px solid var(--gray-det); } .video-page .video-wtch .comments-write .write .comment-img img{ border-radius: 100%; height: 100%; } .video-page .video-wtch .comments-write .write .comment-form{ width: calc(100% - 95px); margin-right: 10px; } .video-page .video-wtch .comments-write .write .comment-form textarea{ height: 150px; resize: none; width: 100%; background: var(--back-white); outline: none; padding: 15px 10px; border-color: var(--gray-det); border-radius: 3px; } .video-page .video-wtch .comments-write .write .comment-form .btn-sec .btn-send{ padding: 15px 30px; background: var(--site-color); outline: none; border:1px solid var(--gray-det); color: var(--back-white); border-radius: 3px; cursor: pointer; } .video-page .video-wtch .comments-write .write .comment-form .btn-sec .btn-send span{ margin-right: 2px } .video-page .video-wtch .comments{ padding: 20px 0; position: relative; } .video-page .video-wtch .comments .comments-title{ border-bottom: 2px dashed #bbbbbb77; padding-bottom: 20px; } .video-page .video-wtch .comments .comments-body{ display: flex; border-bottom: 1px dashed #bbbbbb77; padding: 25px 0; padding-left: 25px; } .video-page .video-wtch .comments .comments-body:last-child{ border-bottom-color: transparent; } .video-page .video-wtch .comments .comments-body .comment-img{ width: 75px; height: 75px; position: relative; border-radius: 100%; padding: 2px; border: 2px solid var(--gray-det); } .video-page .video-wtch .comments .comments-body .comment-img img{ height: 100%; border-radius: 100%; } .video-page .video-wtch .comments .comments-body .comments-content{ margin-right: 10px; margin-top: 10px; width: calc(100% - 75px); } .video-page .video-wtch .comments .comments-body .comments-content .name-date{ display: flex; } .video-page .video-wtch .comments .comments-body .comments-content .name-date .name{ color: var(--gray); } .video-page .video-wtch .comments .comments-body .comments-content .name-date .date{ margin-right: 20px; } .video-page .video-wtch .comments .comments-body .comments-content .comment{ margin-top: 10px; line-height: 25px; } /* [end video page] */ /* [start course-buy page] */ /* start title sec */ .course-buy-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .course-buy-page .course-buy-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .course-buy-page .course-buy-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .course-buy-page .course-buy-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .course-buy-page .title-group{ position: relative; } .course-buy-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .course-buy-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .course-buy-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .course-buy-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .course-buy-page .form-group{ position: relative; background: var(--back-white); padding: 20px 0; border-radius: 4px; } .course-buy-page .form-group .course-buy-title{ text-align: center; color: var(--gray); padding-bottom: 25px; border-bottom: 1px solid #00000044; margin-bottom: 15px; } .course-buy-page .form-group .username, .course-buy-page .form-group .email, .course-buy-page .form-group .password, .course-buy-page .form-group .phone{ position: relative; border: 1px solid #00000044; overflow: hidden; border-radius: 4px; margin-bottom: 20px; } .course-buy-page .form-group .username input, .course-buy-page .form-group .email input, .course-buy-page .form-group .password input, .course-buy-page .form-group .phone input{ width: 100%; border: none; outline: none; color: var(--gray); padding: 8px 12px; padding-left: 36px; background: var(--back-white); } .course-buy-page .form-group .username i, .course-buy-page .form-group .email i, .course-buy-page .form-group .password i, .course-buy-page .form-group .phone i{ position: absolute; left: 0; color: var(--gray); padding: 12px 12px; } .course-buy-page .form-group .payment-details{ color: var(--gray); transition: .2s ease-in-out; } .course-buy-page .form-group .payment-details.active{ color: var(--site-color); } .course-buy-page .form-group .payment-details:hover{ color: var(--site-color); } .course-buy-page .form-group .payment-details .card-header:hover{ cursor: pointer; } .course-buy-page .form-group .payment-details input{ margin-left: 5px; width: 15px; height: 15px; } .course-buy-page .form-group .payment-details img.payment-img{ width: 70px; } .course-buy-page .form-group .payment-details .payment-name{ margin-left: 20px; position: relative; font-size: 18px; } .course-buy-page .form-group .payment-details .payment-name:after{ content: '-'; position: absolute; left: -17px; top: 3px; color: var(--gray-det); } .course-buy-page .form-group .payment-details .card-det{ color: var(--gray-det); font-size: 15px; padding: 15px; text-align: center; position: relative; } .course-buy-page .form-group .btn-buy input{ padding: 8px 32px; background: var(--site-color); color: var(--back-white); border: 2px solid #bbbbbb; border-radius: 4px; cursor: pointer; outline: none; transition: .1s ease-in-out; margin-top: 20px; } .course-buy-page .form-group .btn-buy input:hover{ transform: translateY(-5px); box-shadow: 0px 5px 10px -4px var(--site-color); } .course-buy-page .form-group .btn-buy input:active{ transform: translateY(0px); box-shadow: 0px 0px 0px 0px transparent; } .course-buy-page .form-group .total-price{ padding-bottom: 15px; /*color: #e96594;*/ color: #EC76A0; font-size: 20px; } /* [end course-buy page] */ /* [start messages page] */ /* start title sec */ .messages-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .messages-page .messages-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .messages-page .messages-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .messages-page .messages-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .messages-page .title-group{ position: relative; } .messages-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .messages-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .messages-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .messages-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .messages-page .msg-side{ position: relative; background: #bbbbbb66; color: var(--back-white); border-radius: 4px 4px 0 0; } .messages-page .msg-side .msg-side-head{ padding: 20px 15px; position: relative; color: var(--gray) } .messages-page .msg-side .msg-side-head:after{ content: ''; position: absolute; bottom: 0; right: 0; left: 0; border-bottom: 1px solid var(--gray-det); margin: 0 15px; box-shadow: 0px 4px 5px 2px #00000011; } .messages-page .msg-side .msg-side-head .msg-side-srch{ border-radius: 4px; overflow: hidden; position: relative; text-align: center; font-size: 22px; } .messages-page .msg-side .msg-side-head .msg-side-srch i{ color: var(--site-color); margin-left: 5px; } .messages-page .msg-side .msg-side-item{ /*max-height: 300px;*/ overflow-y: auto; } .messages-page .msg-side .msg-side-item::-webkit-scrollbar{ width: 5px; } .messages-page .msg-side .msg-side-item::-webkit-scrollbar-track{ background: var(--gray-det); } .messages-page .msg-side .msg-side-item::-webkit-scrollbar-thumb{ background: var(--gray); } .messages-page .msg-side .msg-side-item .msg-item{ display: flex; position: relative; padding: 15px ; } .messages-page .msg-side .msg-side-item .msg-item.active{ background: var(--gray-det); } .messages-page .msg-side .msg-side-item .msg-item.active .msg-item-desc .name a{ color: var(--back-white); } .messages-page .msg-side .msg-side-item .msg-item.active .msg-item-desc .msg-content{ color: var(--back-white) } .messages-page .msg-side .msg-side-item .msg-item:after{ content: ''; position: absolute; bottom: 0; right: 0; left: 0; border-bottom: 1px dashed #bbbbbb66; } .messages-page .msg-side .msg-side-item .msg-item:last-child:after{ border-bottom-color: transparent; } .messages-page .msg-side .msg-side-item .msg-item .msg-item-img{ width: 75px; height: 75px; border-radius: 100%; position: relative; overflow: hidden; padding: 2px; border: 1px solid var(--back-white) } .messages-page .msg-side .msg-side-item .msg-item .msg-item-img img{ height: 100%; border-radius: 100%; } .messages-page .msg-side .msg-side-item .msg-item .msg-item-desc{ width: calc(100% - 75px); padding: 0 5px; margin-top: 8px; } .messages-page .msg-side .msg-side-item .msg-item .msg-item-desc .name a{ color: var(--gray); } .messages-page .msg-side .msg-side-item .msg-item .msg-item-desc .msg-content{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 14px; margin-top: 5px; color: var(--gray-det); } .messages-page .msg-chat{ background: var(--back-white); padding: 15px; border-radius: 5px 5px 0 0; } .messages-page .msg-chat .msg-chat-head{ border-bottom: 1px solid var(--gray-det); padding-bottom: 15px; } .messages-page .msg-chat .msg-chat-head .chat-head{ display: flex; overflow: hidden; align-items: center; } .messages-page .msg-chat .msg-chat-head .chat-head .img{ width: 75px; height: 75px; border-radius: 100%; overflow: hidden; padding: 2px; border: 2px solid var(--gray); } .messages-page .msg-chat .msg-chat-head .chat-head .img img{ border-radius: 100%; height: 100%; } .messages-page .msg-chat .msg-chat-head .chat-head .name{ width: calc(100% - 75px); margin-right: 10px; color: var(--gray); font-weight: bold; } .messages-page .msg-chat .msg-chat-body{ background: #bbbbbb33; margin-top: 10px; padding: 20px 0; height: 500px; overflow-y: scroll; } .messages-page .msg-chat .msg-chat-body::-webkit-scrollbar{ width: 5px; } .messages-page .msg-chat .msg-chat-body::-webkit-scrollbar-track{ background: var(--gray-det); } .messages-page .msg-chat .msg-chat-body::-webkit-scrollbar-thumb{ background: var(--gray); } .messages-page .msg-chat .msg-chat-body .chat-body .msg-come{ display: flex; padding: 5px 15px; direction: ltr; margin-bottom: 10px; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-come .img{ width: 50px; height: 50px; border-radius: 100%; overflow: hidden; border: 1px solid var(--gray); padding: 2px; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-come .img img{ border-radius: 100%; height: 100%; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-come .message{ width: calc(100% - 150px); background: var(--gray); border-radius: 5px; margin-left: 10px; padding: 8px; padding-left: 17px; color: var(--back-white); font-size: 14px; line-height: 25px; position: relative; padding-right: 15px; word-break: break-all; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-come .message:before{ content: ''; width: 15px; height: 15px; background: var(--gray); position: absolute; top: 10px; left: -3px; transform: rotate(50deg); } .messages-page .msg-chat .msg-chat-body .chat-body .msg-come .message .date{ display: block; font-size: 12px; color: #ffa9c8a6; margin-top: 5px; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-come .message a, .messages-page .msg-chat .msg-chat-body .chat-body .msg-sent .message a{ color: var(--back-white); display: block; margin-top: 5px; transition: .2s ease-in-out; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-come .message a:before, .messages-page .msg-chat .msg-chat-body .chat-body .msg-sent .message a:before{ content: '\f019'; font-family: 'Font Awesome 5 free'; font-weight: 900; margin-right: 5px; margin-left: 5px; color: var(--back-white); transition: .2s ease-in-out; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-come .message a:hover:before, .messages-page .msg-chat .msg-chat-body .chat-body .msg-sent .message a:hover:before{ color: #de8eaa; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-come .message a:hover, .messages-page .msg-chat .msg-chat-body .chat-body .msg-sent .message a:hover{ color: #de8eaa; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-sent{ display: flex; padding: 5px 15px; margin-bottom: 10px; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-sent .img{ width: 50px; height: 50px; border-radius: 100%; overflow: hidden; border: 1px solid var(--gray); padding: 2px; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-sent .img img{ border-radius: 100%; height: 100%; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-sent .message{ width: calc(100% - 150px); background: var(--gray-det); border-radius: 5px; margin-right: 10px; padding: 8px; padding-right: 17px; color: var(--back-white); font-size: 14px; line-height: 25px; position: relative; padding-left: 15px; word-break: break-all; } .messages-page .msg-chat .msg-chat-body .chat-body .msg-sent .message:before{ content: ''; width: 15px; height: 15px; background: var(--gray-det); position: absolute; top: 10px; right: -3px; transform: rotate(50deg); } .messages-page .msg-chat .msg-chat-footer .chat-footer{ position: relative; overflow: hidden; border: 1px solid var(--gray-det); margin-top: 15px; background: var(--back--white); border-radius: 5px; } .messages-page .msg-chat .msg-chat-footer .chat-footer .write-input{ width: 100%; border: none; outline: none; background: none; padding: 15px 8px; font-size: 14px; color: var(--gray); min-height: 70px; } .messages-page .msg-chat .msg-chat-footer .chat-footer .img-input{ /*width: 100%;*/ border: none; outline: none; background: none; padding: 15px 8px; font-size: 14px; color: var(--gray); display: none; } .messages-page .msg-chat .msg-chat-footer .chat-footer .btn-send{ color: #f9f9f9; padding: 15px 20px; background: var(--site-color); border: none; outline: none; cursor: pointer; } .messages-page .msg-chat .msg-chat-footer .chat-footer .btns-files{ display: flex; border-top: 1px solid #bbbbbb77; padding: 15px 0; justify-content: space-between; } .messages-page .msg-chat .msg-chat-footer .chat-footer .btns-files .send-img-link{ color: var(--gray-det); } .messages-page .msg-chat .msg-chat-footer .chat-footer .btns-files .send-img-link .file-btn{ cursor: pointer; } /* [end messages page] */ /* [start special page] */ /* start title sec */ .special-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .special-page .special-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .special-page .special-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .special-page .special-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .special-page .title-group{ position: relative; } .special-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .special-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .special-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .special-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .special-page .special-item-group{ padding: 5px; border: 1px solid var(--gray-det); border-radius: 4px 4px 0 0; margin-bottom: 30px; } .special-page .special-item-group .special-item{ box-shadow: 0px 1px 5px -1px #000000c9; } .special-page .special-item-group .img{ width: 100%; height: 300px; overflow: hidden; position: relative; border-radius: 5px 5px 0 0; } .special-page .special-item-group .img img{ width: 100%; height: 100%; } .special-page .special-item-group .img .hide{ background: #00000099; right: 0; left: 0; top: 0; bottom: 0; position: absolute; border-radius: 5px 5px 0 0; opacity: 0; transition: .3s ease-in-out; display: flex; justify-content: center; align-items: center; } .special-page .special-item-group:hover .img .hide{ opacity: 1; } .special-page .special-item-group .img .hide a{ color: var(--back-white); padding: 5px 10px; border-radius: 4px; border: 1px solid #bbbbbb66; transition: .2s ease-in-out; } .special-page .special-item-group .img .hide a:hover{ color: var(--back-white); background: var(--site-color); box-shadow: 0px 10px 10px -8px #000000; } .special-page .special-item-group .img i.crown { position: absolute; top: 5px; right: 5px; padding: 5px; color: #FFD700; background: var(--back-white); border: 2px solid var(--site-color); border-radius: 5px 5px 0 0; animation: chngColor 1s infinite; font-size: 18px; z-index: 1; } @keyframes chngColor { 50% {color: #FFA500} } .special-page .special-item-group .desc{ background: var(--back-white); padding: 8px 0; } .special-page .special-item-group .desc .name{ color: var(--gray); font-weight: bold; } .special-page .special-item-group .desc .date{ color: var(--gray-det); font-size: 14px; } .special-page .pagnation{ color: var(--gray-det); text-align: center; } /* [end special page] */ /* [start special and madeit post page] */ /* start title sec */ .special-post-page, .madeit-post-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .special-post-page .special-post-title-row, .madeit-post-page .madeit-post-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .special-post-page .special-post-title-row:after, .madeit-post-page .madeit-post-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .special-post-page .special-post-title-row:before, .madeit-post-page .madeit-post-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .special-post-page .title-group, .madeit-post-page .title-group{ position: relative; } .special-post-page .title, .madeit-post-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .special-post-page .title-img, .madeit-post-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .special-post-page .title:before, .madeit-post-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .special-post-page .title:after, .madeit-post-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .special-post-page .side-bar, .madeit-post-page .side-bar{ background: var(--back-white); } .special-post-page .side-bar .side-bar-group, .madeit-post-page .side-bar .side-bar-group{ position: relative; padding: 15px 5px; } .special-post-page .side-bar .side-bar-title, .madeit-post-page .side-bar .side-bar-title{ text-align: center; color: var(--back-white); padding: 15px 0; background: var(--gray-det); margin: 0; position: relative; padding-top: 20px; } .special-post-page .side-bar .side-bar-title:after, .madeit-post-page .side-bar .side-bar-title:after{ content: ''; border-bottom: 5px solid var(--site-color); position: absolute; top: 0; left: 0; right: 0; box-shadow: 0px 2px 3px -2px #000000cc; } .special-post-page .side-bar .side-bar-title h5, .madeit-post-page .side-bar .side-bar-title h5{ margin: 0 8px; } .special-post-page .side-bar .side-bar-title i.crown, .madeit-post-page .side-bar .side-bar-title i.crown{ animation: chngColor 1s infinite; color: #FFD700; font-size: 20px; } .special-post-page .side-bar .side-bar-group .side-item, .madeit-post-page .side-bar .side-bar-group .side-item{ display: flex; padding: 10px 0; border-bottom: 1px dashed #bbbbbb88; } .special-post-page .side-bar .side-bar-group .side-item:first-child, .madeit-post-page .side-bar .side-bar-group .side-item:first-child{ padding-top: 0; } .special-post-page .side-bar .side-bar-group .side-item:last-child, .madeit-post-page .side-bar .side-bar-group .side-item:last-child{ padding-bottom: 0; border-bottom-color: transparent; } .special-post-page .side-bar .side-bar-group .side-item .item-img, .madeit-post-page .side-bar .side-bar-group .side-item .item-img{ width: 75px; height: 85px; overflow: hidden; } .special-post-page .side-bar .side-bar-group .side-item .item-img img, .madeit-post-page .side-bar .side-bar-group .side-item .item-img img{ width: 100%; transition: .4s ease-in-out; } .special-post-page .side-bar .side-bar-group .side-item:hover .item-img img, .madeit-post-page .side-bar .side-bar-group .side-item:hover .item-img img{ transform: scale(1.2); } .special-post-page .side-bar .side-bar-group .side-item .desc, .madeit-post-page .side-bar .side-bar-group .side-item .desc{ margin-top: 5px; margin-right: 8px; width: calc(100% - 75px); text-align: right; } .special-post-page .side-bar .side-bar-group .side-item .desc .name, .madeit-post-page .side-bar .side-bar-group .side-item .desc .name{ color: var(--gray); transition: .2s ease-in-out; } .special-post-page .side-bar .side-bar-group .side-item:hover .desc .name, .madeit-post-page .side-bar .side-bar-group .side-item:hover .desc .name{ color: var(--site-color); } .special-post-page .side-bar .side-bar-group .side-item .desc .date, .madeit-post-page .side-bar .side-bar-group .side-item .desc .date{ color: var(--gray-det); font-size: 14px; } .special-post-page .post-sec, .madeit-post-page .post-sec{ position: relative; background: var(--back-white); } .special-post-page .post-sec .post-sec-group, .madeit-post-page .post-sec .post-sec-group{ padding: 10px 15px; } .special-post-page .post-sec .post-sec-group .img, .madeit-post-page .post-sec .post-sec-group .img{ width: 100%; max-height: 450px; overflow: hidden; background: #bbbbbb66; text-align: center; } .special-post-page .post-sec .desc, .madeit-post-page .post-sec .desc{ margin-top: 20px; } .special-post-page .post-sec .desc .post-title h6, .madeit-post-page .post-sec .desc .post-title h6{ color: var(--gray); font-weight: bold; font-size: 20px; margin: auto; margin-bottom: 20px; background: var(--site-color); color: var(--back-white); padding: 10px 0; width: 80%; text-align: center; font-size: 20px; } .special-post-page .post-sec .hint, .madeit-post-page .post-sec .hint{ color: var(--gray-det); } .special-post-page .post-sec .hint .details, .madeit-post-page .post-sec .hint .details{ margin-top: 15px; margin-bottom: 30px; font-size: 16px; background: var(--gray-det); color: var(--back-white); padding: 14px; text-align: center; border-radius: 15px; } .special-post-page .post-sec .desc .date-view, .madeit-post-page .post-sec .desc .date-view{ font-size: 16px; color: var(--gray-det); margin: 20px 0; } .special-post-page .post-sec .desc .date-view .share, .madeit-post-page .post-sec .desc .date-view .share{ margin-right: 20px; } .special-post-page .post-sec .desc .date-view .likes a, .special-post-page .post-sec .desc .date-view .share a, .madeit-post-page .post-sec .desc .date-view .likes a, .madeit-post-page .post-sec .desc .date-view .share a{ color: var(--gray-det); } .special-post-page .post-sec .desc .date-view .likes a.active, .madeit-post-page .post-sec .desc .date-view .likes a.active{ color: var(--site-color); } .special-post-page .post-sec .comments-write, .madeit-post-page .post-sec .comments-write{ padding: 20px 0; position: relative; } .special-post-page .post-sec .comments-write:before, .madeit-post-page .post-sec .comments-write:before{ content: ''; right: 0; left: 0; top: 0; position: absolute; border: 1px solid var(--gray-det); opacity: .3; } .special-post-page .post-sec .comments-write:after, .madeit-post-page .post-sec .comments-write:after{ content: ''; right: 0; left: 0; bottom: 0; position: absolute; border: 1px solid var(--gray-det); opacity: .3; } .special-post-page .post-sec .comments-write .write, .madeit-post-page .post-sec .comments-write .write{ display: flex; } .special-post-page .post-sec .comments-write .write .comment-img, .madeit-post-page .post-sec .comments-write .write .comment-img{ width: 75px; height: 75px; position: relative; border-radius: 100%; padding: 2px; border: 2px solid var(--gray-det); } .special-post-page .post-sec .comments-write .write .comment-img img, .madeit-post-page .post-sec .comments-write .write .comment-img img{ border-radius: 100%; height: 100%; } .special-post-page .post-sec .comments-write .write .comment-form, .madeit-post-page .post-sec .comments-write .write .comment-form{ width: calc(100% - 95px); margin-right: 10px; } .special-post-page .post-sec .comments-write .write .comment-form textarea, .madeit-post-page .post-sec .comments-write .write .comment-form textarea{ height: 150px; resize: none; width: 100%; background: var(--back-white); outline: none; padding: 15px 10px; border-color: var(--gray-det); border-radius: 3px; } .special-post-page .post-sec .comments-write .write .comment-form .btn-sec .btn-send, .madeit-post-page .post-sec .comments-write .write .comment-form .btn-sec .btn-send{ padding: 15px 30px; background: var(--site-color); outline: none; border:1px solid var(--gray-det); color: var(--back-white); border-radius: 3px; cursor: pointer; } .special-post-page .post-sec .comments-write .write .comment-form .btn-sec .btn-send span, .madeit-post-page .post-sec .comments-write .write .comment-form .btn-sec .btn-send span{ margin-right: 2px } .special-post-page .post-sec .comments, .madeit-post-page .post-sec .comments{ padding: 20px 0; position: relative; } .special-post-page .post-sec .comments .comments-title, .madeit-post-page .post-sec .comments .comments-title{ border-bottom: 2px dashed #bbbbbb77; padding-bottom: 20px; } .special-post-page .post-sec .comments .comments-body, .madeit-post-page .post-sec .comments .comments-body{ display: flex; border-bottom: 1px dashed #bbbbbb77; padding: 25px 0; padding-left: 25px; } .special-post-page .post-sec .comments .comments-body:last-child, .madeit-post-page .post-sec .comments .comments-body:last-child{ border-bottom-color: transparent; } .special-post-page .post-sec .comments .comments-body .comment-img, .madeit-post-page .post-sec .comments .comments-body .comment-img{ width: 75px; height: 75px; position: relative; border-radius: 100%; padding: 2px; border: 2px solid var(--gray-det); } .special-post-page .post-sec .comments .comments-body .comment-img img, .madeit-post-page .post-sec .comments .comments-body .comment-img img{ height: 100%; border-radius: 100%; } .special-post-page .post-sec .comments .comments-body .comments-content, .madeit-post-page .post-sec .comments .comments-body .comments-content{ margin-right: 10px; margin-top: 10px; width: calc(100% - 75px); } .special-post-page .post-sec .comments .comments-body .comments-content .name-date, .madeit-post-page .post-sec .comments .comments-body .comments-content .name-date{ display: flex; } .special-post-page .post-sec .comments .comments-body .comments-content .name-date .name, .madeit-post-page .post-sec .comments .comments-body .comments-content .name-date .name{ color: var(--gray); } .special-post-page .post-sec .comments .comments-body .comments-content .name-date .date, .madeit-post-page .post-sec .comments .comments-body .comments-content .name-date .date{ margin-right: 20px; } .special-post-page .post-sec .comments .comments-body .comments-content .comment, .madeit-post-page .post-sec .comments .comments-body .comments-content .comment{ margin-top: 10px; line-height: 25px; } .special-post-page .post-sec .post-sec-group .img img, .madeit-post-page .post-sec .post-sec-group .img img{ /*width: 50%;*/ max-height: 400px; } .madeit-post-page .post-sec .hint .username{ font-weight: bold; margin: auto; margin-bottom: 20px; background: var(--site-color); color: var(--back-white); padding: 10px 0; width: 80%; text-align: center; font-size: 20px; } .special-post-page .post-sec .hint .date{ margin-bottom: 15px; text-align: center; } /* [end special and madeit post page] */ /* [start terms page] */ /* start title sec */ .terms-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .terms-page .terms-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .terms-page .terms-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .terms-page .terms-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .terms-page .title-group{ position: relative; } .terms-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .terms-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .terms-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .terms-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .terms-page .img{ width: 75px; text-align: center; margin: 0 auto; margin-bottom: 15px; } .terms-page .terms-page-update { color: var(--gray); padding-bottom: 25px; border-bottom: 2px solid #bbbbbb66; } .terms-page .hint-group .points-group .hint{ margin-bottom: 10px; } .terms-page .hint-group .points-group .hint .hint-title{ color: var(--site-color); text-align: center; padding: 5px 0; } .terms-page .hint-group .points-group .hint .hint-body{ color: var(--gray); text-align: center; font-size: 18px; } .terms-page .hint-group .points-group .hint .hint-body li{ margin: 5px 0; } /* [end terms page] */ /* [start cart page] */ /* start title sec */ .cart-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .cart-page .cart-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .cart-page .cart-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .cart-page .cart-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .cart-page .title-group{ position: relative; } .cart-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .cart-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .cart-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .cart-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .cart-page .cart-page-group{ background: var(--back-white); padding-top: 15px; } .cart-page .cart-page-group .cart-item{ padding: 10px 0; position: relative; border: 1px solid #dad8d8; margin: 10px; border-radius: 4px; } .cart-page .cart-page-group .cart-item:after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid #bbbbbb66; margin: 0 15px; } .cart-page .cart-page-group .cart-item:last-child:after{ border-color: transparent; } .cart-page .cart-page-group .cart-item .cart-course{ display: flex; } .cart-page .cart-page-group .cart-item .cart-course .img{ width: 125px; overflow: hidden; } .cart-page .cart-page-group .cart-item .cart-course .img img{ width: 100%; height: 145px; } .cart-page .cart-page-group .cart-item .cart-course .desc{ margin-right: 10px; margin-top: 10px; } .cart-page .cart-page-group .cart-item .cart-course .desc .course-title{ font-size: 20px; color: var(--gray); } .cart-page .cart-page-group .cart-item .cart-course .desc .price{ margin-top: 10px; font-size: 18px; } .cart-page .cart-page-group .cart-item .delet{ text-align: left; margin-top: 10px; margin-left: 10px; } .cart-page .cart-page-group .cart-item .delet button.btn-delet{ background: var(--site-color); border:none; outline: none; cursor: pointer; color: var(--back-white); padding: 3px 8px; border-radius: 4px; } .cart-page .cart-page-group .cart-item .delet button.btn-delet i.trash{ margin-right: 3px } .cart-page .cart-page-group .cart-item .copun{ text-align: left; } .cart-page .cart-page-group .cart-item .copun button.btn-active{ background: var(--gray-det); border:none; outline: none; cursor: pointer; color: var(--back-white); transition: .2s ease-in-out; padding: 6px 8px; border-radius: 4px; } .cart-page .cart-page-group .cart-item .copun button.btn-active:hover{ background-color: var(--site-color); color: var(--back-white); } .cart-page .cart-page-group .cart-item .copun button.un-active{ background: transparent; border: none; } .cart-page .cart-page-group .cart-item .copun button.un-active a{ color: var(--gray-det); transition: .2s ease-in-out; } .cart-page .cart-page-group .cart-item .copun button.un-active a:hover{ color: var(--site-color); } .cart-page .cart-page-group .cart-item .copun input.copun-inp{ padding: 7px 10px; border-radius: 4px; outline: none; border: 1px solid var(--gray-det); color: var(--gray); font-size: 15px; } .cart-page .cart-page-group .buy-price{ display: flex; justify-content: space-around; text-align: left; margin-top: 15px; padding: 30px 0px; position: relative; } .cart-page .cart-page-group .buy-price:before{ content: ''; position: absolute; right: 0; left: 0; top: 0; border-top: 1px dashed #00000022; margin: 0px 50px; } .cart-page .cart-page-group .buy-price .cart-total-price{ background: var(--gray-det); padding: 9px 30px; color: var(--back-white); border:none; outline: none; border-radius: 4px; } .cart-page .cart-page-group .buy-price .cart-btn-buy button{ background: var(--site-color); padding: 9px 40px; color: var(--back-white); border:none; outline: none; border-radius: 4px; cursor: pointer; } /* [end cart page] */ /* [start madeit page] */ /* start title sec */ .madeit-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .madeit-page .madeit-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .madeit-page .madeit-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .madeit-page .madeit-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .madeit-page .title-group{ position: relative; } .madeit-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .madeit-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .madeit-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .madeit-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .madeit-page .madeit-group .madeit-item{ position: relative; overflow: hidden; border:2px solid #bbbbbb99; padding: 3px; border-radius: 4px 4px 0 0; margin-bottom: 25px; } .madeit-page .madeit-group .madeit-item .img{ overflow: hidden; height: 300px; position: relative; border-radius: 4px 4px 0 0; } .madeit-page .madeit-group .madeit-item .img img{ width: 100%; height: 100%; border-radius: 4px 4px 0 0; } .madeit-page .madeit-group .madeit-item .img .hide{ display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: #00000077; opacity: 0; transition: .2s ease-in-out; } .madeit-page .madeit-group .madeit-item:hover .img .hide{ opacity: 1; } .madeit-page .madeit-group .madeit-item .img .hide button{ background: transparent; border:1px solid #bbbbbb66; padding: 5px 12px; cursor: pointer; color: var(--back-white); border-radius: 4px; opacity: 0; transition: .2s ease-in-out; } .madeit-page .madeit-group .madeit-item:hover .img .hide button{ opacity: 1; transition-delay: .2s; } .madeit-page .madeit-group .madeit-item .img .hide button:hover{ background: var(--site-color); transition-delay: .1s; } .madeit-page .madeit-group .madeit-item .name{ text-align: center; padding: 10px 0; background: var(--back-white); color: var(--gray); } .madeit-page .pagnation{ text-align: center; color: var(--gray-det); font-size: 18px; } /* [end madeit page] */ /*plug timer course*/ .foreground-circle{fill:none;stroke:#3498db}.foreground-circle-without-stroke-color{fill:none}.background-circle{fill:none;stroke:#ccc}.circle-text{font-family:Arial,sans-serif;color:#aaa;font-size:20px}.circle-container{overflow:visible}.point-circle{fill:#f0f8ff}.circle-icon.fa{font-size:30px;fill:#000} .point-circle { fill: #bbbbbb77; } .circle-info-text{ font-size: 17px; top: 5px; } .foreground-circle { stroke: var(--site-color); } /*plug timer course End*/ /*rating page start*/ /* start title sec */ .rating-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .rating-page .rating-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .rating-page .rating-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .rating-page .rating-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .rating-page .title-group{ position: relative; } .rating-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .rating-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .rating-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .rating-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .rating-page .item{ position: relative; background: var(--back-radial); margin: 0 auto; margin-top: 80px; margin-bottom: 10px; text-align: center; box-shadow: 0 2px 10px 1px #b5b5b5; transition: .4s ease-in-out; padding: 25px; border-radius: 4px; } .rating-page .item .img{ width: 100px; height: 100px; background: var(--back-radial); border-radius: 100%; position: absolute; top: -50px; left: calc(50% - 50px); border: 3px solid var(--back-white); overflow: hidden; } .rating-page .item .img .user-img{ width: 100%; height: 100%; } .rating-page .item .userName{ font-weight: bold; color: var(--gray-det); font-size: 14px; } .rating-page .item .info{ margin-top: 50px; } .rating-page .item .rate-comment{ color: var(--gray); font-size: 15px; } .rating-page .item .info .c-name{ margin: 10px 0; } .rating-page .item .info .c-name a{ color: var(--gray); transition: .2s ease-in-out; } .rating-page .item:hover .info .c-name a{ color: var(--site-color); } .rating-page .item .circle{ width: 40px; height: 40px; background: var(--back-radial); position: absolute; top: -20px; right: -20px; border-radius: 100%; border: 3px solid var(--back-white); line-height: 35px; font-size: 14px; color: var(--gray-det); font-weight: bold; transition: .2s ease-in-out; } .rating-page .item:hover .circle{ color: var(--gray); } .rating-page .item .star{ width: 11px; position: absolute; top: -11px; right: -14px; transition: .3s ease-in-out; } .rating-page .item:hover .star{ transform: rotate(140deg); } /*rating page end*/ /*stars rate site start*/ .btn-rate-modal{ position: fixed; right: 15px; bottom: 15px; z-index: 20; } .btn-rate-modal input{ background: var(--gray); color: var(--back-white); border: transparent; outline: none; padding: 8px 6px; font-size: 16px; border-radius: 5px; cursor: pointer; } .rate-form{ width: 100%; height: 100%; background-color: rgb(0,0,0, 0.8); position: fixed; top: 0; z-index: 22; display: flex; justify-content: center; align-items: center; transition: .3s ease-in-out; display: none; } .rate-form .rate-body{ background-color: var(--site-color); width: 450px; border-radius: 4px; display: flex; justify-content: center; padding: 15px 0; opacity: 0; } .rate-form .rate-body .comment-rev textarea{ resize: none; min-height: 150px; width: 100%; border-radius: 4px; padding: 10px 15px; font-size: 14px; color: var(--gray); outline: none; } .rate-form .rate-body .btns{ justify-content: space-around; padding: 5px 0; align-items: center; } .rate-form .rate-body .btns button{ padding: 8px 15px; width: 120px; font-size: 14px; border-radius: 4px; border: 1px solid var(--gray-det); outline: none; cursor: pointer; color: var(--gray); background: var(--back-white); } .rate-form .rate { float: left; padding: 0 10px; text-align: center; } .rate-form .rate:not(:checked) > input { position:absolute; top:-9999px; } .rate-form .rate:not(:checked) > label { float:right; width:1em; overflow:hidden; white-space:nowrap; cursor:pointer; font-size:30px; color:#ccc; } .rate-form .rate:not(:checked) > label:before { content: '★ '; } .rate-form .rate > input:checked ~ label { color: #ffc700; } .rate-form .rate:not(:checked) > label:hover, .rate-form .rate:not(:checked) > label:hover ~ label { color: #deb217; } .rate-form .rate > input:checked + label:hover, .rate-form .rate > input:checked + label:hover ~ label, .rate-form .rate > input:checked ~ label:hover, .rate-form .rate > input:checked ~ label:hover ~ label, .rate-form .rate > label:hover ~ input:checked ~ label { color: #c59b08; } /*stars rate site end*/ /*product offline page start*/ .product-offline-page .videos-group-all .body-content .item{ border-radius: 3px; overflow: hidden; position: relative; cursor: pointer; border: 1px solid #bbbbbb77; padding: 3px; margin-bottom: 20px; max-height: 340px; } .product-offline-page .videos-group-all .body-content .item .hide{ background-color: #00000060; position: absolute; top: 0; right: 0; left: 0; bottom: 0; opacity: 0; transition: .1s ease-in-out; display: flex; align-items: center; justify-content: center; } .product-offline-page .videos-group-all .body-content .item .hide i{ font-size: 20px; color: var(--back-white); border: 1px solid var(--back-white); padding: 5px 10px; border-radius: 4px; } .product-offline-page .videos-group-all .body-content .item:hover .hide{ opacity: 1; } .product-offline-page .content-section .videos-group .course-details-sec .location-title{ color: var(--gray); margin-top: 20px; } .product-offline-page .content-section .videos-group .course-details-sec .time-count{ color: var(--gray); margin-top: 20px; } .product-page .content-section .videos-group .course-details-sec .location-hint{ color: var(--gray-det); margin: 10px 0px; } .product-page .content-section .videos-group .course-details-sec .time-hint{ color: var(--gray-det); margin: 10px 0px; } /*product offline page end*/ /*links page start */ /* start title sec */ .links-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .links-page .links-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2; } .links-page .links-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .links-page .links-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .links-page .title-group{ position: relative; } .links-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .links-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .links-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .links-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .links-page .main-title-group{ color: var(--gray); color: var(--site-color); } .links-page .hint{ padding: 15px 0; border-bottom: 1px solid var(--gray); } .links-page .hint:first-child{ border-top: 1px solid var(--gray); } .links-page .hint .hint-title{ color: var(--gray); margin-top: 15px; } .links-page .hint .hint-body{ padding: 0; margin: 0; margin-top: 30px; margin-bottom: 15px; } .links-page .hint img{ max-height: 200px; border: 2px solid #ec76a0; padding: 2px; border-radius: 4px; } .links-page .hint .hint-body a{ border-bottom: 1px solid #bbbbbb77; } .links-page .hint .hint-body a{ color: var(--gray-det); transition: .2s ease-in-out; background: #ec76a0; padding: 4px 7px; border-radius: 4px; color: var(--back-white); box-shadow: 0px 6px 7px -3px #424242; } .links-page .hint .hint-body:before{ content: '-'; color: var(--gray-det); } .links-page .hint .hint-body:after{ content: '-'; color: var(--gray-det); } /*links page end */ /*buy process page start*/ .proces-page .buy-table{ border: 1px solid var(--gray-det); justify-content: center; color: var(--gray); border-radius: 4px; } .proces-page .buy-table .table-row .table-cell.modal-btn{ display: flex; justify-content: space-around; align-items: center; width: 70%; } .proces-page .buy-table .table-row .table-cell{ text-align: center; width: 100%; padding: 10px 0; } .proces-page .buy-table .table-row .table-cell.c-name{ width: 100%; } .proces-page .buy-table .table-row .table-cell.c-name .badge{ padding: 5px; font-size: 13px; } .proces-page .buy-table .table-row{ border-top: 1px solid var(--gray-det); } .proces-page .buy-table .table-row:first-child{ border-top-color: transparent; } .proces-page .buy-table .c-name{ border-right: 1px solid var(--gray-det); border-left: 1px solid var(--gray-det); } .proces-page .buy-table .table-row .modal-btn button.btn-view{ outline:none; background: none; color: var(--gray); border: 1px solid #bbbbbb77; padding: 3px 15px; border-radius: 4px; cursor: pointer; transition: .2s ease-in-out; } .proces-page .buy-table .table-row .modal-btn button.btn-view:hover{ background: var(--site-color); color: var(--back-white); } /*modal start*/ .proces-page .buy-table .table-row .det-modal{ background-color: rgb(0,0,0, 0.8); position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 22; display: flex; justify-content: center; align-items: center; transition: .3s ease-in-out; display: none; } .proces-page .buy-table .table-row .det-modal .m-content{ width: 500px; position: relative; background-color: var(--back-white); border-radius: 4px; padding: 50px 15px; padding-top: 70px; overflow-y: scroll; max-height: 95vh; text-align: center; opacity: 0; } .proces-page .buy-table .table-row .det-modal .m-content .close-btn{ position: absolute; top: 5px; right: 5px; background-color: var(--gray); color: var(--back-white); cursor: pointer; padding: 3px 10px; border-radius: 4px; font-size: 14px; -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -ms-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } .proces-page .buy-table .table-row .det-modal .m-content .close-btn:hover{ background-color: var(--site-color); } .proces-page .buy-table .table-row .det-modal .m-content .header{ margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed var(--gray-det); } .proces-page .buy-table .table-row .det-modal .m-content .item-det{ padding: 10px 0; } .proces-page .buy-table .table-row .det-modal .m-content .item-det .item-table{ border: 1px solid var(--gray-det); border-radius: 4px; } .proces-page .buy-table .table-row .det-modal .m-content .item-det .item-table .table-cell{ border-left: 1px solid var(--gray-det); } .proces-page .buy-table .table-row .det-modal .m-content .item-det .item-table .table-cell:last-child{ border-color: transparent; } .proces-page .buy-table .table-row .det-modal .m-content .item-det .item-table .table-cell:first-child{ width: 50%; background: var(--site-color); color: var(--back-white); } .proces-page .tab-content .title-sec.title-comments:before{ content: '\f53d'; font-family: 'Font Awesome 5 free'; font-weight: 900; position: absolute; top: -25px; right: -20px; font-size: 30px; color: var(--site-color); } .proces-page .courses-tables .accordion-buy .card-header{ cursor: pointer; -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -ms-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } .proces-page .courses-tables .accordion-buy .card-header:hover{ color: var(--site-color); } .proces-page .courses-tables .accordion-buy .card-body .table-course{ border: 1px solid var(--gray-det); border-bottom: none; border-radius: 4px; } .proces-page .courses-tables .accordion-buy .card-body .table-course .row-table{ display: flex; align-items: center; border-bottom: 1px solid var(--gray-det); } .proces-page .courses-tables .accordion-buy .card-body .table-course .row-table:last-child{ border-bottom: 1px solid var(--gray-det); } .proces-page .courses-tables .accordion-buy .card-body .table-course .row-table .cell{ border-left: 1px solid var(--gray-det); padding: 10px 0px; width: 75%; color: var(--gray); } .proces-page .courses-tables .accordion-buy .card-body .table-course .row-table .cell:first-child{ background: #bbbbbb77; } .proces-page .courses-tables .accordion-buy .card-body .table-course .row-table .cell:last-child{ border-left: none; width: 100%; } .proces-page .courses-tables .courses-buy{ padding: 30px 0px 15px 0px; } /*modal end*/ /*buy process page end*/ /*status modal start*/ .modal-status{ width: 100%; height: 100%; background-color: rgb(0,0,0, 0.8); position: fixed; top: 0; z-index: 22; display: flex; justify-content: center; align-items: center; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; display: none; } .modal-status .modal-content{ width: 400px; position: relative; background-color: var(--back-white); padding: 40px 0; text-align: center; opacity: 0; } .modal-status .modal-content .msg .msg-content.success{ color: green; } .modal-status .modal-content .msg .msg-content.danger{ color: red; } /*status modal end*/ /*reset password modal start*/ .modal-password{ width: 100%; height: 100%; background-color: rgb(0,0,0, 0.8); position: fixed; top: 0; z-index: 22; display: flex; justify-content: center; align-items: center; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; display: none; } .modal-password .modal-content{ width: 400px; position: relative; background-color: var(--back-white); padding: 40px 0; text-align: center; opacity: 0; } .modal-password .modal-content .title{ margin-bottom: 15px; padding-bottom: 15px; position: relative; color: var(--gray); } .modal-password .modal-content .title:after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px dashed var(--gray-det); margin: 0 20px; } .modal-password .modal-content input.email-reset{ width: 80%; margin: 0 auto; padding: 10px 8px; outline: none; border-radius: 4px; border: 1px solid var(--gray-det); font-size: 15px; color: var(--gray); } .modal-password .modal-content button.btn-reset{ width: 80%; margin-top: 15px; cursor: pointer; padding: 7px 0; outline: none; border: 1px solid var(--gray-det); background-color: var(--site-color); color: var(--back-white); border-radius: 4px; } /*reset password modal end*/ /*reset password page start*/ /* start title sec */ .reset-password-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .reset-password-page .reset-password-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .reset-password-page .reset-password-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .reset-password-page .reset-password-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .reset-password-page .title-group{ position: relative; } .reset-password-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .reset-password-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .reset-password-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .reset-password-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .reset-password-page .reset-form{ width: 500px; background-color: var(--back-white); margin: auto; margin-top: 40px; padding: 15px 0; } .reset-password-page .reset-form .input-item{ margin: 15px; } .reset-password-page .reset-form .input-item input, .reset-password-page .reset-form .input-item button{ padding: 7px 10px; border-radius: 4px; border: 1px solid var(--gray-det); width: 250px; outline: none; font-size: 15px; color: var(--gray); } .reset-password-page .reset-form .input-item button{ background: var(--site-color); color: var(--back-white); font-size: 16px; cursor: pointer; } .reset-password-page .reset-form .input-item .filled-pass{ color: var(--site-color); } /*reset password page end*/ /*modal login change start*/ .modal-chng-login{ width: 100%; height: 100%; background-color: rgb(0,0,0, 0.8); position: fixed; top: 0; z-index: 22; display: flex; justify-content: center; align-items: center; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; display: none; } .modal-chng-login .modal-content{ width: 400px; position: relative; background-color: var(--back-white); padding: 40px 0; text-align: center; opacity: 0; } .modal-chng-login .modal-content .title{ color: var(--gray); line-height: 30px; font-weight: bold; } .modal-chng-login .modal-content .btns{ display: flex; justify-content: space-around; border-top: 1px solid var(--gray-det); margin-left: 15px; margin-right: 15px; margin-top: 15px; padding-top: 30px; } .modal-chng-login .modal-content .btns button{ border-color: transparent; outline-color: transparent; padding: 5px 8px; border-radius: 4px; cursor: pointer; color: var(--back-white); } .modal-chng-login .modal-content .btns .chng-ok{ background-color: var(--site-color); } .modal-chng-login .modal-content .btns .chng-no{ background-color: var(--gray); } /*modal login change end*/ /*search page start*/ /* start title sec */ .search-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .search-page .search-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .search-page .search-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .search-page .search-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .search-page .title-group{ position: relative; } .search-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .search-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .search-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .search-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .search-page .search-input{ background: var(--back-white); padding: 20px 0px; text-align: center; position: relative; } .search-page .search-input:after{ content: ""; border-bottom: 1px solid #bbbbbb77; position: absolute; bottom: 0; right: 0; left: 0; margin: 0 100px; } .search-page .search-input .srch-page-form{ position: relative; width: 50%; border-radius: 4px; border: 1px solid var(--gray-det); margin: 0 auto; } .search-page .search-input .srch-page-form .srch-box{ width: 100%; border: transparent; border-radius: 4px; outline: none; padding: 10px 15px ; padding-left: 45px; } .search-page .search-input .srch-page-form .srch-click{ position: absolute; left: 0; top: 0; bottom: 0; background: none; border: none; outline: none; padding: 0px 15px; cursor: pointer; color: var(--site-color); } .search-page .search-group{ background: var(--back-white); padding: 20px 0px; text-align: center; position: relative; } .search-page .search-group .courses .title, .search-page .search-group .recipes .title{ margin-bottom: 15px; color: var(--site-color); font-size: 30px; } /*search page end*/ #at4-scc{ display: none!important; } .login_msg{ display:none; } /*.pagination start*/ .pagination{ justify-content: center; background: var(--gray); padding: 15px 0px; border-radius: 0px; } .pagination .page-link{ background: transparent; color: var(--back-white); outline: none; } .page-item.active .page-link{ background: var(--site-color); border-color: var(--back-white); } .pagination .page-link:focus{ box-shadow: none; } .page-item.disabled .page-link{ background: transparent; color: var(--back-white); } /*.pagination end*/ /*notify page start*/ /* start title sec */ .notify-page{ padding: var(--secPadding)0; position: relative; padding-top: 0px; background: var(--back-radial); } .notify-page .notify-title-row{ background-color: var(--footer-color); padding: calc(var(--secPadding) * 1.5); position: relative; z-index: 2 } .notify-page .notify-title-row:after{ content: ''; background-image: var(--title-back-img); background-size: cover; background-attachment: fixed; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -2; } .notify-page .notify-title-row:before{ content: ''; position: absolute; background: var(--title-back-fil); top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } .notify-page .title-group{ position: relative; } .notify-page .title{ position: relative; color: var(--back-white); font-weight: normal; font-size: 40px; } .notify-page .title-img{ width: 25px; position: absolute; bottom: -25px; left: calc(50% - 14px); } .notify-page .title:before{ content: ""; height: 3px; width: 200px; background: var(--back-white); position: absolute; bottom: -20px; left: calc(50% - 100px); } .notify-page .title:after{ content: ""; height: 3px; width: 100px; background: var(--site-color); position: absolute; bottom: -20px; left: calc(50% - 50px); } /* end title sec */ .notify-page .notify-group{ background: var(--back-white); padding: 25px 15px ; } .notify-page .notify-group .notify-item{ position: relative; display: block; background: var(--gray); color: var(--back-white); padding:5px 8px; border-radius: 3px; -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -ms-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; margin-bottom: 20px; } .notify-page .notify-group .notify-item:last-child{ margin-bottom: 0px; } .notify-page .notify-group .notify-item:hover{ background: var(--dark-gray); color: var(--back-white); } .notify-page .notify-group .notify-item .readed{ position: absolute; top: 5px; left: 5px; } .notify-page .notify-group .notify-item .readed i.fa-bell{ color: var(--site-color); font-size: 16px; background: #f9f9f9; padding: 3px; border-radius: 3px; } .notify-page .notify-group .notify-item .readed i.fa-check-double{ color: var(--gray-det); font-size: 16px; padding: 3px; } /*notify page end*/