/* Author : Themesvila Template Name: edutec - Education HTML Template Version : 1.0 */ /* * ---------------------------------------------------------------------------------------- * 01.GENERAL STYLE * ---------------------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap'); :root { --title: #222; --body: #555; --33: #333; --gray: #6E7688; --f6: #f6f6f6; --dc: #DCE1F5; --53: #535353; --ba: #BABABA; --fa: #fafafa; --f9: #f9f9f9; --white: #fff; --blue: #674CEF; --pink: #EF2E73; --yellow: #FFA722; --nblue: #18254F; --light-blue: #FFA722; --green: #7DBE48; --red: #FF3636; --footer: #00001B; --box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.06); --shadow-2: 0 6px 35px rgba(215,216,222,0.3); --shadow-3: 0 10px 50px 0 rgba(26,46,85,.07); --Y5: translateY(-5px); } body { color: var(--body); font-family: "Cairo", sans-serif; font-size: 16px; line-height: 1.7; font-weight: 400; overflow-x: hidden; position: relative; } html, body { height: 100% ;} h1, h2, h3, h4, h5, h6 { margin-top: 0; font-family: "Cairo", sans-serif; color: var(--title); font-weight: 700; } a{ color: var(--title); text-decoration: none; transition: all 0.3s ease 0s; } a:hover, a:focus { text-decoration: none; color: var(--blue); } p { margin-bottom: 15px; } ul, li { margin: 0; padding: 0; } fieldset { border: 0 none; margin: 0 auto; padding: 0; } img{ max-width: 100%; } .grid .g-col-6 { grid-column: auto/span 6; } .grid { display: grid; grid-template-rows: repeat(var(--bs-rows, 1), 1fr); grid-template-columns: repeat(var(--bs-columns, 12), 1fr); gap: var(--bs-gap, 1.5rem); } /* Start Preloader*/ .preloader { background: var(--blue); bottom: 0; right: 0; position: fixed; left: 0; top: 0; z-index: 99999; } .loader { margin: -20px -20px 0 0; position: absolute; width: 100%; height: 100%; background: url(../img/loader.gif) no-repeat center center; } /*-------------------------------------------------------------- # Animations --------------------------------------------------------------*/ @keyframes bubbleMover { 0% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); } 30% { -webkit-transform: translateY(30px) translateX(-50px) rotate(-15deg); transform: translateY(30px) translateX(-50px) rotate(-15deg); -webkit-transform-origin: center center; transform-origin: center center; } 50% { -webkit-transform: translateY(50px) translateX(-100px) rotate(-45deg); transform: translateY(50px) translateX(-100px) rotate(-45deg); -webkit-transform-origin: left bottom; transform-origin: left bottom; } 80% { -webkit-transform: translateY(30px) translateX(-50px) rotate(-15deg); transform: translateY(30px) translateX(-50px) rotate(-15deg); -webkit-transform-origin: right top; transform-origin: right top; } 100% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); -webkit-transform-origin: center center; transform-origin: center center; } } @keyframes shapeMover { 0%, 100% { transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0); } 50% { transform: perspective(400px) rotate(45deg) translateZ(20px) translateY(20px) translateX(-20px); } } @keyframes banner3Shake { 0% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } 30% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 60% { -webkit-transform: rotate3d(-1, 0, 0, 0deg); transform: rotate3d(-1, 0, 0, 0deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } } @keyframes squareMover { 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20%, 60% { -webkit-transform: translate(-20px, 40px) rotate(-180deg); transform: translate(-20px, 40px) rotate(-180deg); } 30%, 80% { -webkit-transform: translate(-40px, 60px) rotate(0deg); transform: translate(-40px, 60px) rotate(0deg); } } @keyframes treeMove { 0%, 100% { -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); } 25%, 75% { -webkit-transform: rotate(-5deg) translateX(-15px); transform: rotate(-5deg) translateX(-15px); } 50% { -webkit-transform: rotate(-10deg) translateX(-30px); transform: rotate(-10deg) translateX(-30px); } } @keyframes leafMove { 0%, 100% { -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); } 25%, 75% { transform: rotate(2deg) translateX(-5px); } 50% { transform: rotate(4deg) translateX(-10px); } } @keyframes messageMove { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(-10px); } } @keyframes textRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes shapeRotate { 0% { transform: rotate(0); } 50% { transform: rotate(-90deg); } 100% { transform: rotate(0); } } @keyframes flowerRotate { 0%, 100% { transform: rotate(0deg); } 25%, 75% { transform: rotate(-5deg); } 50% { transform: rotate(-10deg); } } @keyframes zump { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes zumpBottom { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes zoomIn { 0% { transform: scale(1.15); } 50% { transform: scale(1); } 100% { transform: scale(1.15); } } @keyframes zoomOut { 0% { transform: scale(0.8); } 50% { transform: scale(1); } 100% { transform: scale(0.8); } } @keyframes moveHorizontal { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes moveHorizontal2 { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(-359deg); } } @keyframes wobble-horizontal-hover { 16.65% { transform: translateX(-5px); } 33.3% { transform: translateX(3px); } 49.95% { transform: translateX(-4px); } 66.6% { transform: translateX(2px); } 83.25% { transform: translateX(-1px); } 100% { transform: translateX(0); } } @keyframes smartMove { 0% { width: 0; } 15% { width: 100%; } 85% { opacity: 1; } 90% { width: 100%; opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes smartMove2 { 0% { width: 0; } 15% { width: 126px; } 85% { opacity: 1; } 90% { width: 126px; opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes smartMove3 { 0% { width: 0; } 15% { width: 173px; } 85% { opacity: 1; } 90% { width: 173px; opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes float-bob-y { 0% { -webkit-transform: translateY(0px) translateX(0px) rotate(0deg); transform: translateY(0px) translateX(0px) rotate(0deg); } 50% { -webkit-transform: translateY(10px) translateX(-10px) rotate(-5deg); transform: translateY(10px) translateX(-10px) rotate(-5deg); } 100% { -webkit-transform: translateY(0px) translateX(0px) rotate(0deg); transform: translateY(0px) translateX(0px) rotate(0deg); } } @keyframes rectMove { 0%, 50%, 100% { -webkit-transform: scale(1); transform: scale(1); } 25%, 75% { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes cloudMove { 0% { background-position: right -1920px top 100%; } 100% { background-position: 100% 100%; } } @keyframes cloudMoveY { 0% { background-position: 0% 1920px; } 100% { background-position: 0% 0; } } @keyframes slideTop { 49% { -webkit-transform: translateY(100%); transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51% { opacity: 1; } } @keyframes slideLeft { 49% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 51% { opacity: 1; } } @keyframes animationCircle { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 20% { transform: translate(-73px, -1px) rotate(-36deg) scale(0.9); } 40% { transform: translate(-141px, 72px) rotate(-72deg) scale(1); } 60% { transform: translate(-83px, 122px) rotate(-108deg) scale(1.2); } 80% { transform: translate(40px, 72px) rotate(-144deg) scale(1.1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } /* Start Buttons */ .bg-btn, .white-btn { background: var(--blue); border: 1px solid var(--blue); padding: 0 30px; color: var(--white); display: inline-block; height: 50px; line-height: 48px; border-radius: 30px; font-weight: 500; transition: .5s; text-align: center; overflow: hidden; position: relative; z-index: 1; -webkit-backface-visibility: hidden; font-size: 16px; } .bg-btn:before, .white-btn:before { border: 1px solid var(--pink); content: ''; z-index: -1; position: absolute; top: 50%; right: 100%; margin: -15px 1px 0 0; width: 50px; height: 30px; border-radius: 50%; background: var(--pink); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale3d(1, 2, 1); transform: scale3d(1, 2, 1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.9,1); transition-timing-function: cubic-bezier(0.7,0,0.9,1); } .bg-btn:hover:before, .white-btn:hover:before { -webkit-transform: scale3d(9, 9, 1); transform: scale3d(9, 9, 1); } .bg-btn i{ font-size: 14px; padding-right: 3px; } .white-btn{ background: var(--white); border: 1px solid var(--white); color: var(--blue); } .bg-btn:hover, .bg-btn:focus, .white-btn:hover{ color: var(--white); } .bg-btn:hover{ border-color: var(--pink); } /* End Buttons */ /* Start Header */ #navigation{ width: 100%; } #navigation.header1{ } .header-top { color: var(--white); padding: 10px 80px; background: var(--nblue); } .header-top p { margin-bottom: 0; } .header-top a{ color: var(--white); transition: .5s; } .header-top a:hover, .header-top a:focus{ color: var(--pink); } .header-top i{ font-size: 16px; } .header-top p span { display: inline-block; position: relative; padding-left: 20px; margin-left: 20px; border-left: 1px solid var(--ba); line-height: 12px; } .header-top p span:last-child{ border-left: none; } .banner_search_form{ position: relative; width: 90%; display: inline-block; } .home-banner .banner_search_form{ font-weight: 500; } .banner_search_form .hsearch-field { margin-bottom: 0; height: 58px; border-radius: 30px; padding: 14px 25px; border-color: var(--fa); background: var(--fa); color: var(--body); line-height: 58px; } .banner_search_form .hsearch_btn { border: 1px solid transparent; position: absolute; top: 6px; left: 6px; color: var(--white); background: var(--blue); padding: 9px 27px; border-radius: 30px; transition: .5s; } .banner_search_form .hsearch_btn:hover, .banner_search_form .hsearch_btn:focus{ background: var(--pink); } .home-banner .banner_search_form p { padding-top: 15px; margin-bottom: 0; font-weight: 600; text-transform: capitalize; } .home-banner .banner_search_form p a { font-weight: 500; text-decoration: underline; color: var(--body); transition: .5s; } .home-banner .banner_search_form p a:hover{ text-decoration: none; color: var(--blue); } .banner_search_form .hsearch_btn i{ font-size: 12px; margin-left: 1px; } .style-2 .header-top p span:after{ background: var(--body); } .h-left p span:last-child, .h-center p span:last-child, .h-right p span:last-child{ padding-left: 0px; margin-left: 0px; } .h-left p i, .h-center p i, .hlocation i{ padding-left: 4px; color: var(--pink); } .h-left p span:last-child:after, .h-right p span:last-child:after{ display: none; } .h-right p span{ margin-left: 5px; } .h-right a { color: var(--white); margin-right: 0; width: 35px; height: 35px; line-height: 35px; /* border: 1px solid var(--dc); */ text-align: center; display: inline-block; border-radius: 50%; transition: .5s; } .h-right a:hover, .h-right a:focus{ background: var(--pink); border-color: var(--pink); color: var(--white); } .h-right a i{ font-size: 16px; } .h-right a:first-child{ margin-right: 0; } .main-header{ display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0 40px; } .site-logo{ width: 200px; } .site-logo img{ } .header-left, .header-right{ align-items: center; width: 300px; } .style-2 .header-top{ background: var(--fa); color: var(--body); } .style-2 .header-top a{ color: var(--body); } .style-2 .header-top a:hover{ color: var(--blue); } .ac-cart { display: inline-block; } .ac-cart a { position: relative; margin-left: 30px; width: 38px; height: 38px; display: inline-block; background: transparent\); text-align: center; border-radius: 50%; color: var(--body); margin-top: 5px; line-height: 38px; border: 1px solid var(--ba); transition: .5s; } .ac-cart a:hover, .ac-cart a:focus{ background: var(--blue); border-color: var(--blue); color: var(--white); } .ac-cart i{ font-size: 18px; } .mcart_icon{ position: relative; } .mcart_icon span { position: absolute; display: inline-block; width: 17px; height: 17px; line-height: 16px; background: var(--yellow); box-shadow: var(--box-shadow); text-align: center; font-size: 11px; border-radius: 50%; left: 0px; top: -9px; color: var(--title); } .ac_icon{ position: relative; } .header-2 .ac-cart a{ margin-left: 20px; margin-right: 0px; } .header-2 .ac-cart{ margin-left: 5px; } #navigation.header-2 .mcart_icon{ margin-left: 25px; } .header-top .h-right span:last-child{ padding-left: 0; } .header__hamburger { padding-right: 30px; cursor: pointer; } .header__hamburger .sidebar__toggle{ font-size: 28px; } /* End Header */ /* * ---------------------------------------------------------------------------------------- * Cart Drawer * ---------------------------------------------------------------------------------------- */ .customize-support .cart_drawer { top: 27px; } .customize-support .cart_drawer_btm .bottom_group{ bottom: 20px; } .searchcart .cart-icon.mobile_cart{ display: none; } .min_cart_wrapper { background: rgba(0,0,0, 0.7); right: 0; opacity: 0; position: fixed; top: 0; transition: opacity 0.5s, visibility 0.5s; visibility: hidden; width: 100%; height: 100%; z-index: 40000; } #mini_cart.min_cart_active { -webkit-transform: translateX(0); transform: translateX(0); visibility: visible; opacity: 1; } .cart_drawer { position: absolute; height: 100%; width: 380px; z-index: 99; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; transition: background 0.5s, transform 0.5s; -webkit-transform: translateX(-100%); transform: translateX(-100%); position: absolute; left: 0; background: var(--white); border: 1px solid #E9EEF4; box-shadow: 0 0 10px 3px rgba(0,0,0,.05); } #mini_cart.min_cart_active .cart_drawer { -webkit-transform: translateX(0); transform: translateX(0); visibility: visible; opacity: 1; } .cart_drawer .cart_close { cursor: pointer; position: absolute; top: 2px; right: 3px; width: 37px; height: 37px; color: var(--white); font-size: 23px; text-transform: uppercase; font-weight: 400; text-align: center; line-height: 40px; background: var(--blue); border-radius: 50%; transition: .5s; } .cart_drawer .cart_close:hover, .cart_drawer .cart_close:focus{ background: #002935; } .cart_drawer .cart_number { font-weight: 600; display: block; min-width: 45px; height: 45px; text-align: center; line-height: 46px; color: #111; position: absolute; left: 0; top: 0; border: 1px solid #ecebeb; border-top: transparent; border-left: transparent; } .cart_drawer .title { font-weight: 500; line-height: 43px; height: 45px; color: #111; border-bottom: 1px solid #ecebeb; padding-bottom: 0; margin-bottom: 0; text-align: center; font-size: 20px; } .minicart .mini-content .prod { position: relative; height: calc(100vh - 162px); max-height: 100%; overflow: auto; padding: 0 20px; } .woocommerce-mini-cart__empty-message{ text-align: center; padding: 50% 0; } .cart_drawer li { border-bottom: 1px solid #e1e1e1; align-items: flex-start; position: relative; padding: 20px 0px; } .cart_drawer li:last-child{ } .thumb_img_cartmini{ width: 25%; } .product-detail{ width: 70%; padding-right: 20px } .produc_remove{ width: 15%; text-align: center; } .cart_drawer h3 { font-size: 16px; font-weight: 500; line-height: 24px; } .cart_drawer h3 a{ color: #222; transition: .5s; } .cart_drawer h3 a:hover, .cart_drawer h3 a:focus{ color: var(--blue); } .mini_cart_list{ position: relative; height: calc(100vh - 162px); max-height: 100%; overflow: auto; padding: 30px 20px 0; } .mini_cart_list img{ border-radius: 4px; width: auto!important; height: auto!important; } .cart_drawer_btm .sub-total { height: 59px; line-height: 59px; background-color: var(--white); color: #111; padding: 0 15px; overflow: hidden; bottom: 59px; position: absolute; width: 100%; padding-bottom: 116px; } .cart_drawer_btm .sub-total strong{ float: right; } .cart_drawer_btm .sub-total .woocommerce-Price-amount{ float: left; font-weight: 600; } .cart_drawer_btm .total-price{ font-weight: 600; } .cart_drawer_btm .bottom_group { width: 100%; max-width: 100%; position: absolute; bottom: 0; right: 0; padding: 0 5px; } .cart_drawer_btm .total-title{ font-weight: 600; } .cart_drawer_btm .button-viewcart, .cart_drawer_btm .button-checkout { width: 100%; display: block; float: right; font-weight: 600; font-size: 16px; text-transform: capitalize; text-align: center; height: 50px; line-height: 50px; transition: color .3s ease 0s,background-color .3s ease 0s; border-radius: 4px; } .cart_drawer_btm .button-viewcart{ background-color: var(--white); border: 2px solid var(--blue); margin-bottom: 10px; color: var(--blue); } .cart_drawer_btm .button-checkout{ background-color: var(--nblue); color: var(--white); } .cart_drawer_btm .button-viewcart:hover, .cart_drawer_btm .button-viewcart:focus{ background: var(--blue); color: var(--white); } .cart_drawer_btm .button-checkout:hover, .cart_drawer_btm .button-checkout:focus{ background: var(--blue); color: var(--white); } /*------------------------------- # Menu --------------------------------*/ #main-menu{ margin-left: 0px; } #main-menu li{ display: inline-block; position: relative; padding: 5px 18px; } #main-menu li a{ color: var(--body); font-size: 17px; font-weight: 600; text-transform: capitalize; transition: .5s; } #main-menu li a:hover, #main-menu li a:focus{ color: var(--blue); } /*------------------------------- # Dropdwon menu --------------------------------*/ #navigation #main-menu ul li ul , #navigation #main-menu ul li ul li ul { background: var(--white); -webkit-box-shadow: 0 0 10px 3px rgba(0,0,0,.05); box-shadow: 0 0 10px 3px rgba(0,0,0,.05); right: -55px; list-style: outside none none; margin: 0; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; padding:10px; position: absolute; text-align: right; top: 120%; -webkit-transition:all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; visibility: hidden; width: 210px; z-index: 999; border-radius: 4px; border-top: 2px solid var(--blue); } #navigation #main-menu .menu-item-has-children { position: relative; margin-left: 28px; } #navigation #main-menu .menu-item-has-children::after { position: absolute; content: "\e64b"; font-family: themify; margin-top: 0px; margin-right: 0; font-size: 10px; left: -10px; top: 10px; color: #222; font-size: 12px; font-weight: 600; } #navigation #main-menu ul li ul li{ position: relative; } #navigation #main-menu ul li ul li ul{ top: 0; left: auto; right: 205px; } #navigation.navbar-fixed #main-menu ul li li a{ color: #333; } #navigation #main-menu ul li:hover ul, #navigation #main-menu ul li ul li:hover > ul{ opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; top: 100%; } #navigation #main-menu ul li ul li {display: block; margin: 0; padding: 0;} #navigation #main-menu ul li ul li a { color: var(--body); display: block; font-size: 16px; line-height: 30px; font-weight: 600; padding: 4px 16px; position: relative; transition: all 0.3s ease 0s !important; visibility: inherit !important; opacity: inherit !important; text-transform: capitalize; border-radius: 4px; } #navigation #main-menu ul li ul li a:hover{ color: var(--white); background-color: var(--blue); text-decoration: none; } /* Start Banner */ .home-banner{ background-size: cover; padding: 210px 0 110px; } .banner-2{ padding: 110px 0; } .bsubtitle { font-size: 17px; font-weight: 500; text-transform: uppercase; display: inline-block; background: rgba(237, 47, 115, .07); color: var(--pink); padding: 4px 20px; border-radius: 30px; margin-bottom: 12px; letter-spacing: .5px; } .btitle{ font-size: 50px; font-weight: 700; text-transform: capitalize; margin-bottom: 2.6rem; } .btitle span{ color: var(--pink); position: relative; } .btitle span img { position: absolute; right: 0; bottom: -17px; } .bcontent{ font-size: 18px; } .home-banner p{ margin-bottom: 2.3rem; } .book-icon { width: 80px; height: 80px; line-height: 75px; background: var(--yellow); text-align: center; border-radius: 50%; box-shadow: var(--box-shadow); position: absolute; top: -100px; left: 140px; animation: zumpBottom 3s linear infinite; } .book-icon img{ width: 40px; } .student-badge { background: var(--white); border-radius: 8px; box-shadow: var(--box-shadow); right: 50%; bottom: -26px; transform: translateX(50%); width: 230px; } .student-badge h4{ color: var(--title); font-size: 20px; } .student-badge h4 span{ font-weight: 600; color: var(--yellow); } .student-badge img { width: 125px; } .sb-content{ } .sb-content h4{ margin-bottom: 0; } .bbtm_image{ position: relative; } .btop_image{ } .bbtm_image{ } .btop-shape { position: absolute; top: -35px; left: -60px; width: 100px; animation: zoomOut 3s linear infinite; } .bshape1 { width: 35px; position: absolute; bottom: 170px; } .bshape2 { width: 90px; position: absolute; right: 17%; bottom: 10%; animation: moveHorizontal 3s linear infinite; } .bshape3 { width: 48px; position: absolute; right: 18px; bottom: 40%; animation: zoomOut 3s linear infinite; } .vid-btn { width: 70px; height: 70px; background: var(--white); display: inline-block; line-height: 70px; text-align: center; border-radius: 50%; position: absolute; bottom: -17px; left: -15px; } .vid-btn svg{ width: 20px; } .btop-lwshape { position: absolute; top: -13px; width: 92px; right: 33px; animation: moveHorizontal 3s linear infinite; } .bbtm-dot-shape { width: 135px; position: absolute; bottom: -57px; left: -40px; animation: zumpBottom 3s linear infinite; } .bbtm-wave-shape { width: 150px; position: absolute; bottom: -24px; left: -40px; animation: zumpBottom 3s linear infinite; } /* End Banner */ /* Start Title */ .section-padding{ padding: 120px 0; } .pt-120{ padding-top: 120px; } .pt-100{ padding-top: 100px; } .pt-80{ padding-top: 80px; } .pb-120{ padding-bottom: 120px!important; } .pb-100{ padding-bottom: 100px; } .pb-80{ padding-bottom: 80px; } .pt-0{ padding-top: 0; } .pb-0{ padding-bottom: 0; } .section-title{ margin-bottom: 50px; } .section-title span { background: var(--pink); color: var(--white); padding: 3px 24px; border-radius: 30px; margin-bottom: 15px; display: inline-block; } .section-title h2 { font-size: 30px; line-height: 40px; margin-bottom: 18px; display: block; } /* End Title */ /* Start Category */ .ml-0{ margin-right: 0!important; } .pl-30{ padding-right: 30px!important; } .category-2 .category-item .cicon{ right: 50%; top: -45px; transform: translateX(50%); } .category-item { background: rgba(103, 76, 239, .04); margin-bottom: 40px; border: 1px solid var(--dc); border-radius: 8px; position: relative; text-align: center; transition: .5s; padding: 40px 30px; } .category-2 .category-item{ margin-top: 40px; margin-bottom: 30px; } .category-item:hover{ transform: var(--Y5); } .category-2 .category-item .cicon, .category-item .cicon { width: 75px; height: 75px; line-height: 69px; border-radius: 50%; text-align: center; } .category-item .cicon{ background: var(--blue); } .category-item{ margin-bottom: 25px; } .category-2 .category-item .cicon{ position: absolute; right: 50%; top: -38px; transform: translateX(50%); } .category-item .cicon{ position: relative; } .category-item .cicon::before { width: 93px; height: 93px; border: 1px dashed var(--blue); position: absolute; right: -9px; top: -9px; content: ''; border-radius: 50%; } .cbg_image{ width: 100%; height: 0%; position: relative; position: absolute; right: 0; bottom: 0; border-radius: inherit; transition: all 500ms ease; background: var(--blue); } .category-item svg{ width: 36px; } .category-2 .cat_content{ position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); width: 100%; padding: 30px; } .cat_content a{ display: block; } .category-2 .category-item{ height: 200px; } .category-2 .category-item .cat_content{ padding: 0 15px; } .category-item h4 { font-size: 20px; line-height: 25px; margin-bottom: 18px; transition: .5s; margin-top: 30px; } .category-2 .category-item h4{ margin-top: 22px; } .category-item h4 a{ color: var(--title); transition: .5s; } .category-item a:hover h4, .category-item a:focus h4{ color: var(--blue); } .category-item span { background: var(--white); padding: 3px 11px; border: 1px solid var(--dc); font-weight: 500; border-radius: 5px; color: var(--blue); } .ccolor1{ background: rgba(237, 47, 115, .04); } .ccolor1 span{ color: var(--pink); } .ccolor1 .cicon{ background: var(--pink); } .ccolor1 .cicon:before { border: 1px dashed var(--pink); } .ccolor2{ background: rgba(255, 167, 34, .04); } .ccolor2 span{ color: var(--yellow); } .ccolor2 .cicon:before { border: 1px dashed var(--yellow); } .ccolor2 .cicon{ background: var(--yellow); } .ccolor3{ background: rgba(125, 190, 72, .04); } .ccolor3 span{ color: var(--green); } .ccolor3 .cicon:before { border: 1px dashed var(--green); } .ccolor3 .cicon{ background: var(--green); } .ccolor4{ background: rgba(255, 54, 54, .04); } .ccolor4 span{ color: var(--red); } .ccolor4 .cicon:before { border: 1px dashed var(--red); } .ccolor4 .cicon{ background: var(--red); } /* End Category */ /* Start About */ .about_items { gap: 20px; } .about_items .about-item { background: var(--white); border-radius: 4px; list-style-type: none; padding: 15px 15px 15px; border-right: 2px solid var(--dc); border-top: 1px solid var(--dc); border-left: 1px solid var(--dc); border-bottom: 1px solid var(--dc); transition: .5s; } .about_items .about-item:hover{ border-right-color: var(--blue); box-shadow: var(--box-shadow); } .abicon{ display: inline-block; margin-left: 10px; position:relative; transition: all 500ms ease; } .about-item:hover .abicon{ animation: slideLeft 0.5s; } .about_items svg { width: 35px; display: inline-block; position: relative; z-index: 1; } .about_items h4{ font-size: 17px; color: var(--title); display: inline-block; } .about .bg-btn{ margin-top: 40px; } .about-title { margin-bottom: 50px; } .about-title h2{ margin-bottom: 20px; } .about-image{ position: relative; } .about-img{ } .ab_badge { position: absolute; bottom: 25%; right: 50%; transform:translateX(50%); } .abb_inner{ animation: moveHorizontal 3s linear infinite; background: var(--yellow); box-shadow: var(--box-shadow); display: inline-block; border-radius: 8px; } .ab_badge img{ width: 50px; display: inline-block; vertical-align: top; } .ab_badge .atext{ display: inline-block; } .ab_badge h4, .ab_badge p{ margin-bottom: 0; color: var(--white); } .abs_dots { width: 160px; position: absolute; bottom: -20px; right: -52px; z-index: -1; animation: zumpBottom 3s linear infinite; } .about_shape{ width: 160px; height: 240px; position: absolute; left: 0; bottom: 26%; background: rgba(237, 47, 115, .2); -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); mask-repeat: repeat; mask-position-x: 0%; mask-position-y: 0%; mask-size: auto; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: auto; mask-size: auto; z-index: -1; } /* End About */ /* Start Courses Area */ .course-item{ background: var(--white); border-radius: 10px; position: relative; overflow: hidden; transition: .5s; box-shadow: var(--box-shadow); margin: 20px 0 25px; } .course-slider .owl-nav.disabled{ display: block; } .course-img img{ border-radius: 10px 10px 0 0; } .course-hover{ width: 100%; height: 100%; background: var(--white); position: absolute; right: 0; transform:translateX(100%); top: 0; visibility: hidden; opacity: 0; transition: .5s; } .course-item:hover .course-hover{ transform:translateX(0%); opacity: 1; visibility: visible; } .chover_content{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); bottom: 0; right: 0; left: 0; border-radius: 4px; padding: 50px 30px 45px 30px; -webkit-transition: .5s; transition: .5s; display: inline-table; } .course-img{ position: relative; } .course-price { background: var(--blue); color: var(--white); padding: 1px 17px; display: inline-block; position: absolute; bottom: 0; left: 0; font-size: 18px; font-weight: 600; border-radius: 0 15px 0px 0; } .course-content{ padding: 30px 30px 25px; } .course-content h3, .course-hover h3 { font-size: 18px; line-height: 25px; } .course-hover p{ margin-bottom: 0; } .course-content .crating i{ color: var(--yellow); } .course-content .cmeta svg, .course-hover .hcmeta svg{ width: 18px; } .ccategory { margin-bottom: .5rem; } .ccategory a { display: inline-block; padding: 1px 13px; color: rgba(237, 47, 115, 1); background: rgba(237, 47, 115, 0.07); font-size: 16px; margin-left: .5rem; margin-bottom: .5rem; border-radius: 4px; font-weight: 400; } .crating{ font-size: 15px; } .crating span{ margin-right: .5rem; color: var(--body); font-weight: 500; } .hcmeta a{ color: var(--body); } .cmeta svg, .hcmeta svg{ margin-left: .1rem; } .hcmeta img{ width: 18px; margin-left: .2rem; } .hcmeta i{ color: var(--yellow); } .cmeta span:last-child, .hcmeta span:last-child{ float: left; } .cmtime{ text-align: left; position: relative; } .cmeta, .hcmeta { font-size: 15px; border-top: 1px solid var(--dc); padding-top: .8rem; margin-top: 25px; display: block; font-weight: 500; } .course-hover .bg-btn { margin-top: 1.5rem; height: 42px; line-height: 40px; border-radius: 30px; padding: 0 24px; font-size: 15px; } .hcourse-price { font-weight: 600; color: var(--title); font-size: 20px; margin-bottom: 10px; } .hcourse-price del{ font-size: 18px; font-weight: 400; } .cbtn-wrap { position: relative; display: inline-block; margin-bottom: 0; padding-right: 100px; font-weight: 500; } .cbtn-wrap img{ width: 87px; position: absolute; right: 0; top: -20px; animation: moveHorizontal 3s linear infinite; } .cbtn-wrap a, .cbtn-wrap a i{ color: var(--blue); } .course-slider{ position: relative; } .course-slider .owl-nav.disabled button.owl-prev, .course-slider .owl-nav.disabled button.owl-next{ position: absolute; top: 50%; transform: translateY(-50%); } .course-slider .owl-nav.disabled button.owl-prev{ right: -8%; } .course-slider .owl-nav.disabled button.owl-next{ left: -8%; } .cbook-shape { position: absolute; right: 4%; top: 14%; width: 50px; animation: zumpBottom 3s linear infinite; } .cstar-shape { position: absolute; left: 4%; top: 22%; width: 65px; animation: zumpBottom 3s linear infinite; } /* End Courses Area */ /* Start Video */ .video-area{ position: relative; } .video-area img{ border-radius: 30px; } .video-area svg{ width: 150px; } .video-inner{ position: relative; } .vd-btn { position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); padding: 10px 12px 10px 22px; background: var(--white); border-radius: 100px; display: inline-block; transition: .5s; z-index: 1; } .vd-btn:after{ content: ''; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(var(--yellow),var(--yellow)); background-size: 0 100%; background-repeat: no-repeat; transition: .4s; z-index: -1; transition: .5s; border-radius: 100px; } .vd-btn:hover:after{ background-size: 100% 100%; } .vd-btn:hover, .vd-btn:focus{ color: var(--white); } .vd-btn:hover i, .vd-btn:focus i{ background: var(--white); color: var(--yellow); } .vd-btn i { width: 50px; height: 50px; line-height: 50px; background: var(--blue); border-radius: 50%; display: inline-block; text-align: center; color: var(--white); margin-left: 8px; font-size: 18px; } .video-area .vid-shape { position: absolute; right: -60px; bottom: -60px; animation: moveHorizontal 3s linear infinite; } /* End Video */ /* End Why Choose Us */ .mb-50{ margin-bottom: 50px; } .mb-100{ margin-bottom: 100px; } .why-item{ padding: 1.5rem; border-radius: 8px; border: 1px solid var(--dc); margin-bottom: 1.5rem; transition: .5s; } .why-item:hover{ transform: var(--Y5); box-shadow: var(--shadow-2); } .why-item .why-con { width: 65px; height: 65px; line-height: 60px; background: var(--fa); border-radius: 50%; text-align: center; position: relative; margin-bottom: 1.4rem; transition: .5s; /* box-shadow: var(--box-shadow); */ position: relative; margin-top: 8px; margin-right: 8px; } .why-item .why-con::before { content: ''; width: 80px; height: 80px; border: 1px dashed var(--dc); right: -8px; top: -8px; position: absolute; border-radius: 50%; } .why-item .why-con svg{ width: 35px; display: inline-block; } .why-item .why-con span { width: 22px; height: 22px; line-height: 20px; background: var(--blue); color: var(--white); display: inline-block; border-radius: 50%; font-size: 14px; font-weight: 500; position: absolute; right: -5px; top: -5px; transition: .5s; } .why-item:hover .why-con{ background: var(--blue); } .why-item:hover .why-con span{ background: var(--yellow); color: var(--title); box-shadow: var(--box-shadow); } .why-item:hover .why-con svg path{ fill: var(--white); } .why-item .why-con svg path{ fill: var(--body); } .why-item h4{ font-size: 20px; } .why-item p{ margin-bottom: 0; } .why-img img{ border-radius: 15px; } .why-img .phone-number { background: var(--white); box-shadow: var(--box-shadow); bottom: 10%; right: 50%; transform: translateX(50%); border-radius: 8px; font-weight: 600; color: var(--title); } .why-img .phone-number svg{ width: 40px; display: inline-block; transition: all 500ms ease; } .why-img .phone-number:hover svg{ animation: slideLeft 0.5s; } .why-shape{ position: absolute; left: -40px; bottom: -20px; animation: zumpBottom 3s linear infinite; } .why-shape img{ width: 150px; } /* End Why Choose Us */ /* Start Newsletter */ .newsletter{ padding: 3.5rem; border-radius: 15px; background-size:cover; background-position:center; background-attachment:fixed; position: relative; } .newsletter:after{ position: absolute; background-color: var(--blue); content: ''; width: 100%; height: 100%; right: 0; top: 0; border-radius: 15px; opacity: .5; } .footer-newsletter h2 { font-size: 28px; line-height: 39px; margin-bottom: 25px; } .newsletter-form { position: relative; } .newsletter input[type="text"], .newsletter input[type="email"]{ background: var(--white); color: var(--body); width: 100%; height: 60px; line-height: 60px; border: 1px solid var(--white); padding: 10px 25px; border-radius: 30px; margin-bottom: 0; } .newsletter input[type="text"]:focus, .newsletter input[type="email"]:focus{ outline: none; } .newsletter button { position: absolute; left: 19px; top: 5px; width: 49px; height: 49px; line-height: 46px; border: 1px solid var(--blue); background: var(--blue); color: var(--white); border-radius: 50%; transition: .5s; display: inline-block; } .newsletter button i{ padding-right: 0; font-size: 16px; } .newsletter button:hover, .newsletter button:focus{ background: var(--pink); border-color: var(--pink); color: var(--white); } /* End Newsletter */ /* Start Counter */ .partners{ padding: 100px 0; } .part-title { margin-bottom: 3.3rem; } .part-title h2{ font-size: 30px; display: inline-block; position: relative; } .pleft-shape { position: absolute; right: -14px; top: -20px; width: 85px; display: inline-block; } .pright-shape { position: absolute; left: -35px; top: -6px; width: 34px; display: inline-block; } .partner-slider img{ width: 150px!important; } /* End Counter */ /* Start Review */ .review-slider{ overflow: hidden; display: block; } .rev_title{ padding-left: 15px; } .rev_arrow{ } .course-slider .owl-nav.disabled button, .rev_arrow span { width: 50px; height: 50px; line-height: 50px; background: var(--blue); display: inline-block; text-align: center; border-radius: 50%; margin-left: 0; cursor: pointer; transition: .5s; color: var(--white); } .rev_arrow span { margin-left: 15px; } .course-slider .owl-nav.disabled button:hover, .rev_arrow span:hover{ background: var(--pink); } .review-item{ position: relative; } .rev-content { padding: 30px 30px 30px 40px; /* border: 2px solid var(--dc); */ transition: all 500ms ease; background-repeat: no-repeat; background-size: cover; margin: 47px 0 20px; border-radius: 30px; background: var(--white); border: 1px solid var(--dc); box-shadow: var(--shadow-2); } .rev-image { width: 102px; height: 102px; position: absolute; left: 40px; top: -45px; border-radius: 50%; border: 10px solid var(--white); outline: 1px solid var(--dc); } .rev-image span{ position: absolute; bottom: 0; left: 0; background: var(--white); width: 32px; height: 32px; border-radius: 50%; box-shadow: var(--box-shadow); text-align: center; } .rev-image img{ border-radius: 50%; } .rev-image svg{ width: 20px; } .rim-inner{ position: relative; } .review-item h4{ font-size: 20px; margin-bottom: 10px; } .review-item span { font-weight: 600; margin: 0px 0 4px; display: block; font-size: 15px; } .rrating{ color: var(--yellow); font-size: 17px; padding-left: 2px; } .rev_shape { width: 220px; height: 220px; background: rgba(237, 47, 115, .2); position: absolute; left: 0; bottom: 16%; -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); mask-repeat: repeat; mask-position-x: 0%; mask-position-y: 0%; mask-size: auto; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: auto; mask-size: auto; animation: zump 3s linear infinite; } /* End Review */ /* Start Instructors */ .instructors{ padding-bottom: 20px; } .instructor{ margin-bottom: 100px; transition: .5s; position: relative; } .ins-img, .inst-img{ position: relative; overflow: hidden; border-radius: 10px; transition: .5s; } .inst-img img{ width: 100%; } .ins-img:before, .inst-img:before { position: absolute; content: ""; right: 0px; top: 0px; width: 100%; height: 0; background: rgba(0, 0, 0, 0.4); border-radius: 10px; transition: .5s; z-index: 1; } .instructor:hover .ins-img:before, .instructor_2:hover .inst-img:before{ height: 100%; } .ins-img img{ border-radius: 10px; transition: .5s; } .instructor:hover img{ transform: scale(1.2); } .social_wraper{ position: absolute; top: 30px; left: 30px; overflow: hidden; z-index: 111; } .ins-social { list-style-type: none; list-style-type: none; transition: .5s; transform: scale(0); } .social_wraper:hover .ins-social { opacity: 1; transform: scale(1); } .social-share-icon { width: 35px; height: 35px; line-height: 35px; background: var(--blue); color: var(--white); border-radius: 50%; display: inline-block; text-align: center; cursor: pointer; margin-bottom: 12px; } .ins-social li a{ width: 35px; height: 35px; line-height: 38px; background: var(--white); color: var(--blue); display: inline-block; text-align: center; border-radius: 50%; margin-bottom: 12px; transition: .5s; font-size: 17px; } .ins-social li a:hover, .ins-social li a:focus{ background: var(--pink); color: var(--white); } .instructor{ position: relative; } .ins-content { position: absolute; bottom: 10px; right: 50%; transform: translateX(50%); background: var(--white); width: 93%; padding: 1.2rem 1rem; border-radius: 5px; box-shadow: var(--box-shadow); text-align: center; z-index: 11; height: 95px; transition: .5s; } .instructor:hover .ins-content{ height: auto; bottom: -70px; } .ins-content .designation{ font-weight: 500; } .ins-content h4, .inst-content h4{ font-size: 20px; margin-bottom: 5px; } .ins-meta { margin-top: 12px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 10px; font-size: 16px; display: flex; align-items: center; justify-content: space-between; opacity: 0; visibility: hidden; } .inst-meta{ margin-top: 12px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 10px; font-size: 16px; display: flex; align-items: center; justify-content: space-between; } .instructor:hover .ins-meta{ opacity: 1; visibility: visible; } .ins-meta span{ } .inst-content{ padding: 1.2rem 0 0; } .ins-meta i, .inst-meta i{ color: var(--blue); padding-left: 2px; font-size: 17px; } .instructor_2{ border: 1px solid var(--dc); padding: 20px; border-radius: 10px; margin-bottom: 30px; } .inst-img{ position: relative; } .inst-img, .inst-img:before, .inst-img img{ border-radius: 5px; } /* End Instructors */ /* Start Counter Up */ .counter-up { background-size: cover; color: var(--white); background-position: left bottom; background-repeat: no-repeat; background-color: var(--blue); padding: 100px 0 70px; } .counter-item{ border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px; padding: 2rem; margin-bottom: calc(3rem * .5); } .counter-item i { font-size: 50px; margin-bottom: 23px; float: right; margin-left: 19px; } .counter-item svg{ width: 50px; margin-bottom: 23px; float: right; margin-left: 19px; } .counter-item svg path{ fill: var(--white); } .counter-item h4 { color: var(--white); font-size: 30px; margin-bottom: 7px; line-height: 23px; } .counter-item p{ margin-bottom: 0; } /* End Counter Up */ /* Start Events */ .event-item { padding: 1.7rem 1.5rem 1.5rem; border: 1px solid var(--dc); border-radius: 10px; margin-bottom: 30px; position: relative; overflow: hidden; text-align: center; } .event-item:last-child{ margin-bottom: 0; } .event-item h4{ font-size: 20px; margin-bottom: 12px; } .event-item img{ position: absolute; top: -100%; left: -100%; } .ev-content{ } .event-item a svg{ width: 20px; } .event-item .day { width: 55px; height: 55px; line-height: 55px; background: var(--blue); color: var(--white); border-radius: 50%; display: inline-block; position: relative; box-shadow: -4px 5px 20px rgba(103, 76, 237, .4); font-weight: 600; font-size: 18px; } .event-item .day::after { position: absolute; content: ''; width: 65px; height: 65px; background: rgba(103, 76, 237, .1); right: -5px; top: -5px; border-radius: 50%; z-index: -1; } .event-item .myear{ display: block; font-size: 16px; font-weight: 500; margin-top: 13px; } .evlb, .evrb{ position: relative; } .evlb:after, .evrb:after{ background: var(--dc); width: 1px; height: 90px; position: absolute; top: 0; content: ''; } .evlb:after{ left: 0; } .evrb:after{ right: 0; } .evlr:after{ } .evtime-loc{ } .evtime-loc i{ padding-left: 3px; color: var(--yellow); } .evtime-loc span{ margin-left: 16px; font-size: 16px; } .evtime-loc span:last-child{ margin-left: 0; } .ev-btn{ font-weight: 600; font-size: 16px; color: var(--body); display: block; line-height: 90px; } .event-item .ev-btn svg { width: 25px; margin-right: 6px; } .event-item .ev-btn svg path{ fill: var(--body); } .ev-btn:hover svg path{ fill: var(--blue); } .ev-video{ position: relative; } .ev-video img{ border-radius: 10px; width: 100%; } .ev-video::before { position: absolute; content: ""; right: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); border-radius: 10px; } .evideo-btn { position: absolute; width: 70px; height: 70px; background: var(--pink); border-radius: 50%; top: 50%; right: 50%; transform: translate(50%, -50%); text-align: center; line-height: 75px; transition: .5s; color: var(--white); } .evideo-btn i { font-size: 25px; display: inline-block; } .evideo-btn:hover, .evideo-btn:focus{ color: var(--white); } .evideo-btn::after, .evideo-btn::before { content: ''; display: block; position: absolute; top: 0; left: 0; z-index: -1; bottom: 0; right: 0; border-radius: 100%; background: rgba(225,225,225,0.1); } .evideo-btn::after{ -webkit-animation: ripple 3s linear 1s infinite; animation: ripple 3s linear 1s infinite; } .evideo-btn::before{ -webkit-animation: ripple 3s linear infinite; animation: ripple 3s linear infinite; } .color-2 .day{ background: var(--pink); } .color-2 .day:after{ background: rgba(237, 47, 115, .2); } .color-3 .day{ background: var(--green); } .color-3 .day:after{ background: rgba(125, 190, 72, .2); } @-webkit-keyframes ripple { 0% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1.75); transform: scale(1.75); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes ripple { 0% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1.75); transform: scale(1.75); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } /* End Events */ /* Start Blog */ .blog-item{ padding: 1.6rem; border-radius: 15px; margin-bottom: 30px; box-shadow: var(--box-shadow); transition: .5s; } .blog-item:hover{ transform: var(--Y5); } .blog-image{ position: relative; } .blog-image img{ border-radius: 10px; } .bl-category { position: absolute; right: -50px; top: 45%; transform: rotate(90deg); } .bl-category a { padding: 4px 20px; font-weight: 500; border-radius: 4px; background: var(--yellow); color: var(--white); display: inline-block; font-size: 15px; } .blog-meta{ margin-top: 1.5rem; margin-bottom: .7rem; } .blog-meta span{ position: relative; grid-column: auto/span 6; } .blog-meta span i{ color: var(--blue); padding-left: 5px; } .blog-meta span::after { content: ''; position: absolute; left: 1px; top: 7px; width: 1px; height: 13px; background: var(--body); margin-left: -14px; } .blog-meta span:last-child:after{ display: none; } .blog-meta span:last-child{ text-align: left; } .blog-content h2 { font-size: 20px; line-height: 29px; margin-bottom: 12px; } .blog-btn, .blog-btn:hover, .blog-btn:focus{ color: var(--blue); text-decoration: underline; } .blog-btn svg{ width: 25px; } .standard-blog .blog-meta span::after{ display: none; } /* End Blog */ /*------------------------------- # Sidebar --------------------------------*/ .search-control{ height: 56px; line-height: 45px; padding: 5px 20px; border-radius: 30px; border: 1px solid #D9D9D9; width: 100%; transition: .5s; } .search-control:focus{ border-color: var(--blue); outline: none; } .form-control{ background-color: var(--white); border: 1px solid #e5e5e5; color: #555; font-size: 15px; height: 50px; outline: 0; padding: 14px 30px; width: 100%; margin-bottom: 25px; } .form-control option{ font-weight: 400; } .form-control:focus{ outline: none; box-shadow: inherit; border-color: var(--blue); background: var(--white); } textarea.form-control{ height: 160px; } .widget.search-widget{ border: unset; padding: 0; } .search-form{ position: relative; } .search-form button { position: absolute; width: 56px; height: 56px; line-height: 56px; border-radius: 50%; border: 1px solid var(--blue); background: var(--blue); color: var(--white); left: 0; top: 0; transition: .5s; } .search-form button:hover, .search-form button:focus{ background-color: var(--pink); border-color: var(--pink); } .widget{ margin-bottom: 30px; padding: 30px; border: 1px solid #E9EEF4; border-radius: 4px; } .widget-title{ margin-bottom: 25px; font-size: 25px; } .widget ul{ list-style-type: none; } .widget.category-widget li { line-height: 40px; position: relative; padding-right: 24px; font-size: 17px; font-weight: 500; } .category-widget li::before { content: "\f15c"; position: absolute; width: 15px; height: 15px; color: var(--blue); border-radius: 50%; right: 0; top: 0px; font-family: "Font Awesome 6 Free"; font-size: 18px; } .popular-posts-widget{ } .popular-posts-widget li{ display: block; margin-bottom: 22px; overflow: hidden; } .popular-posts-widget li:last-child{ margin-bottom: 0; } .popular-posts-widget h4{ transition: .5s; } .popular-posts-widget a{ display: block; transition: .5s; } .popular-posts-widget a:hover h4, .popular-posts-widget a:focus h4{ color: var(--blue); } .popular-posts-widget img{ max-width: 100%; } .ppimage{ width: 100px; margin-left: 15px; } .ppimage img{ border-radius: 10px; } .ppcontent{ overflow: hidden; } .ppcontent h4{ font-size: 18px; margin-top: 0px; margin-bottom: 1px; line-height: 25px; } .ppcontent span { position: relative; padding-right: 19px; font-size: 16px; color: var(--pink); } .ppcontent span::before { content: ''; position: absolute; right: 0; top: 10px; width: 12px; height: 1px; background: var(--pink); display: block; } .tags_clouds a { display: inline-block; position: relative; margin-left: 10px; font-weight: 500; padding: 4px 15px; background: var(--f6); margin-bottom: 13px; border-radius: 4px; transition: .5s; } .tags_clouds a:hover, .tags_clouds a:focus{ background: var(--blue); color: var(--white); } /* Start Blog Details */ .post-image{ margin-bottom: 30px; } .post-nav.pnavigation{ margin-top: 40px; text-align: center; } .post-nav.pnavigation a { display: inline-block; background: var(--blue); color: var(--white); padding: 8px 22px; font-weight: 600; border-radius: 4px; transition: .5s; margin: 0 15px; } .post-nav.pnavigation a:hover, .post-nav.pnavigation a:focus{ background: var(--pink); color: var(--white); } /* End Blog Details */ /* Start CTA */ .p-80{ padding: 80px; } .cta-area{ border-radius: 15px; color: var(--white); padding: 50px; background-size: cover; background-position: bottom center; position: relative; } .cta-img { position: absolute; top: 4px; left: 24px; width: 260px; animation: zumpBottom 4s linear infinite; } .cta-area h2 { font-size: 30px; color: var(--white); margin-bottom: 20px; line-height: 38px; } .cta-area h2 span{ font-weight: 400; } .cta-area p{ margin-bottom: 25px; font-size: 18px; } /* End CTA */ /* Start Subscription */ .subscription{ border-radius: 15px; color: var(--white); padding: 50px; background-size: cover; background-position: bottom center; height: 370px; } .subscription h2{ font-size: 30px; color: var(--white); margin-bottom: 20px; line-height: 38px; } .subscription p{ margin-bottom: 30px; font-size: 18px; } .subsc-form{ position: relative; } .subsc-form input[type="email"] { background: var(--white); border-radius: 30px; height: 60px; line-height: 60px; border: 1px solid var(--white); padding: 10px 28px; } .subsc-form button { background: var(--yellow); border: 1px solid var(--yellow); width: 50px; height: 50px; border-radius: 50%; position: absolute; left: 7px; top: 5px; } .subsc-form button i{ width: 30px; } /* End Subscription */ /* Start Footer */ .footer{ background: var(--footer); color: var(--ba); padding:100px 0 0px; position: relative; } .footer h1, .footer h2, .footer h3, .footer h4, .footer h5{ color: var(--white); } .footer a{ color: var(--ba); transition: .5s; } .footer a:hover, .footer a:focus{ color: var(--white); } .footer ul{ list-style-type: none; } .footer-widget{ padding-right: 60px; position: relative; } .footer .col-lg-3:first-child .footer-widget{ padding-left: 20px; } .footer .col-lg-3:first-child .footer-widget::before { display: none; } .footer-widget::before { width: 1px; height: 260px; background: rgba(255,255,255, 0.06); content: ''; position: absolute; right: 0; top: 0; } .footer .footer-widget.about-widget{ padding-right: 0; } .ftitle{ font-size: 22px; margin-bottom: 20px; } .footer-widget li{ line-height: 36px } .fsocial-option { margin-top: 0px; } .fsocial_label{ text-decoration: underline; font-weight: 600; display: block; } .fsocial-option li{ margin-top: 13px; margin-left: 10px; } .fsocial-option a { width: 35px; height: 35px; line-height: 35px; display: block; background: var(--blue); text-align: center; color: var(--white); font-size: 14px; transition: .5s; border-radius: 50%; } .about-widget img{ margin-bottom: 20px; width: 160px; } .fcontact-info { margin-bottom: 5px; } .fcontact-info span { float: right; padding-left: 18px; } .fcontact-info p { overflow: hidden; margin-bottom: 0; line-height: 28px; } .fcontact-info li{ margin-bottom: 15px; } .fcontact-info li i { font-size: 20px; padding-top: 6px; } .fsocial-option li{ display: inline-block; } .copyright { margin-top: 60px; padding: 20px 0; border-top: 1px solid rgba(255,255,255, 0.06); } .copyright p{ margin-bottom: 0; color: var(--ba); } .fsocial-option .fb:hover{ background: #1877F2; } .fsocial-option .tw:hover{ background: #14171A; } .fsocial-option .lin:hover{ background: #0A66C2; } .fsocial-option .yt:hover{ background: #FF0000; } .fsocial-option a:hover, .fsocial-option a:focus{ color: var(--white); } .fot-cap, .fot-lamp, .fot-shap{ position: absolute; opacity: .5; } .fot-cap { width: 70px; top: 12%; left: 5%; animation: zumpBottom 4s linear infinite; opacity: .4; } .fot-lamp { width: 55px; bottom: 33%; right: 1%; animation: zumpBottom 4s linear infinite; } .fot-shap { left: 32%; bottom: 16%; width: 82px; } /* End Footer */ /*------------------------------- # Banner --------------------------------*/ .main-banner { position: relative; color: var(--title); padding: 110px 0; z-index: 1; background-size: cover; background-repeat: no-repeat; overflow: hidden; } .main-banner h2{ color: var(--title); margin-bottom: 20px; } .main-banner p { color: var(--white); background: var(--yellow); display: inline-block; padding: 5px 20px; border-radius: 30px; margin-bottom: 0; font-weight: 500; } .main-banner a{ color: var(--white); } .main-banner i { position: relative; top: 2px; } .blshape { position: absolute; right: 5%; top: 24%; width: 60px; animation: zump 4s linear infinite; } .brshape { position: absolute; left: 100px; bottom: 64px; width: 50px; animation: zump 4s linear infinite; } .bbig_shape { width: 230px; height: 230px; background: rgba(103, 76, 239, .04); position: absolute; left: 2%; bottom: 5%; -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); mask-repeat: repeat; mask-position-x: 0%; mask-position-y: 0%; mask-size: auto; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: auto; mask-size: auto; animation: zump 3s linear infinite; } /* Course Page */ .course_top{ margin-bottom: 15px; } .ccount_result{ font-weight: 600; } .ccount_result{ margin-bottom: 0; } .ccount_result span{ color: var(--blue); } .csearch_form input{ border: 1px solid var(--dc); background: var(--fa); color: #555; font-size: 15px; height: 45px; line-height: 45px; outline: 0; padding: 14px 25px; width: 50%; border-radius: 30px; } .post_pagination{ margin-top: 40px; } .post_pagination ul li{ display: inline-block; } .post_pagination ul li a { width: 50px; height: 50px; line-height: 50px; border: 1px solid var(--blue); background: var(--blue); display: block; border-radius: 50%; margin: 0 10px; transition: .5s; color: var(--white); } .post_pagination ul li.active a, .post_pagination ul li a:hover, .post_pagination ul li a:focus{ background: var(--pink); border-color: var(--pink); color: var(--white); } /*------------------------------- # Course Details --------------------------------*/ .scourse_image{ position: relative; } .scourse_image img{ border-radius: 8px; } .scbtn { width: 80px; height: 80px; line-height: 74px; border: 3px dashed var(--white); border-radius: 50%; display: inline-block; position: absolute; top: 50%; right: 50%; text-align: center; transform: translate(50% , -50%); transition: .5s; z-index: 11; } .scbtn:hover, .scbtn:focus{ background-color: var(--blue); } .scbtn svg{ width: 31px; } .scbtn svg path{ fill: var(--white); } .courses-details {} .scourse-title{ font-size: 24px; margin-bottom: 25px; } .courses-details img{ max-width: 100%; } .scourse_meta{ margin-top: 30px; margin-bottom: 30px; } .scourse_meta img{ width: 70px; border-radius: 50%; margin-left: 15px; float: right; } .scourse_meta span{ font-size: 16px; } .scourse_meta p{ font-size: 17px; font-weight: 600; line-height: 25px; margin-bottom: 0; } .scourse_meta p{ color: #222; } .scourse_meta .smeta_text{ display: inline-block; } .scourse_meta .smeta{ display: inline-block; margin-left: 30px; position: relative; } .scourse_meta .smeta::after { width: 1px; height: 52px; background-color: #C9C8C8; content: ''; position: absolute; left: 0; top: 5px; } .scourse_meta .smeta{ padding-left: 40px; margin-left: 40px; } .smeta:last-child:after{ display: none; } .scourse_meta .smeta:last-child{ padding-left: 0; margin-left: 0; } .scourse_meta .rev_icons{ color: #ffb608; } .scourse_meta .rev_content{ padding-right: 5px; } .rev_content{ } .cd_tab #nav-tab{ background: var(--f9); border-bottom: 1px solid transparent; text-align: center; margin-bottom: 30px; display: block; } .cd_tab #nav-tab button{ display: inline-block; color: var(--title); font-weight: 600; margin: 0 30px; padding: 10px 29px; border-radius: 5px; outline: none; } .cd_tab #nav-tab button:hover, .cd_tab #nav-tab button:focus { border-color: var(--f9); color: #222; outline: none; } .cd_tab #nav-tab.nav-tabs button.nav-link.active{ background-color: var(--blue); border-color: var(--blue); color: var(--white); outline: none!important; } #nav-overview ul{ list-style-type: none; } #nav-overview ul li { position: relative; padding-right: 37px; line-height: 30px; } #nav-overview ul li::before { content: "\ecb6"; position: absolute; right: 0; top: 4px; font-family: boxicons !important; font-size: 25px; color: var(--blue); } .cdtitle{ margin-bottom: 15px; font-size: 20px; } .cd_curriculum h3, .cd_rating h3{ font-size: 20px; } .benefits{ background: var(--f9); overflow: hidden; padding: 30px; margin-top: 30px; } .benefits h3{ margin-bottom: 20px; font-size: 22px; } .benefits ul{ margin-right: -20px; display: block; } .benefits ul li{ width: 47%; float: right; margin-right: 20px; margin-bottom: 15px; } .cd_curriculum{ border: 1px solid var(--fa); padding: 40px; } .cd_curriculum h3{ margin-bottom: 20px; } .cd_curriculum ul{ list-style-type: none; } .cd_curriculum ul li { border-bottom: 1px solid #f1f1f1; padding-bottom: 15px; margin-bottom: 15px; font-weight: 500; } .cd_curriculum ul li i { padding-left: 5px; font-size: 21px; display: inline-block; position: relative; top: 4px; color: var(--blue); } .cd_curriculum ul li:last-child{ border-bottom: none; padding-bottom: 0px; margin-bottom: 0px; } .cd_cur_right{ float: left; font-size: 15px; } .cd_cur_right a { font-weight: 600; color: #444; background: #E5F8F8; padding: 0px 16px; display: inline-block; margin-left: 25px; font-size: 15px; border-radius: 4px; margin-left: 100px; transition: .5s; } .cd_cur_right a:hover, .cd_cur_right a:focus{ background: var(--blue); color: var(--white); } .cd_rating{} .cd_rating h3{ margin-bottom: 20px; } .cd_rating_top{ border: 1px solid #f1f1f1; padding: 35px; overflow: hidden; margin-bottom: 60px; border-radius: 8px; } .cdr_rate_summary{ float: right; width: 25%; text-align: center; } .cdr_rate_summary h1 { font-size: 65px; margin-bottom: 16px; } .cdr_rating{ color: #ffb608; } .cdr_rating i{ margin: 0 3px; } .cdr_rate_summary p{ margin-bottom: 0; } .cdr_rate_number ul{ list-style-type: none; } .cdr_rate_number{ width: 75%; float: right; } .cdr_rate_number ul li { display: flex; margin: 0 0 10px 0; } .cdr_rate_number ul li:last-child{ margin: 0; } .cdr_rate_value { flex: 1; position: relative; margin: 13px 15px 0 86px; height: 7px; background: #f2f2f2; } .rating_width{ height: 7px; background-color: #ffb608; display: block; } .cdr_rate_count { display: inline-block; position: absolute; left: -80px; text-align: left; line-height: 1; font-size: 16px; margin: -12px 0; } .cdr_rate_star { flex: 0 0 40px; text-align: center; } .rating_item_avatar{ float: right; margin-left: 30px; } .rating_item_avatar img { width: 100px; float: right; margin-left: 25px; border-radius: 50%; } .rava_conent{ overflow: hidden; } .rava_conent h3{ font-size: 22px; margin-bottom: 5px; } .rava_conent p{ margin-bottom: 0; } .rating_item_ricon{ color: #ffb608; } .rating_item{ overflow: hidden; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #f1f1f1; } .rating_item:last-child{ border-bottom: 0; } .cdr_review_form h3{ font-size: 24px; margin-bottom: 6px; } .review_form_ricon{ margin-bottom: 12px; } .review_form_ricon i{ cursor: pointer; transition: .5s; color: #222; } .review_form_ricon i:hover{ color: var(--yellow); } .rating_form textarea { border: 1px solid #f1f1f1; width: 60%; height: 120px; margin-bottom: 20px; border-radius: 5px; padding: 10px 25px; } .rating_form textarea:focus{ border-color: var(--blue); outline: none; } .cd_instructor{ display: flex; gap: 30px; } .cdin_image { width: 300px; text-align: center; } .cdin_image ul { list-style-type: none; display: inline-block; margin-top: 25px; } .cdin_image ul li { display: inline-block; margin: 0 5px; } .cdin_image ul li a { width: 35px; height: 35px; line-height: 38px; background: var(--blue); color: var(--white); transition: .5s; border-radius: 4px; display: block; font-size: 20px; } .cdin_image ul li a:hover, .cdin_image ul li a:focus{ background: var(--yellow); color: var(--white); } .cdin_content{ padding-top: 20px; } .cdin_content h4 a{ color: #222; } .cdin_content span { color: var(--body); margin-bottom: 8px; display: block; font-weight: 500; } .cdin_meta { font-weight: 500; color: #444; display: flex; gap: 25px; border-top: 1px solid var(--dc); padding-top: 14px; margin-top: 15px; } .cdin_meta_item i{ color: var(--yellow); } .course-sidebar{ border: 1px solid var(--fa); box-shadow: var(--shadow-2); padding: 25px; border-radius: 5px; position: -webkit-sticky; /* For Safari */ position: sticky; top: 0; margin-right: 40px; } .course-sidebar .cd-video{ } .course-sidebar .cd-video iframe{ width: 100%; border-radius: 5px; height: 220px; } .course-sidebar .bg-btn{ width: 100%; text-align: center; } .course-sidebar .bg-btn i{ } .course-sidebar h3{ margin-bottom: 20px; font-size: 24px; } .course-sidebar .scourse_list li { width: 100%; float: right; border-bottom: 1px solid #f1f1f1; padding-bottom: 15px; margin-bottom: 15px; } .cside-label{ float: right; font-weight: 600; color: var(--title); } .cside-value{ float: left; font-weight: 600; } .course-sidebar ul{ list-style-type: none; overflow: hidden; } .cd_price { text-align: right; font-weight: 600; font-size: 25px; color: var(--title); } .cd_price span{ color: var(--blue); } .cd_btn { display: inline-block; padding: 10px 35px; border-radius: 30px; background-color: var(--blue); border: 1px solid var(--blue); color: var(--white); font-weight: 600; font-size: 17px; transition: .5s; } .cd_btn:hover, .cd_btn:focus{ background-color: #002935; border-color: 1px solid #002935; color: var(--white); box-shadow:0; } .cd_social { margin-top: 0; text-align: right; } .cd_social span{ display: inline-block; margin-left: 8px; color: var(--title); font-weight: 500; } .cd_social ul{ position: relative; top: 10px; } .cd_social ul, .cd_social li{ display: inline-block; } .cd_social li{ margin: 0 3px; } .cd_social li a{ width: 35px; height: 35px; line-height: 35px; font-size: 15px; color: var(--body); border: 1px solid var(--body); display: block; text-align: center; border-radius: 50%; transition: .5s; } .cd_social li a:hover, .cd_social li a:focus{ background: var(--yellow); border-color: var(--yellow); color: var(--title); } .cd_social li i{ } .scourse_list i{ color: var(--blue); margin-left: 5px; } .related-courses{ padding-top: 80px; } .created-title { margin-bottom: 15px; font-size: 25px; } /* * ---------------------------------------------------------------------------------------- * Shopping Cart * ---------------------------------------------------------------------------------------- */ .table.shopping-summery { background: var(--white); border: 1px solid #eee; -webkit-border-radius:0; border-radius: 0; overflow:hidden; margin-bottom: 0; } .shopping-cart { background: var(--white); } .shopping-summery thead .main-hading{ padding:0px 50px; } .shopping-summery thead { } .shopping-summery thead tr th { border: none; font-weight: 600; text-align: right; padding: 20px; } .shopping-summery tbody tr { border-bottom: 1px solid #eee; margin-top: 20px; } .shopping-summery tbody tr img { border-radius: 4px; width: 100px; } .shopping-summery tbody tr:last-child{ } .shopping-summery tbody .product-name a { font-weight: 600; color: #282828; font-weight: 600; font-size: 17px; } a.pthumb{ width: 75px; display: inline-block; } .shopping-cart .table p { font-size: 14px; color: #666; } .shopping-summery tbody .product-name a:hover{ color:var(--blue); } .shopping-summery tbody .product img { max-width: 70px; border-radius: 100%; max-height: 65px; border: 1px solid #e6e6e6; padding: 4px; } .shopping-summery tbody .product:hover img{ border-color:var(--blue); -webkit-transform:rotate(-360deg); -moz-transform:rotate(-360deg); transform:rotate(-360deg); } .shopping-cart .border{ } .shopping-cart .table .remove-icon{ font-size:16px; } .shopping-cart .table td { vertical-align: middle; border-top: 1px solid #eee; padding: 20px; } .shopping-summery tbody .price { text-align: center; font-weight: 600; } .shopping-summery tbody .price span{} .shopping-cart tbody .qty .input-group { width: 175px; display: inline-block; } .shopping-cart .qty .button { display: inline-block; position: absolute; top: 0; } .shopping-cart .qty .button.minus{ right:0; border-radius:0; overflow:hidden; } .shopping-cart .qty .button.plus { left: 0; border-radius:0; overflow:hidden; } .shopping-cart .qty .button .btn { padding: 0; width: 44px; height: 47px; line-height: 50px; border-radius: 0px; background: transparent; color: #282828; border: none; font-size: 12px; } .shopping-cart .qty .button .btn:hover{ color:var(--blue); } .shopping-cart .qty .input-number { border: 1px solid #eceded; width: 100%; text-align: center; height: 47px; border-radius:0; overflow: hidden; padding: 0px 45px; } .shopping-summery tbody .total-amount { text-align: center; } .shopping-summery tbody .total-amount span{} .shopping-summery tbody .action { text-align: center; } .shopping-summery tbody .action a:hover{ color:var(--blue); } .shopping-cart .total-amount{ margin-top:50px; } .woocommerce-cart-form .actions .bottom-cart { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .woocommerce-cart-form .actions .coupon { flex: 0 0 80%; display: flex; } .woocommerce-cart-form .product-name { display: inline-block; margin-right: 24px; } #coupon_code { border: 1px solid #eee; padding: 5px 15px; font-size: 16px; border-radius: 0 4px 4px 0; } #coupon_code:focus{ border-color: var(--blue); outline: none; } .woocommerce-cart-form .coupon button, .woocommerce-cart-form .coupon input[type="submit"]{ background: var(--blue); border: 1px solid var(--blue); color: var(--white); padding: 8px 25px; border-radius: 4px 0 0 4px; font-weight: 600; transition: .5s; } .woocommerce-cart-form .coupon button:hover, .woocommerce-cart-form .coupon button:focus, .woocommerce-cart-form .coupon input[type="submit"]:hover, .woocommerce-cart-form .coupon input[type="submit"]:focus{ border-color: var(--pink); background: var(--pink); } .btn_border { border: 2px solid #002935; color: #222; padding: 8px 25px; font-weight: 600; border-radius: 4px; transition: .5s; } .btn_border:hover, .btn_border:focus{ background: var(--blue); border-color: var(--blue); color: var(--white); } .cart-collaterals { padding: 30px; box-shadow: var(--shadow-2); } .cart-collaterals h2 { font-size: 24px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #eee; } .cart-collaterals .shop_table_responsive > div { display: flex; padding: 15px 30px; align-items: center; } .cart-collaterals .shop_table_responsive > div > * { flex: 1; } .cart-collaterals .bt{ text-align: center; } .shop_table .amount, .shop_table .woocommerce-shipping-destination{ color: #222; } .cart-subtotal .amount{ font-weight: 600; } /* * ---------------------------------------------------------------------------------------- * Start Checkout Page * ---------------------------------------------------------------------------------------- */ .shop.checkout { background: var(--white); } .shop.checkout .checkout-form h2{ margin-bottom: 40px; font-size: 24px; } .shop.checkout .checkout-form h2 { font-size: 25px; color: #333; font-weight: 700; line-height: 27px; } .shop.checkout .checkout-form p { font-size: 16px; color: #333; font-weight: 400; margin-top: 12px; margin-bottom: 30px; } .shop.checkout .form{} .shop.checkout .form .form-group { margin-bottom: 25px; } .shop.checkout .form .form-group label, .register label, .login label{ color:var(--33); position:relative; cursor: pointer; } .register label span, .login label span, .shop.checkout .form .form-group label span { color: #ff2c18; display: inline-block; position: absolute; left: -12px; top: 4px; font-size: 16px; } .shop.checkout .form .form-group input { background-color: var(--white); border: 1px solid #e5e5e5; color: #555; font-size: 15px; height: 50px; outline: 0; padding: 14px 30px; width: 100%; margin-bottom: 25px; border-radius: var(--bs-border-radius); } .shop.checkout .form .form-group input:focus{ outline: none; border-color: var(--blue); } .shop.checkout .nice-select { width: 100%; height: 50px; line-height: 50px; margin-bottom: 25px; background-color: var(--white); border: 1px solid #e5e5e5; border-radius: var(--bs-border-radius); } .shop.checkout .nice-select .list { width: 100%; height: 300px; overflow: scroll; } .shop.checkout .nice-select .list li{} .shop.checkout .nice-select .list li.option{ color:#333; } .shop.checkout .nice-select .list li.option:hover{ background:#F6F7FB; color:#333; } .shop.checkout .form .address input { margin-bottom: 15px; } .shop.checkout .form .address input:last-child{ margin:0; } .shop.checkout .form .create-account { margin: 0; } .shop.checkout .form .create-account input { width: auto; display: inline-block; height: auto; border-radius: 100%; margin-left: 3px; } .shop.checkout .form .create-account label { display: inline-block; margin: 0; } .shop.checkout .order-details { margin-top: 30px; background: var(--white); padding: 40px 0 50px 0; box-shadow: var(--shadow-2); } .shop.checkout .single-widget { margin-bottom: 30px; } .shop.checkout .single-widget:last-child{ margin:0; } .shop.checkout .single-widget h2 { position:relative; font-size: 24px; font-weight: 600; padding: 10px 30px 0; text-transform: capitalize; color: #222; } .shop.checkout .single-widget .content ul{ margin-top:30px; } .shop.checkout .single-widget .content ul li { display: block; padding: 0px 30px; font-weight: 500; margin-bottom: 12px; } .shop.checkout .single-widget .content ul li span{ display:inline-block; float:left; } .shop.checkout .single-widget .content ul li.last { padding-top: 12px; border-top: 1px solid #ebebeb; display: block; font-weight: 600; color: var(--title); } .shop.checkout .single-widget .checkbox { text-align: right; margin: 0; padding: 0px 30px; margin-top:30px; } .shop.checkout .single-widget .checkbox input{ margin-top: 9px; } .shop.checkout .single-widget .checkbox .form-check { margin-bottom: 14px; background: var(--fa); width: auto; display: block; padding: 8px 15px 6px; overflow: hidden; border-radius: 4px; } .shop.checkout .single-widget .checkbox label { color: #555555; position: relative; margin-top: -5px; font-weight: 500; display: block; margin-bottom: 15px; margin-left: 27px; } .payment-methods .checkbox input { margin-top: 3px!important; margin-right: 0; } .payment-methods .form-check-input:checked { background-color: var(--blue); border-color: var(--blue); } .shop.checkout .single-widget .checkbox label:last-child{ margin-bottom:0; } .shop.checkout .single-widget .checkbox label:hover{ cursor:pointer; } .shop.checkout .single-widget .checkbox label input { margin-left: 5px; display: inline-block; } .shop.checkout .single-widget.get-button { text-align: center; padding: 0px 35px; } .shop.checkout .single-widget .bg_btn{ display: block; } /* * ---------------------------------------------------------------------------------------- * End Checkout Page * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * Comment * ---------------------------------------------------------------------------------------- */ .comments{ padding-top: 40px; } .bdtitle{ margin-bottom: 25px; font-size: 24px; } .comment-list, .comment{ list-style-type: none; } .com-img { margin-left: 48px; position: relative; } .com-img h4 { font-size: 18px; margin-top: 15px; margin-bottom: 0; } .cdate{ font-size: 15px; } .creplay { position: absolute; top: 50px; left: -13px; width: 35px; height: 35px; line-height: 35px; border-radius: 50%; color: var(--white); background: var(--blue); font-size: 20px; text-align: center; } .creplay:hover, .creplay:focus{ color: var(--white); } .com-img img{ border-radius: 50%; width: 100px; } li.comment{ display: block; } .comments .children{ padding-right: 30px; } .single-comment{ overflow: hidden; border: 1px solid #d9d9d9; padding: 35px; border-radius: 8px; margin-bottom: 20px; } .comment-form{ padding-top: 30px; } .comment-form .form-control{ } .comment-form label{ padding-bottom: 5px; cursor: pointer; } .name_email{ gap: 25px; } .comment-form p{ margin-bottom: 25px; } .name_email p{ width: 50%; margin-bottom: 0; } #submit { background-color: var(--blue); border: 1px solid var(--blue); color: var(--white); padding: 10px 35px; border-radius: 30px; transition: .5s; font-weight: 600; font-size: 17px; } #submit:hover, #submit:focus{ color: var(--white); background-color: var(--yellow); border-color: var(--yellow); } /* * ---------------------------------------------------------------------------------------- * Login Register * ---------------------------------------------------------------------------------------- */ .login, .register { background: var(--white); -webkit-box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08); box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08); overflow: hidden; padding: 30px 40px; border: 1px solid var(--fa); border-radius: 8px; } .login_register_title { margin-bottom: 20px; text-align: right; text-transform: capitalize; font-size: 25px; color: var(--title); margin-top: 15px; } .login input:focus{-webkit-box-shadow: none;box-shadow: none;outline:none;} .login input[type="text"], .login input[type="email"], .login input[type="password"], .register input[type="text"], .register input[type="email"], .register input[type="password"] { padding: 15px; } .login label, .register label{ cursor: pointer; color: var(--title); } #rpaword{ margin-top: 6px; } .login label { margin-bottom: 5px; font-weight: 500; } .register label { margin-bottom: 5px; font-weight: 500; } .login button, .register button{ width: 100%; } .login button i, .register button i{ padding-right: 5px; } .login p, .register p { color: #232434; font-weight: 600; text-align: center; margin-top: 15px; } .login p a, .register p a{color: var(--blue);} /* * ---------------------------------------------------------------------------------------- * 404 * ---------------------------------------------------------------------------------------- */ .page_not_found h2 { font-size: 35px; margin-bottom: 15px; } .page_not_found p{ margin-bottom: 25px; } .page_not_found .bg-btn i{ padding-left: 5px; } .page_not_found img { margin-bottom: 40px; width: 600px; display: inline-block; height: auto; } /* Contact Us */ .contact_content{ } .contact-img img{ border-radius: 15px; } .bbottom{ border-bottom: 1px solid var(--ba); padding-bottom: 15px; margin-bottom: 15px; } .bright{ position: relative; margin-left: 10px; } .bright::after { position: absolute; content: ''; left: -14px; top: -5px; height: 100%; width: 1px; background: var(--ba); } .cont-icon { position: absolute; top: -71px; right: -91px; width: 183px; animation: moveHorizontal 3s linear infinite; } .contact_info { margin-left: 30px; margin-top: -130px; margin-right: -60px; box-shadow: var(--shadow-2); background: var(--nblue); padding: 25px 25px 20px; border-radius: 8px; } .contact_list{ display: flex; gap: 20px; } .contact_list h4{ font-size: 20px; margin-bottom: 5px; } .contact_list h4, .contact_list p, .contact_list p a{ color: var(--white); } .cicon { width: 50px; height: 50px; background: var(--white); display: inline-block; text-align: center; line-height: 53px; border-radius: 50%; font-size: 29px; transition: .5s; color: var(--pink); } .contact_list:hover .cicon{ background: var(--blue); color: var(--white); } .contact_list p{ margin-bottom: 10px; } .google_map {} .google_map iframe{ width: 100%; margin-bottom: -50px; } /*------------------------------- # FAQ --------------------------------*/ .accordion-item:first-of-type > .accordion-header .accordion-button{ border-radius: 10px 10px 0 0; } .accordion-item:first-of-type > .accordion-header .accordion-button.collapsed{ border-radius: 10px; } .accordion-item{ margin-bottom: 30px; border: none; color: var(--body); border: none; border-radius: 10px; box-shadow: var(--shadow-3); } .accordion-item:last-child{ margin-bottom: 0px; } .accordion-item .accordion-body { padding: 25px; } .accordion-button, .accordion-button.collapsed { font-size: 18px; font-weight: 600; color: var(--title); padding: 7px 20px; border-radius: 10px; } .accordion-collapse.collapse.show{ } .accordion-button:not(.collapsed) { background: var(--blue); border: 1px solid var(--blue) !important; box-shadow: inherit; color: var(--white); border-radius: 10px 10px 0 0; } .accordion-button::after{ color: var(--white); background: none; content: "\ebc0"; font-family: boxicons !important; line-height: 19px; width: 40px; height: 40px; font-size: 18px; background: var(--blue); line-height: 40px; text-align: center; border-radius: 50%; } .accordion-button:not(.collapsed)::after { color: var(--title); background: none; content: "\eb8b"; font-family: boxicons !important; line-height: 19px; width: 40px; height: 40px; font-size: 18px; background: var(--white); line-height: 40px; text-align: center; border-radius: 50%; } .accordion-button:focus{ outline: none; box-shadow: none; } .faq-image{ position: relative; } .faq-image:after{ position: absolute; content: ""; right: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); border-radius: 10px; } .faq-image img{ max-width: 100%; border-radius: 8px; } /* #Back To Top ================================================== */ .progress-wrap { position: fixed; left: 50px; bottom: 50px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px); -webkit-transition: all 200ms linear; transition: all 200ms linear; } .progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0); } .progress-wrap::after { position: absolute; font-family: boxicons !important; content: '\ec5d'; text-align: center; line-height: 49px; font-size: 25px; color: var(--yellow); right: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 1; transition: .5s; } .progress-wrap:hover::after { opacity: 0; } .progress-wrap::before { position: absolute; font-family: boxicons !important; content: '\ec5d'; text-align: center; line-height: 49px; font-size: 25px; opacity: 0; background-image: linear-gradient(-298deg, var(--yellow), var(--yellow)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; right: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 2; transition: .5s; } .progress-wrap:hover::before { opacity: 1; } .progress-wrap svg path { fill: none; } .progress-wrap svg.progress-circle path { stroke: var(--yellow); stroke-width: 4; box-sizing:border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear; } /* Mobile Menu */ .offcanvas__info { background: var(--white) none repeat scroll 100% 0; border-right: 2px solid var(--p2-clr); position: fixed; left: 0; top: 0; width: 400px; height: 100%; -webkit-transform: translateX(calc(-1*(100% + 80px))); -moz-transform: translateX(calc(-1*(100% + 80px))); -ms-transform: translateX(calc(-1*(100% + 80px))); -o-transform: translateX(calc(-1*(100% + 80px))); transform: translateX(calc(-1*(100% + 80px))); -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; z-index: 99999; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } .offcanvas__info::-webkit-scrollbar { display: none; } .offcanvas__info.info-open { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .offcanvas__wrapper { position: relative; height: 100%; padding: 30px 30px; } .offcanvas__top{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 20px; } .offcanvas__wrapper .offcanvas__content .text { color: var(--text); } .offcanvas__wrapper .offcanvas__content .offcanvas__close { width: 40px; height: 40px; line-height: 41px; text-align: center; border-radius: 50%; background-color: var(--blue); position: relative; z-index: 9; cursor: pointer; transition: .5s; } .offcanvas__wrapper .offcanvas__content .offcanvas__close:hover, .offcanvas__wrapper .offcanvas__content .offcanvas__close:focus{ background-color: var(--pink); } .offcanvas__close button{ border: none; background-color: transparent; padding: 0; } .offcanvas__wrapper .offcanvas__content .offcanvas__close i { color: var(--white); } .offcanvas__logo{ width: 140px; } .offcanvas__overlay { position: fixed; height: 100%; width: 100%; background: #151515; z-index: 900; top: 0; opacity: 0; visibility: hidden; left: 0; } .offcanvas__overlay.overlay-open { opacity: 0.8; visibility: visible; } @media (max-width: 450px) { .offcanvas__info { width: 300px; } } @media (max-width: 575px) { .offcanvas__wrapper { padding: 20px; } } ::-webkit-scrollbar { width: 4px; height: 4px; } .mean-container a.meanmenu-reveal { display: none; } .mean-container .mean-nav { background: none; list-style: none; margin: 0; } .mean-container .mean-bar { padding: 0; min-height: auto; background: none; } .mean-container .mean-nav > ul { padding: 0; margin: 0; width: 100%; list-style-type: none; display: block !important; } .mean-container .mean-nav > ul .homemenu-items { display: flex; align-items: center; gap: 30px; justify-content: space-between; } @media (max-width: 1199px) { .mean-container .mean-nav > ul .homemenu-items { flex-wrap: wrap; } } .mean-container .mean-nav > ul .homemenu-items .homemenu { position: relative; } @media (max-width: 1199px) { .mean-container .mean-nav > ul .homemenu-items .homemenu { max-width: 300px; text-align: center; margin: 0 auto; border: 1px solid var(--border); padding: 10px; } } .mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb { position: relative; } .mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb .demo-button { position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); width: 60%; gap: 10px; display: flex; justify-content: center; flex-direction: column; opacity: 0; visibility: hidden; transition: all 0.4s ease-in-out; margin-top: 20px; } .mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn { padding: 12px 20px; color: var(--white) !important; width: initial; font-size: 16px; text-align: center; border-radius: 0; } .mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn:hover { color: var(--white) !important; } .mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb::before { background: -webkit-gradient(linear, right top, right bottom, from(rgba(20, 19, 19, 0)), to(#5e5ef6)); background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #252527 100%); background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 100%; position: absolute; right: 0; top: 0; overflow: hidden; opacity: 0; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; content: ""; } .mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb:hover::before { visibility: visible; opacity: 1; } .mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb:hover .demo-button { opacity: 1; visibility: visible; margin-top: 0; } .mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb:hover .homemenu-btn { opacity: 1; visibility: visible; bottom: 50%; transform: translateY(50%); } .mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb img { width: 100%; } .mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-title { text-align: center; margin: 15px auto; display: inline-block; font-size: 16px; } .mean-container a.meanmenu-reveal { display: none !important; } .mean-container .mean-nav ul li a { width: 100%; padding: 10px 0; color: var(--header); font-size: 16px; line-height: 1.5; font-weight: 500; text-transform: capitalize; border-bottom: 1px solid var(--dc) !important; border: none; } .mean-container .mean-nav ul li a:hover { color: var(--p2-clr); } .mean-container .mean-nav ul li a:last-child { border-bottom: 0; } .mean-container .mean-nav ul li a:hover { color: var(--theme2); } .mean-container .mean-nav ul li a.mean-expand { margin-top: 5px; padding: 0 !important; } .mean-container .mean-nav ul li > a > i { display: none; } .mean-container .mean-nav ul li > a.mean-expand i { display: inline-block; font-size: 18px; } .mean-container .mean-nav > ul > li:first-child > a { border-top: 0; } .mean-container .mean-nav ul li a.mean-expand.mean-clicked i { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transition: all 0.4s ease-in-out; } .mean-container .mean-nav ul li .mega-menu li a { height: 200px; width: 100%; padding: 0; border-top: 0; margin-bottom: 20px; } @media (max-width: 992px) { .feature-category-panel { margin-top: -10px !important; } .home_middle_title { margin-top: 20px !important; } .book-category .category-box { height: 100px !important; } .float { bottom: 130px !important; right: 5px !important; } .mobile_view { display: flex !important; } .index_anchor { display: none !important; } .index_anchor.right { bottom: 70px !important; } .index_anchor.bottom-left { right: 0; justify-content: flex-end; bottom: 130px !important; } .new-dropdown { top: 162px !important; right: 120px !important; } .collection_bottom_nav { bottom: 120px !important; } .product_bottom_nav { bottom: 120px !important; } } .float { position: fixed; width: 60px; height: 60px; bottom: 90px; right: 15px; background-color: #0C9; color: #FFF; border-radius: 50px; text-align: center; box-shadow: 2px 2px 10px #999; } .my-float { font-size: 48px; line-height: 58px; } .new-dropdown { position: absolute; top: -9px; background-color: #ff4f4f; font-size: 10px; padding: 1px 4px; color: #fff; font-weight: 600; border-top-left-radius: 5px; border-bottom-right-radius: 5px; } .index_anchor { position: fixed; z-index: 9999999999; display: flex; } .index_anchor.right { top: 50%; transform: translateY(-50%); right: 0; flex-direction: column; justify-content: center; align-items: flex-start; } .index_anchor.left { top: 50%; transform: translateY(-50%); left: 0; flex-direction: column; justify-content: center; align-items: flex-end; } .index_anchor.bottom-right { left: 50%; right: 0; bottom: 0; } .index_anchor.bottom-left { right: 20px; justify-content: flex-end; bottom: 30px; } .contact_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, .3); z-index: 900; display: none } .contact_overlay.active { z-index: 1100 } .live_contact { margin: 10px; z-index: 900 } .live_contact.active { z-index: 1100 } .live_contact .main_button { position: relative; width: 70px; height: 70px; border-radius: 50%; -webkit-background-clip: padding-box; background-clip: padding-box; display: flex; justify-content: center; align-items: center; cursor: pointer } .live_contact .main_button:not(.active):before { z-index: -10; content: ''; position: absolute; top: -21px; left: -21px; display: block; width: 100px; height: 100px; border-radius: 50%; animation: pulse-ring 2s cubic-bezier(0.3, .6, .4, 2) infinite } .live_contact .main_button:not(.active):before { background-color: #4941a6; } @keyframes pulse-ring { 0% { transform: scale(.33) } 90%, 100% { opacity: 0 } } .live_contact .active { background: #ccc; border: 6px solid rgba(0, 0, 0, .2); -webkit-background-clip: padding-box; background-clip: padding-box } .live_contact .main_button { background: #4941a6; border: 6px solid #4941a660; } .live_contact .main_button i { font-size: 45px; color: white; text-shadow: 1px 1px 1px rgba(0, 0, 0, .1) } .live_contact .main_button span { font-size: 32px; color: white; text-shadow: 1px 1px 1px rgba(0, 0, 0, .1); display: none } .live_contact .sub_buttons_container { position: relative; top: 20px; width: 70px; display: none; opacity: 0; flex-direction: column; justify-content: flex-end; align-items: center } .live_contact .sub_buttons_container .sub_button { width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 6px; box-shadow: 1px 1px 2px rgba(0, 0, 0, .25); transition: all .5s; cursor: pointer } .live_contact .sub_buttons_container .sub_button_container { position: relative } .live_contact .sub_buttons_container .sub_button_container span { width: 100px; position: absolute; right: 60px; top: 10px; padding: 5px; background: rgba(255, 255, 255, .8); border-radius: 3px; text-align: center; opacity: 0; transition: all .5s } .live_contact .sub_buttons_container .sub_button:hover { box-shadow: 1px 1px 12px rgba(0, 0, 0, .5) } .live_contact .sub_buttons_container .sub_button:hover span { opacity: 1 } .live_contact .sub_buttons_container .sub_button i { font-size: 22px; color: white; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) } .live_contact .sub_buttons_container .sub_button { width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 6px; box-shadow: 1px 1px 2px rgba(0, 0, 0, .25); transition: all .5s; cursor: pointer; } .live_contact .sub_buttons_container .sub_button { background: #4941a6; } #global-loader { position: fixed; z-index: 99999999999; background: #FCB92C; left: 0; top: 0; right: 0; bottom: 0; height: 100%; width: 100%; margin: 0 auto; text-align: center; } .loader-img { position: absolute; right: 0; bottom: 20%; top: 20%; left: 0; margin: 0 auto; text-align: center; }