@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Comfortaa:300,400,500,600,700|Playfair+Display:400,700&display=swap"); :root { --heading-font: "Playfair Display", serif; --main-font: "Comfortaa", cursive; --heading-color: rgba(51, 62, 72, 0.9); --white: #fff; --red: #D80027; --light-red: #FC6B6B; --light-blue-1: #A2F8FF; --light-blue-2: #E9F0F4; --dark-blue-1: #0094b9; --dark-blue-2: #3c2b98; ; --dark-blue-3: #0093B9; --dark-blue-4: #0194BA; --dark-indigo: #242E50; --icon-color: #9EB6BC; --active-icon-color: #507F8B; ; --dark-grey-1: #545454; --dark-grey-2: #47515a; --dark-grey-3: #555555; --dark-grey-4: #333E48; --dark-grey-5: #707070; --dark-grey-6: #4C5358; --light-grey-1: #cccccc; --light-grey-2: #777777; --light-grey-3: #F7F7F7; --light-grey-4: #F0F0F0; --light-grey-5: #F7F9FA; } .gray-bg { background-color: var(--light-blue-2); } .white-bg { background-color: var(--white); } .padding-left-0 { padding-left: 0; } .padding-right-0 { padding-left: 0; } .gray-bg { background-color: #f8f8f8; } .padding-top-10 { padding-top: 10px; } .padding-top-20 { padding-top: 20px; } .padding-top-30 { padding-top: 30px; } .padding-top-40 { padding-top: 40px; } .padding-top-50 { padding-top: 50px; } .padding-top-60 { padding-top: 60px; } .padding-top-70 { padding-top: 70px; } .padding-top-80 { padding-top: 80px; } .padding-top-90 { padding-top: 90px; } .padding-top-95 { padding-top: 95px; } .padding-top-100 { padding-top: 100px; } .padding-top-105 { padding-top: 105px; } .padding-top-110 { padding-top: 110px; } .padding-top-115 { padding-top: 115px; } .padding-top-120 { padding-top: 120px; } .padding-bottom-10 { padding-bottom: 10px; } .padding-bottom-20 { padding-bottom: 20px; } .padding-bottom-30 { padding-bottom: 30px; } .padding-bottom-40 { padding-bottom: 40px; } .padding-bottom-50 { padding-bottom: 50px; } .padding-bottom-60 { padding-bottom: 60px; } .padding-bottom-65 { padding-bottom: 65px; } .padding-bottom-70 { padding-bottom: 70px; } .padding-bottom-80 { padding-bottom: 80px; } .padding-bottom-85 { padding-bottom: 85px; } .padding-bottom-90 { padding-bottom: 90px; } .padding-bottom-95 { padding-bottom: 95px; } .padding-bottom-100 { padding-bottom: 100px; } .padding-bottom-110 { padding-bottom: 110px; } .padding-bottom-105 { padding-bottom: 105px; } .padding-bottom-115 { padding-bottom: 115px; } .padding-bottom-120 { padding-bottom: 120px; } .padding-bottom-130 { padding-bottom: 130px; } .padding-bottom-135 { padding-bottom: 135px; } .padding-0 { padding: 0 !important; } .padding-120 { padding-top: 120px; padding-bottom: 120px; } .padding-110 { padding-top: 110px; padding-bottom: 110px; } .padding-100 { padding-top: 100px; padding-bottom: 100px; } .padding-20 { padding-top: 20px; padding-bottom: 20px; } .padding-30 { padding-top: 30px; padding-bottom: 30px; } .padding-40 { padding-top: 40px; padding-bottom: 40px; } .padding-45 { padding-top: 45px; padding-bottom: 45px; } .padding-50 { padding-top: 50px; padding-bottom: 50px; } .padding-60 { padding-top: 60px; padding-bottom: 60px; } .margin-5 { margin-top: 5%; } .padding-70 { padding-top: 70px; padding-bottom: 70px; } .padding-80 { padding-top: 80px; padding-bottom: 80px; } .padding-90 { padding-top: 90px; padding-bottom: 90px; } .padding-10 { padding-top: 10px; padding-bottom: 10px; } .margin-top-10 { margin-top: 10px; } .margin-top-20 { margin-top: 20px; } .margin-top-30 { margin-top: 30px; } .margin-top-40 { margin-top: 40px; } .margin-top-50 { margin-top: 50px; } .margin-top-55 { margin-top: 55px; } .margin-top-60 { margin-top: 60px; } .margin-top-70 { margin-top: 70px; } .margin-top-80 { margin-top: 80px; } .margin-top-90 { margin-top: 90px; } .margin-top-100 { margin-top: 100px; } .margin-bottom-0 { margin-bottom: 0px !important; } .margin-bottom-10 { margin-bottom: 10px; } .margin-bottom-15 { margin-bottom: 15px; } .margin-bottom-20 { margin-bottom: 20px; } .margin-bottom-25 { margin-bottom: 25px; } .margin-bottom-30 { margin-bottom: 30px; } .margin-bottom-40 { margin-bottom: 40px; } .margin-bottom-50 { margin-bottom: 50px; } .margin-bottom-55 { margin-bottom: 55px; } .margin-bottom-60 { margin-bottom: 60px; } .margin-bottom-70 { margin-bottom: 70px; } .margin-bottom-80 { margin-bottom: 80px; } .margin-bottom-90 { margin-bottom: 90px; } .margin-top-100 { margin-bottom: 100px; } .margin-top-120 { margin-top: 120px; } .min-height-600 { min-height: 600px; } * { margin: 0; padding: 0; } body { overflow-x: hidden; } h1, h2 { font-family: "Playfair Display", serif; font-weight: 700; } h1 { font-size: 52px; color: var(--heading-color); } h2 { font-size: 40px; color: var(--heading-color); } h3 { font-family: var(--main-font); color: var(--heading-color); font-size: 24px; font-weight: 700; } h4 { font-family: var(--main-font); font-size: 20px; font-weight: 600; } h5 { font-size: 16px; font-family: var(--main-font); font-weight: 500; } h6 { font-size: 14px; font-weight: 400; font-family: var(--main-font); color: var(--light-grey-2); } a:hover { color: var(--dark-blue-3); } li { list-style-type: none; } p, li { font-family: var(--main-font); color: var(--light-grey-2); font-size: 15px; font-weight: 400; line-height: 1.6; margin-bottom: 0.5rem; } a { font-weight: 500; font-size: 15px; color: var(--dark-grey); font-family: var(--main-font); -webkit-transition: all 0.3s; transition: all 0.3s; display: inline-block; text-decoration: none; cursor: pointer; } a:hover { text-decoration: none; } i { color: var(--icon-color); margin: 0.75rem; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; } i:hover { color: var(--active-icon-color); opacity: 1; } span { font-family: var(--main-font); } .container { width: 100%; margin: 0 auto; max-width: 1280px; } .container-fluid { width: 100%; max-width: 1920px; padding: 0 50px; } .section { margin: 0; } .page-heading { font-size: 5.5rem; display: inline-block; } .date { letter-spacing: 1px; text-transform: uppercase; } .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .margin-bottom-0 { margin-bottom: 0 !important; } .margin-top-0 { margin-top: 0 !important; } .margin-top-80 { margin-top: 80px !important; } .rotated-text-2 { transform: rotate(-90deg); font-size: 32px; color: var(--icon-color); } .bg-dark-grey-4 { background-color: var(--dark-grey-4); } .main-font { font-family: var(--main-font) !important; } .heading-font { font-family: var(--heading-font) !important; } .com-regular { font-weight: 400; } .com-medium { font-weight: 500; } .com-bold { font-weight: 700; } .play-bold { font-weight: 700; } .mark { background-color: rgba(108, 194, 216, 0.5); } .cross-out { text-decoration: line-through; color: var(--icon-color); } .underlined-text { display: inline-block; border-bottom: 1px solid var(--active-icon-color); } .bold-text { font-weight: 700; } .italic-text { font-style: italic; } .p-heading { display: inline-block; font-size: 28px; line-height: 70px; initial-letter: 2; } .p-wfll:first-letter { font-size: 30px; line-height: 1; float: left; font-weight: 700; padding: 8px 5px 0 0; } .col-indigo { color: var(--dark-indigo); } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75); } 70% { -webkit-box-shadow: 0 0 0 12px rgba(204, 169, 44, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75); } 70% { -moz-box-shadow: 0 0 0 12px rgba(204, 169, 44, 0); box-shadow: 0 0 0 12px rgba(204, 169, 44, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0); box-shadow: 0 0 0 0 rgba(204, 169, 44, 0); } } @keyframes pulse2 { 0% { -moz-box-shadow: 0 0 0 0 rgba(158, 182, 188, 0.3); box-shadow: 0 0 0 0 rgba(158, 182, 188, 0.3); } 70% { -moz-box-shadow: 0 0 0 12px rgba(204, 169, 44, 0); box-shadow: 0 0 0 12px rgba(204, 169, 44, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75); } } @keyframes scroll { 25% { opacity: 1; } 33% { opacity: 1; transform: translateY(30px); } 67% { opacity: 1; transform: translateY(40px); } 100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); } } @-webkit-keyframes checkboxSlideUp { 0% { -webkit-transform: translateY(1rem); transform: translateY(1rem); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes checkboxSlideUp { 0% { -webkit-transform: translateY(1rem); transform: translateY(1rem); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .section-divider { width: 90%; max-width: 1440px; height: 1px; background-color: var(--light-grey-4); margin: 3rem auto; } .carousel-indicator .indicator { height: 20px; width: 3px; margin: 5px 0; background-color: var(--icon-color); } .carousel-indicator .indicator+.active { height: 50px; background-color: var(--active-icon-color); } .indicator-style-2 { width: 220px; color: var(--white); font-family: var(--main-font); display: flex; justify-content: space-between; align-items: center; } .indicator-style-2 * { cursor: pointer; } .indicator-style-2 .icon { height: 24px; fill: var(--white); } .indicator-style-2 .nums { display: flex; align-items: flex-end; } .indicator-style-2 .nums .slick-dots { display: flex; align-items: flex-end; } .indicator-style-2 .nums .slick-dots li button { border: none; background-color: transparent; color: var(--white); font-family: var(--main-font); } .indicator-style-2 .nums .slick-dots li:not(.slick-active) { display: none; } .indicator-style-2 .nums .slick-dots .slick-active button { font-size: 3.5rem; } .indicator-style-2 .current { font-size: 3rem; line-height: 1; cursor: pointer; } .indicator-style-2 .divider, .indicator-style-2 .total { font-size: 1rem; padding: 2px; } .contact-links .link { display: flex; align-items: center; margin: 0.25rem 0; } .contact-links .link * { margin: 0; } .contact-links .link i { color: var(--dark-grey-4); margin-right: 10px; font-size: 15px; cursor: auto; color: var(--light-grey-2); } .social-icons { margin: 1rem 0; } .social-icons i { font-size: 1rem; margin-right: 1rem; color: var(--heading-color); } .social-icons i:hover { color: var(--active-icon-color); cursor: pointer; } .rotated-text { position: absolute; right: -31%; bottom: 26%; font-size: 11rem; font-family: var(--main-font); transform: rotate(-90deg); color: rgba(85, 85, 85, 0.1); text-transform: uppercase; } .star-rating { margin: 1rem 0; } .star-rating .star { color: var(--icon-color); font-size: 15px; margin-right: 0.3rem; } .star-rating .checked { color: var(--active-icon-color); } /*=========================================================== View More =============================================================*/ .view-more a { font-size: 18px; padding: 0.25rem; color: var(--dark-blue-2); text-align: center; border-bottom: 1px solid var(--dark-blue-2); font-weight: 400; display: inline-block; position: relative; transition: 0.3s; } .view-more a:after { content: "⭢"; position: absolute; opacity: 0; right: 5px; transition: 0.3s; } .view-more a:hover { padding-right: 28px; padding-left: 8px; } .view-more a:hover:after { opacity: 1; right: 5px; } /*=========================================================== Video popup ============================================================*/ .video-popup .video-popup-wrapper { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--heading-color); opacity: 0; z-index: 999; visibility: hidden; display: none; animation: fadeIn 0.5s; z-index: 9999; } .video-popup .video-popup-wrapper .v-container { width: 80%; max-width: 800px; height: auto; margin: 0 auto; position: relative; margin: 15vh auto; } .video-popup .video-popup-wrapper .v-container video { width: 100%; } .video-popup .video-popup-wrapper .v-container .close-popup { position: absolute; height: 40px; width: 40px; background-color: var(--dark-blue-1); right: -20px; top: -20px; border-radius: 50%; font-size: 25px; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 100; transition: all 0.3s; } .video-popup .video-popup-wrapper .v-container .close-popup i { font-size: 1rem; color: var(--white); } .video-popup .video-popup-wrapper .v-container .close-popup:hover { background-color: var(--dark-blue-2); } .video-popup .video-popup-wrapper .v-container .video-bar { position: absolute; bottom: 0; left: 0; right: 0; background-color: var(--white); border: 1px solid var(--dark-grey-5); cursor: pointer; } .video-popup .video-popup-wrapper .v-container .video-bar .passed { background-color: var(--icon-color); height: 10px; width: 0; } .video-popup .video-popup-wrapper .v-container .buttons { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; position: absolute; left: 15px; bottom: 30px; } .video-popup .video-popup-wrapper .v-container .buttons button { cursor: pointer; background: none; border: none; outline: none; height: 40px; width: 40px; } .video-popup .video-popup-wrapper .v-container .buttons button i { color: var(--white); font-size: 1rem; } .video-popup .video-popup-wrapper .v-container .share { background-color: rgba(0, 0, 0, 0.8); position: absolute; bottom: 115px; left: 50px; opacity: 0; display: none; } .video-popup .video-popup-wrapper .v-container .share .social-icons { margin: 0; } .video-popup .video-popup-wrapper .v-container .share .social-icons i { color: var(--white); } .video-popup .video-popup-wrapper .v-container .show { display: block; opacity: 1; } /*=========================================================== Scoll next =============================================================*/ .scroll-next { position: absolute; top: 90vh; left: 50%; width: 40px; height: 40px; cursor: pointer; transform: translate(-50%, 0); } .scroll-next .chevrons { position: relative; width: 24px; height: 10px; } .scroll-next .chevrons .chevron { position: absolute; width: 24px; height: 2px; opacity: 0; transform: scale3d(0.5, 0.5, 0.5); animation: scroll 3s ease-out infinite; } .scroll-next .chevrons .chevron:first-child { animation: scroll 3s ease-out 1s infinite; } .scroll-next .chevrons .chevron:nth-child(2) { animation: scroll 3s ease-out 2s infinite; } .scroll-next .chevrons .chevron:before, .scroll-next .chevrons .chevron:after { content: " "; position: absolute; top: 0; height: 100%; width: 51%; background: var(--white); } .scroll-next .chevrons .chevron:before { left: 0; transform: skew(0deg, 30deg); } .scroll-next .chevrons .chevron:after { right: 0; width: 50%; transform: skew(0deg, -30deg); } /*============================================================== Hamburger Menu ===============================================================*/ .menu-toggler .hamburger-menu a span { background: var(--dark-grey-4); } .menu-toggler .hamburger-menu a span::after, .menu-toggler .hamburger-menu a span::before { background: var(--dark-grey-4); } .menu-toggler .hamburger-menu .active span { background: transparent; } /*=============================================================== Movile popup toggler ================================================================*/ .mobile-popup-toggler .fixed-bottom { bottom: -2px; height: 50px; width: 100%; box-shadow: 0px 0px 8px 0px var(--icon-color); background-color: var(--white); display: flex; justify-content: space-evenly; align-items: center; } .mobile-popup-toggler .fixed-bottom i { font-size: 1.2rem; } .mobile-popup-toggler .fixed-bottom .divider { height: 25px; width: 1px; background-color: var(--icon-color); } .openings { margin: 2rem 0; } .openings .opening { display: flex; align-items: center; margin: 0.25rem 0; } .openings .opening .divider { height: 1px; width: 20px; background-color: var(--light-grey-2); margin: 0 0.25rem; } .openings .opening p { margin: 0; } .show { display: block !important; opacity: 1 !important; visibility: visible !important; transform: scale(1) !important; } .hide { display: none !important; opacity: 0 !important; visibility: hidden !important; } .single-blog-grid-item-01 { cursor: pointer; } .single-blog-grid-item-01:hover .thumb .hover { visibility: visible; opacity: 1; } .single-blog-grid-item-01 .thumb { position: relative; z-index: 0; } .single-blog-grid-item-01 .thumb .hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); content: ""; display: flex; flex-direction: column; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: all 500ms; } .single-blog-grid-item-01 .thumb .hover .readmore { color: var(--white); transition: all 500ms; } .single-blog-grid-item-01 .thumb .hover .readmore:hover { transform: scale(1.2); } .single-blog-grid-item-01 .thumb img { width: 100%; border-top-left-radius: 4px; border-top-right-radius: 4px; } .single-blog-grid-item-01 .content { background-color: var(--white); padding: 25px 30px 28px; text-align: center; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .single-blog-grid-item-01 .content .time { font-family: var(--main-font); color: var(--light-grey-2); font-size: 15px; font-weight: 400; line-height: 1.6; text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: 10px; } .single-blog-grid-item-01 .content .title { font-size: 20px; line-height: 30px; font-family: var(--main-font); font-weight: 700; } .single-blog-grid-item-01 .content .title a { color: var(--dark-grey-4); transition: 500ms all; text-decoration: none; font-size: 16px; font-weight: 500; } .single-teacher-item .thumb { position: relative; z-index: 0; } .single-teacher-item .thumb img { width: 100%; } .single-teacher-item .thumb .hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; } .single-teacher-item .thumb .hover.active .hover-inner { visibility: visible; opacity: 1; } .single-teacher-item .thumb .hover .plus { position: absolute; right: 5px; top: 5px; z-index: 2; cursor: pointer; } .single-teacher-item .thumb .hover .plus i { color: var(--dark-grey-3); } .single-teacher-item .thumb .hover .hover-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(51, 62, 72, 0.7); padding: 4rem 2.5rem; visibility: hidden; opacity: 0; transition: all 500ms; text-align: left; } .single-teacher-item .thumb .hover .hover-inner p { line-height: 1.6; color: var(--white); } .single-teacher-item .content { background-color: var(--white); text-align: center; padding: 1rem 2rem 2rem 2rem; position: relative; } .single-teacher-item .content .name { font-size: 14px; font-weight: 600; color: var(--light-grey-2); letter-spacing: 2px; margin-bottom: 0; text-transform: uppercase; } .single-teacher-item .content .designation { font-size: 11px; color: var(--light-grey-2); } .single-teacher-item .content .social-icons { margin: 4px; position: absolute; right: 10px; bottom: 0px; } .single-teacher-item .content .social-icons i { font-size: 15px; margin: 2px; color: rgba(50, 61, 71, 0.9); } .comment-item-style-1 { margin: 2rem 0; } .comment-item-style-1 .name { margin: 0; font-weight: 700; } .comment-item-style-1 .degree { font-size: 11px; color: var(--icon-color); margin-bottom: 0.3rem; } .comment-item-style-1 .post { margin-bottom: 0.3rem; } .comment-item-style-1 .star-rating { margin: 0; } .comment-item-style-1 .star-rating .star { font-size: 12px; } .comment-item-style-2 { margin: 2rem 0; } .comment-item-style-2 .name { margin: 0; font-weight: 700; } .comment-item-style-2 .time { font-size: 10px; } .show-up-form-icons { bottom: -40px !important; opacity: 1 !important; } .pre-wrap { position: fixed; content: ""; transform: translate(-100%, -240%); font-size: 62px; } .preloader-inner { position: fixed; left: 0; top: 0; z-index: 999; background-color: var(--white); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .preloader-inner .cancel-preloader { position: absolute; bottom: 30px; right: 30px; } .preloader-inner .cancel-preloader a { background-color: var(--white); font-weight: 600; text-transform: capitalize; color: var(--dark-blue-1); width: 200px; height: 50px; text-align: center; line-height: 50px; border-radius: 30px; display: block; transition: all 1s; } .preloader-inner .cancel-preloader a:hover { background-color: var(--dark-blue-1); color: var(--white); } .spinner { margin: 120px auto; width: 60px; height: 60px; position: relative; text-align: center; -webkit-animation: sk-rotate 2s infinite linear; animation: sk-rotate 2s infinite linear; } .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: var(--dark-blue-1); border-radius: 100%; -webkit-animation: sk-bounce 2s infinite ease-in-out; animation: sk-bounce 2s infinite ease-in-out; } .dot2 { top: auto; bottom: 0; -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg); } } @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0); } 50% { -webkit-transform: scale(1); } } @keyframes sk-bounce { 0%, 100% { transform: scale(0); -webkit-transform: scale(0); } 50% { transform: scale(1); -webkit-transform: scale(1); } } /* ===================================================== breadcrub =========================================================*/ .breadcrub-style-1 { height: 350px; padding: 0; position: relative; width: 100%; overflow: hidden; } .breadcrub-style-1 .row { height: 100%; } .breadcrub-style-1 .row .bg-img { height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; } .breadcrub-style-1 .row .bg-color { background-color: rgba(158, 182, 188, 0.5); height: 90%; } .breadcrub-style-1 .heading { position: absolute; top: 18%; right: 18%; background-color: var(--white); padding: 40px 100px; } .breadcrub-style-1 .heading h1 { font-size: 5.5rem; margin-bottom: 1rem; color: var(--heading-color); } .breadcrub-style-1 .heading a, .breadcrub-style-1 .heading .arrow { color: var(--icon-color); } .breadcrub-style-1 .heading .arrow { font-size: 10px; } .breadcrub-style-2 { border-left: 8px solid var(--dark-blue-1); height: 350px; display: flex; align-items: center; } .breadcrub-style-2 .breadcrub-style { margin-top: 2rem; } .breadcrub-style-2 .breadcrub-style a, .breadcrub-style-2 .breadcrub-style .arrow { color: var(--icon-color); } .breadcrub-style-2 .breadcrub-style .arrow { font-size: 10px; } .breadcrub-style-3 { position: relative; height: 350px; } .breadcrub-style-3 .bg-img { height: 100%; background: url("../img/University/Courses/breadcrumb_bg.png") center center/cover; } .breadcrub-style-3 .heading h1 { position: absolute; bottom: 3rem; } .breadcrub-style-4 { background: url("../img/University/All_courses/breadcrumb_bg.png") no-repeat center center/cover; height: 300px; } .breadcrub-style-4 .container { position: relative; height: 100%; } .breadcrub-style-4 .container .heading { position: absolute; background-color: var(--light-grey-5); padding: 0.25rem 10rem 0 1rem; left: 0; bottom: -10px; } .breadcrub-style-4 .container .heading h2 { margin: 0; } .breadcrub-style-5 { height: 350px; background: url("../img/University/Blog/breadcrumb_bg.png") center center/cover; position: relative; } .breadcrub-style-5 .heading { height: 80px; width: 30%; min-width: 300px; background-color: rgba(233, 240, 244, 0.9); position: absolute; bottom: 0; padding: 0.25rem 2rem; } .breadcrub-style-5 .heading h1 { font-size: 5.5rem; position: absolute; bottom: -2.5rem; } .breadcrub-style-6 { display: flex; flex-direction: column; align-items: center; height: 450px; } .breadcrub-style-6 .bg-img { height: 100%; width: 100%; background: url("../img/University/Events/stil-564511-unsplash%402x.png") no-repeat center center/cover; } .breadcrub-style-6 h1 { border-bottom: 1px solid var(--dark-blue-3); padding: 1rem 0 0.15rem 0; } .main-btn, .small-btn, .large-btn { color: var(--white); background-color: rgba(0, 147, 184, 0.8); border: 0; font-weight: 600; font-size: 14px; font-family: var(--main-font); margin: 2rem auto; cursor: pointer; box-shadow: 0px 6px 20px -8px var(--dark-blue-1); transition: all 0.4s; display: flex; justify-content: center; align-items: center; } .main-btn a, .small-btn a, .large-btn a { color: var(--white); font-weight: 600; font-size: 14px; } .main-btn:hover, .small-btn:hover, .large-btn:hover { background-color: var(--dark-blue-1); color: var(--white); box-shadow: 0px 10px 20px -8px var(--dark-blue-1); } .main-btn { height: 38px; width: 132px; } .small-btn { height: 32px; width: 90px; } .small-text { font-size: 11px; } .large-btn { height: 42px; width: 178px; } .sec-small-btn, .sec-main-btn, .sec-large-btn { color: var(--dark-indigo); background-color: transparent; border: 1px solid var(--dark-indigo); font-weight: 700; font-size: 14px; font-family: var(--main-font); margin: 2rem auto; cursor: pointer; transition: all 0.4s; display: flex; justify-content: center; align-items: center; } .sec-small-btn:hover, .sec-main-btn:hover, .sec-large-btn:hover { border-color: var(--dark-blue-1); color: var(--dark-blue-1); } .sec-main-btn { height: 38px; width: 132px; } .sec-small-btn { height: 32px; width: 90px; } .sec-large-btn { height: 42px; width: 178px; } .dis-main-btn, .dis-small-btn, .dis-large-btn { color: #A0A0A0; background-color: #E5E5E5; border: 0; font-weight: 600; font-size: 14px; font-family: var(--main-font); margin: 2rem auto; cursor: pointer; box-shadow: 0px 6px 20px -8px #E5E5E5; transition: all 0.4s; display: flex; justify-content: center; align-items: center; } .dis-main-btn a, .dis-small-btn a, .dis-large-btn a { color: var(--white); font-weight: 600; font-size: 14px; } .dis-main-btn:hover, .dis-small-btn:hover, .dis-large-btn:hover { background-color: #c9c9c9; color: var(--white); box-shadow: 0px 10px 20px -8px #969595; } .dis-main-btn { height: 38px; width: 132px; } .dis-small-btn { height: 32px; width: 90px; } .dis-large-btn { height: 42px; width: 178px; } .halfway-btn { position: absolute; width: 60px; height: 60px; background-color: var(--dark-blue-1); border: 0; border-radius: 50%; transform: translateY(-50%) translateX(-50%); outline: none; cursor: pointer; display: flex; justify-content: center; align-items: center; } .halfway-btn:hover { animation: pulse 1s infinite; } .halfway-btn:focus { outline: 0; } .halfway-btn i { color: var(--white); font-size: 24px; } .play-btn { background-color: transparent; border: 1px solid var(--white); height: 38px; width: 38px; cursor: pointer; } .play-btn i { font-size: 15px; color: var(--white); transition: all 0.2s; } .play-btn:hover i { transform: scale(1.2); } .countdown-style-1 { display: flex; align-items: center; margin: 4rem 0; text-align: center; } .countdown-style-1 h1 { font-family: var(--main-font); } .countdown-style-1 h6 { text-transform: uppercase; letter-spacing: 3px; } .countdown-style-1 .divider { height: 70px; width: 1px; margin: 0 2.5rem; background-color: var(--white); } .countdown-style-2 { display: flex; align-items: center; margin: 4rem 0; text-align: center; } .countdown-style-2 h1 { font-family: var(--main-font); } .countdown-style-2 h6 { text-transform: uppercase; letter-spacing: 3px; } .countdown-style-2 .time-con h1 { color: var(--white); } .countdown-style-2 .time-con .time { height: 80px; width: 80px; background-color: var(--dark-grey-4); display: flex; justify-content: center; align-items: center; margin: 1rem 1.5rem; position: relative; } .countdown-style-2 .time-con:not(:last-child) .time::after { content: ":"; display: inline-block; font-size: 3rem; color: var(--dark-grey-4); position: absolute; right: -28px; } /* ======================================================= Form Style 1 =========================================================*/ .form-style-1 .form-group input { font-size: 15px; } .form-style-1 .form-group input::placeholder { color: var(--active-icon-color); font-family: var(--main-font); font-size: 12px; } .form-style-1 .form-group label { position: absolute; bottom: -4px; left: 14px; font-size: 12px; font-family: var(--main-font); } .form-style-1 .form-group input:valid+label { display: none; } .form-style-1 .required label:after { content: "*"; color: var(--red); } .form-style-1 .form-row { justify-content: space-between; } .form-style-1 .form-row .col-md-6 { flex: 1 0 47%; max-width: 47%; } .form-style-1 .form-group { position: relative; margin-bottom: 2rem; } .form-style-1 .form-group .form-control { border: 0; border-radius: 0; border-bottom: 1px solid var(--dark-grey-5); } .form-style-1 .form-group .form-control:focus { box-shadow: none; border-color: var(--dark-blue-1); } .form-style-1 .form-group .small-text { color: var(--icon-color); font-size: 9px; display: inline-block; position: absolute; right: 0; margin-top: 6px; } .form-style-1 .invalid .form-control { border-color: var(--red); } /*======================================================== Form Style Two =========================================================*/ .form-style-2 { margin: 4rem 0 3rem 0; } .form-style-2 .form-group { position: relative; margin-bottom: 2rem; } .form-style-2 .form-group .small-text { color: var(--icon-color); font-size: 9px; display: inline-block; position: absolute; right: 0; margin-top: -11px; } .form-style-2 .form-group input { font-size: 15px; padding: 0.25rem 0.5rem; margin: 0.25rem 0 1rem 0; } .form-style-2 .form-group input::placeholder { color: var(--active-icon-color); font-family: var(--main-font); } .form-style-2 .form-group label { text-align: left; font-size: 15px; font-weight: 600; font-family: var(--main-font); color: var(--dark-grey-3); } .form-style-2 .required label:after { content: "*"; color: var(--red); } .form-style-2 .form-row { justify-content: space-between; } .form-style-2 .form-row .col-md-6 { flex: 1 0 47%; max-width: 47%; } .form-style-2 .form-control { border: 0; border-radius: 0; border-bottom: 1px solid var(--dark-grey-5); background-color: transparent; } .form-style-2 .form-control:focus { box-shadow: none; border-color: var(--dark-blue-1); } /* ============================== Form Style 3 ===================================== */ .form-style-3 .form-group input { font-size: 15px; } .form-style-3 .form-group input::placeholder { color: var(--active-icon-color); font-family: var(--main-font); font-size: 12px; } .form-style-3 .form-group label { position: absolute; bottom: -4px; left: 14px; font-size: 12px; font-family: var(--main-font); color: var(--active-icon-color); } .form-style-3 .form-group input:valid+label { display: none; } .form-style-3 .required label:after { content: "*"; color: var(--red); } .form-style-3 .form-row { justify-content: space-between; } .form-style-3 .form-row .col-md-6 { flex: 1 0 47%; max-width: 47%; } .form-style-3 .form-group { position: relative; margin-bottom: 2rem; } .form-style-3 .form-group .form-control { border: 0; border-radius: 0; border-bottom: 1px solid var(--dark-grey-5); } .form-style-3 .form-group .form-control:focus { box-shadow: none; border-color: var(--dark-blue-1); } .form-style-3 .form-group .small-text { color: var(--icon-color); font-size: 9px; display: inline-block; position: absolute; right: 0; margin-top: 6px; } .form-style-3 .error-icon, .form-style-3 .error-text { display: none; } .form-style-3 .invalid .error-icon, .form-style-3 .invalid .error-text { display: inline-block; } .form-style-3 .invalid .form-control { border-color: var(--red); } .form-style-3 .invalid .error-icon { position: absolute; right: 5px; margin: 0; top: 10px; color: var(--red); font-size: 14px; } .form-style-3 .invalid .error-text { position: absolute; left: 0px; top: 45px; font-size: 10px; color: var(--red); } /* ================================= Custom Checkbox ==================================== */ .label-checkbox { position: relative; line-height: 135%; cursor: pointer; font-family: var(--main-font); font-size: 15px; } .label-checkbox .checkbox { position: relative; top: rem(-6); margin: 0 1rem 0 0; cursor: pointer; } .label-checkbox .checkbox:before { transition: all 0.3s ease-in-out; content: ""; position: absolute; left: 0; z-index: 1; width: 14px; height: 14px; border: 2px solid var(--icon-color); } .label-checkbox .checkbox:checked:before { transform: rotate(-45deg); height: 0.5rem; border-color: var(--active-icon-color); border-top-style: none; border-right-style: none; } .label-checkbox .checkbox:disabled { cursor: not-allowed; } .label-checkbox .checkbox:after { content: ""; position: absolute; top: rem(-2); left: 0; width: 1rem; height: 1rem; background: var(--white); cursor: pointer; } /* ================================== Custom Select Box ==================================== */ .select-box-con { height: 40px; } .select-box-con .nice-select { border: 0; border-radius: 0; border-bottom: 1px solid var(--dark-grey-5); background-color: transparent; width: 100%; padding: 0 4px; } .select-box-con .nice-select:focus { box-shadow: none; border-color: var(--dark-blue-1); } .select-box-con .nice-select .current { color: var(--active-icon-color); font-size: 15px; } .select-box-con .nice-select .list { background-color: var(--light-grey-3); padding: 1rem 0; width: 80%; border-radius: 0; left: auto; right: 0; } .select-box-con .nice-select .list li:hover { color: var(--active-icon-color); } .select-box-con .nice-select .option { min-height: 16px; line-height: 1.5; } /* =================================== Search Input Group ==================================== */ .search-input-group input { border: 1px solid var(--light-blue-2); outline: none; padding: 0.2rem 0.5rem; } .search-input-group input::placeholder { color: var(--icon-color); font-size: 11px; letter-spacing: -1px; } .search-input-group input:focus { border-right: 1px solid var(--dark-grey-3); transition: all 0.3s; } .search-input-group .icon { fill: var(--dark-grey-3); margin-left: 0.5rem; } .list .main-li, .list .sub-li { display: flex; align-items: flex-start; } .list .main-li p, .list .sub-li p { line-height: 1; } .list .check-arrow::before { content: ""; font-family: "Font Awesome 5 Free"; font-weight: 700; font-size: 10px; color: var(--dark-blue-1); margin: 0 8px; } .list .point-right-arrow::before { content: ""; font-family: "Font Awesome 5 Free"; font-weight: 700; font-size: 10px; color: var(--dark-blue-1); margin: 0 8px; } .list .with-sub { flex-wrap: wrap; } .list .with-sub ul { margin: 1rem 3rem 0 2rem; } .model-alert { width: 480px; background-color: var(--white); padding: 3rem 4rem; text-align: center; } .model-alert .alert-sign { margin: 0 auto 1rem auto; background-color: var(--dark-blue-3); height: 60px; width: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; animation: pulse2 1s linear infinite; } .model-alert .alert-sign:hover { animation: none; } .model-alert .alert-sign i { color: var(--white); font-size: 2rem; } .model-alert h2 { color: var(--dark-blue-3); margin-bottom: 1rem; } .model-alert .main-btn { margin-bottom: 0; } .opening-popup, .location-popup, .form-popup { width: 60%; max-width: 800px; background-color: var(--white); position: relative; transition: all 0.3s; display: none; opacity: 0; } .opening-popup .content, .location-popup .content, .form-popup .content { display: flex; flex-direction: column; justify-content: center; padding: 0 3rem; } .opening-popup .content h4, .opening-popup .content h5, .location-popup .content h4, .location-popup .content h5, .form-popup .content h4, .form-popup .content h5 { font-family: var(--heading-font); font-weight: 700; } .opening-popup .content .openings { margin: 2rem 0; } .opening-popup .content .openings .opening { display: flex; align-items: center; margin: 0.25rem 0; } .opening-popup .content .openings .opening .divider { height: 1px; width: 20px; background-color: var(--light-grey-2); margin: 0 0.25rem; } .opening-popup .content .openings .opening p { margin: 0; } .close-popup { position: absolute; height: 40px; width: 40px; background-color: var(--dark-blue-1); right: -20px; top: -20px; border-radius: 50%; font-size: 25px; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 100; transition: all 0.3s; } .close-popup i { font-size: 1rem; color: var(--white); } .close-popup:hover { background-color: var(--dark-blue-2); } .location-popup .address { margin: 2rem 0; } .location-popup .main-btn { margin: 0; } .form-popup .content { padding: 3rem 2rem 3rem 4rem; } .form-popup .form-style-2 { margin: 2rem 0 0 0; } .form-popup .form-style-2 .form-group { margin-bottom: 1rem; } .form-popup .form-style-2 .form-group label { margin: 0; } .form-popup .form-style-2 .form-group input::placeholder { color: var(--active-icon-color); font-size: 14px; } .form-popup .form-style-2 .main-btn { margin: 2rem 0 0 0; } #location-map { height: 400px; width: 100%; } .pagination-style-1 { display: flex; align-items: center; width: 200px; margin: 0 auto; } .pagination-style-1 .next, .pagination-style-1 .prev { background-color: var(--dark-grey-3); height: 26px; width: 26px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .pagination-style-1 .next i, .pagination-style-1 .prev i { color: var(--white); font-size: 14px; } .pagination-style-1 .page-num { display: flex; align-items: flex-end; margin: 0 auto; } .pagination-style-1 .page-num .current { font-size: 2.5rem; color: var(--active-icon-color); } .pagination-style-1 .page-num .total { font-size: 1rem; color: var(--icon-color); } .pagination-style-1 .page-num .total::before { content: ""; display: inline-block; height: 22px; margin: 0 4px; width: 1px; background: var(--icon-color); } .pagination-style-2 { display: flex; justify-content: center; width: 350px; } .pagination-style-2 .next, .pagination-style-2 .prev { height: 25px; width: 25px; background-color: var(--icon-color); display: flex; justify-content: center; align-items: center; cursor: pointer; margin: 0 0.75rem; } .pagination-style-2 .next i, .pagination-style-2 .prev i { font-size: 12px; color: var(--white); } .pagination-style-2 .page-num { display: flex; align-items: center; } .pagination-style-2 .page-num a { font-size: 14px; margin: 0 0.5rem; } .pagination-style-2 .page-num .current { color: var(--active-icon-color); font-weight: 700; } .pagination-style-2 .page-num .total { color: var(--icon-color); } .pagination-style-2 .page-num .page-indicators { display: flex; } .pagination-style-2 .page-num .page-indicators .indicator { height: 3px; width: 1.5rem; background-color: var(--icon-color); } .pagination-style-2 .page-num .page-indicators .active { width: 2.5rem; background-color: var(--active-icon-color); } /*=============================================================== Carousel Indicatore ================================================================*/ .pagination-style-3 { display: flex; align-items: flex-end; } .pagination-style-3 * { font-family: var(--main-font); line-height: 0.5; margin: 0; color: var(--dark-grey-4); } .pagination-style-3 .current { font-size: 5rem; position: relative; } .pagination-style-3 .current::after { content: ""; position: absolute; top: 0px; left: 100px; display: block; height: 3px; width: 270px; background: var(--dark-grey-4); z-index: 1; } .pagination-style-3 .total { font-size: 1.2rem; } .pagination-style-3 .total:before { content: "/"; margin: 0 3px; } .popover-container { width: 90px; position: relative; } .popover-right { background-color: rgba(51, 62, 72, 0.8); width: 260px; padding: 2rem; position: absolute; top: 10%; left: 100%; visibility: hidden; opacity: 0; transform: scale(0.2); transition: all 0.3s; } .popover-right * { color: var(--white); } .popover-right p { font-weight: 300; font-size: 12px; } .popover-right i { font-size: 12px; color: var(--white) !important; } .progress-bars { padding: 2rem; } .progress-bars .progressbar { width: 100%; margin-top: 5px; margin-bottom: 25px; position: relative; background-color: #f4f4f4; } .progress-bars .proggress { height: 8px; width: 10px; } .progress-bars .percentCount { float: right; margin-top: -30px; clear: both; font-weight: 700; font-size: 15px; font-family: var(--main-font); color: var(--light-grey-2); } .progress-bars .single-progress-item .title { font-family: var(--main-font); color: var(--light-grey-2); font-size: 15px; font-weight: 500; line-height: 1.6; padding: 0 0.5rem; } .progress-bars .single-progress-item .pro-bar .progressbar { background: transparent !important; box-shadow: none !important; } .progress-bars .single-progress-item .pro-bar .progressbar .proggress { background-image: linear-gradient(to right, var(--dark-blue-1) 30%, #A2F8FF) !important; } .side-social-icons { display: flex; flex-direction: column; position: absolute; left: 2rem; top: 10rem; } .side-social-icons .icon { color: var(--dark-grey-4); font-size: 1rem; } .side-form-icons { height: 135px; width: 40px; float: right; padding: 0.25rem; border-radius: 3px; box-shadow: -2px 0px 8px 0px var(--icon-color); position: sticky; top: 6vh; right: 50px; display: block; z-index: 999; background-color: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center; } .side-form-icons .icon { height: 20px; width: 20px; color: var(--dark-grey); display: flex; justify-content: center; } .side-form-icons .icon:hover { color: var(--dark-blue-1); transition: 0.4s; } .side-form-icons .active { color: var(--dark-blue-1); } /*=========================================================== Side form popup ============================================================*/ .side-form-popup .popup-wrapper { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--heading-color); opacity: 0; z-index: 99; visibility: hidden; display: none; animation: fadeIn 0.3s; } .side-form-popup .popup-wrapper .center-popup { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .side-form-popup #location-map { height: 400px; width: 100%; } .side-social-links { position: absolute; transform: rotate(-90deg); } .side-social-links a { text-transform: uppercase; margin: 0 1rem; letter-spacing: 1px; font-weight: 700; font-size: 11px; color: rgba(51, 62, 72, 0.5); } .side-social-links a:hover { color: var(--dark-grey-4); } .toggle-switch { display: inline-block; width: 80px; height: 25px; margin: 0 2rem; position: relative; border-radius: 40px; background-color: rgba(158, 182, 188, 0.4); } .toggle-switch::after { content: "" !important; } .toggle-switch input { display: none; } .toggle-switch .option-slider { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 30px; cursor: pointer; overflow: hidden; } .toggle-switch .option-slider::before { position: absolute; content: ""; width: 100%; height: 100%; background: var(--active-icon-color); border-radius: 30px; transform: translateX(-30px); transition: 0.3s; } .toggle-switch input:disabled+.option-slider { cursor: not-allowed; } .toggle-switch input:checked+.option-slider:before { transform: translateX(30px); background: var(--active-icon-color); } .toggle-switch input:disabled+.option-slider::before { background: #e5e5e5; } .toggle-switch input:disabled+.option-slider { background: rgba(219, 219, 219, 0.5); } .hamburger-menu { position: relative; } .hamburger-menu a { width: 25px; height: 15px; display: block; position: relative; } .hamburger-menu a span { height: 1px; position: absolute; background: var(--white); text-indent: -999em; width: 100%; top: 6px; transition: all 0.5s cubic-bezier(0, 0.275, 0.125, 1); } .hamburger-menu a span:before, .hamburger-menu a span:after { content: ""; height: 1px; background: var(--white); width: 100%; position: absolute; top: -6px; left: 0; transition: all 0.5s cubic-bezier(0, 0.275, 0.125, 1); } .hamburger-menu a span:after { top: 6px; } .hamburger-menu a.active span { background: transparent; } .hamburger-menu a.active span:before { transform: translateY(6px) translateX(1px) rotate(45deg); } .hamburger-menu a.active span:after { transform: translateY(-6px) translateX(1px) rotate(-45deg); } .close-alert { position: absolute; height: 30px; width: 30px; background-color: var(--dark-blue-1); right: -15px; top: -15px; border-radius: 50%; font-size: 25px; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 100; transition: all 0.3s; } .close-alert i { font-size: 1rem; color: var(--white); } .close-alert:hover { background-color: var(--dark-blue-2); } .alert { background-color: var(--light-blue-2); padding: 1rem 1.5rem; width: 500px; position: relative; border-radius: 0; display: none; } .alert p { margin: 0; color: --dark-grey-3; } .alert i { font-size: 14px; } .bordered-alert { border: 1px solid var(--red); } .alert-with-icon .row { align-items: center; } .alert-with-icon .row .icon i { margin: 0; color: var(--dark-grey-4); } .alert-with-icon .row .content { padding: 0 6px; } .large-alert .row { align-items: center; } .large-alert .row .icon { display: flex; justify-content: center; } .large-alert .row .icon i { font-size: 2rem; color: var(--dark-grey-4); } .large-alert .row .content h6 { font-weight: 700; margin-bottom: 4px; } .cookies { background-color: var(--light-blue-2); padding: 2rem 1.5rem; width: 500px; display: none; opacity: 0; } .cookies p { margin: 0; } .cookies .buttons { display: flex; margin: 2rem 0 1rem; } .cookies .buttons .small-btn { margin: 0 3rem 0 0; } .range-slider-con { display: flex; justify-content: space-between; align-items: center; width: 500px; } .range-slider-con .start, .range-slider-con .end { height: 25px; width: 20px; font-size: 15px; display: flex; justify-content: center; align-items: center; background-color: var(--icon-color); color: var(--white); } .range-slider-con .noUi-connect { background-color: var(--active-icon-color); } .range-slider-con .pmd-range-slider { width: 400px; margin: 0; } .range-slider-con .pmd-range-slider .noUi-handle:before { background: var(--white); border: 1px solid var(--active-icon-color); } .range-slider-con .pmd-range-slider .noUi-active { background: var(--active-icon-color); } .range-slider-con .pmd-range-slider .noUi-tooltip { background: var(--active-icon-color) !important; } .range-slider-con .pmd-range-slider .noUi-tooltip::before { background: var(--active-icon-color) !important; } .range-slider-con .pmd-range-slider .noUi-background { background: var(--icon-color); } .course-card-style-1 { margin: 0rem 0.5rem 1.5rem 0.5rem; } .course-card-style-1 .card { position: relative; border: 0; border-radius: 0; } .course-card-style-1 .card .card-img-top { border-radius: 0; } .course-card-style-1 .card .card-img-overlay { all: initial; position: absolute; right: 0; bottom: 0; left: 0; padding: 0; } .course-card-style-1 .card .card-img-overlay .card-body { padding: 0.5rem 2rem 0.5rem 2rem; background-color: var(--light-grey-3); } .course-card-style-1 .card .card-img-overlay .card-body h6 { margin-bottom: 2px; color: var(--dark-grey-3); } .course-card-style-1 .card .card-img-overlay .card-body p { font-size: 12px; color: var(--dark-grey-3); margin: 0px; } .course-card-style-1 .card .hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; } .course-card-style-1 .card .hover .plus { position: absolute; right: 5px; top: 5px; z-index: 2; cursor: pointer; } .course-card-style-1 .card .hover .plus i { color: var(--white); } .course-card-style-1 .card .hover .hover-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(51, 62, 72, 0.7); padding: 3rem 2rem; visibility: hidden; opacity: 0; transition: all 500ms; text-align: left; } .course-card-style-1 .card .hover .hover-inner * { color: var(--white); } .course-card-style-1 .card .hover .hover-inner .price { margin: 1rem 0; font-weight: 700; } .course-card-style-1 .card .hover .hover-inner .price i { margin: 2px; font-size: 11px; } .course-card-style-1 .card .hover .hover-inner .course-details .row>div { display: flex; align-items: center; } .course-card-style-1 .card .hover .hover-inner .course-details .row>div span { font-size: 11px; } .course-card-style-1 .card .hover .hover-inner .course-details .row>div i { margin: 0 4px 0 0; font-size: 8px; } .course-card-style-1 .card .hover .hover-inner .small-btn { margin: 2rem 0; } .course-card-style-2 { margin-bottom: 3rem; } .course-card-style-2 .card { position: relative; border: 0; border-radius: 0; } .course-card-style-2 .card>i { position: absolute; right: 0px; top: 0px; color: var(--white); font-size: 1rem; } .course-card-style-2 .card .card-img-top { border-radius: 0; } .course-card-style-2 .card .card-img-overlay { all: initial; } .course-card-style-2 .card .card-img-overlay .card-body { padding: 2rem; background-color: var(--light-grey-3); } .course-card-style-2 .card .card-img-overlay .card-body h6 { margin-bottom: 2px; font-size: 15px; font-weight: 700; color: var(--dark-grey-3); } .course-card-style-2 .card .card-img-overlay .card-body .auther { font-size: 11px; color: var(--dark-grey-3); margin: 0px; } .course-card-style-2 .card .card-img-overlay .card-body .details { font-size: 12px; margin: 0.5rem 0; } .course-card-style-2 .card .card-img-overlay .card-body .more { display: flex; justify-content: space-between; margin-top: 1rem; align-items: center; } .course-card-style-2 .card .card-img-overlay .card-body .more h4 { margin: 0; color: var(--dark-grey-3); } .course-card-style-2 .card .card-img-overlay .card-body .more .small-btn { font-size: 12px; margin: 0; } .course-card-style-3 { margin: 0rem 0.5rem 1.5rem 0.5rem; } .course-card-style-3 .card { position: relative; border: 0; border-radius: 0; } .study-material p { margin-top: 15px; font-weight: bolder; } .study-material h3 { margin-top: 45px; } .course-card-style-3 .card>i { position: absolute; right: 0px; top: 0px; color: var(--white); font-size: 1rem; } .course-card-style-3 .card .thumb { position: relative; } .course-card-style-3 .card .thumb .hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; } .course-card-style-3 .card .thumb .hover .plus { position: absolute; right: 5px; top: 5px; z-index: 2; cursor: pointer; } .course-card-style-3 .card .thumb .hover .plus i { color: var(--white); } .course-card-style-3 .card .thumb .hover .hover-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(51, 62, 72, 0.7); padding: 3rem 2rem; visibility: hidden; opacity: 0; transition: all 500ms; text-align: left; } .course-card-style-3 .card .thumb .hover .hover-inner * { color: var(--white); } .course-card-style-3 .card .card-img-top { border-radius: 0; } .course-card-style-3 .card .card-img-overlay { all: initial; } .course-card-style-3 .card .card-img-overlay .card-body { padding: 0.5rem 1.5rem 0.5rem 1.5rem; background-color: var(--white); } .course-card-style-3 .card .card-img-overlay .card-body h6 { margin-bottom: 2px; font-size: 15px; font-weight: 700; color: var(--dark-grey-3); } .course-card-style-3 .card .card-img-overlay .card-body p { font-size: 11px; color: var(--dark-grey-3); margin: 0px; } .navbar-section { margin-top: 15px; height: 3rem; } .navbar-section a { margin: 0; padding: 0; } .navbar-section .row { position: relative; } .navbar-section .nav-container { display: flex; justify-content: space-between; } .navbar-section .navbar .navbar-brand { margin-right: 80px; } .navbar-section .navbar .navbar-brand img { height: 50px; } .navbar-section .navbar .nav-menu-items .current-menu-item { color: var(--dark-blue-1); } .navbar-section .navbar .navbar-nav { display: flex; justify-content: center; } .navbar-section .navbar .navbar-nav .current-menu-item { color: var(--dark-blue-1); border-bottom: 2px solid var(--dark-blue-1); padding: 0; } .navbar-section .navbar .navbar-nav .current-menu-item::before { color: var(--dark-blue-1) !important; } .navbar-section .navbar .navbar-nav li { margin-right: 50px; margin-bottom: 0; display: flex; align-items: center; position: relative; } .navbar-section .navbar .navbar-nav li a { padding: 0; } .navbar-section .navbar .navbar-nav li .sub-menu { position: absolute; top: 20%; width: 180px; padding: 10px 0; left: 0; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); background-color: var(--white); visibility: hidden; opacity: 0; margin-top: 50px; transition: margin 0.1s linear 0.3s, visibility 0.1s linear 0.3s, opacity 0.1s linear 0.3s; z-index: 999; } .navbar-section .navbar .navbar-nav li .sub-menu * { margin: 0; padding: 0; } .navbar-section .navbar .navbar-nav li .sub-menu li { padding: 0 20px; } .navbar-section .navbar .navbar-nav li .sub-menu li .current-menu-item { border-bottom: none; } .navbar-section .navbar .navbar-nav li .sub-menu li a { margin: 5px 0; font-size: 12px; font-weight: 500; } .navbar-section .navbar .navbar-nav li .sub-menu li a:hover { text-decoration: none; } .navbar-section .navbar .navbar-nav li .sub-menu li i { position: relative; right: -10px; font-size: 8px; } .navbar-section .navbar .navbar-nav li .sub-menu li:hover>a { margin-left: 4px; color: var(--dark-blue-1); } .navbar-section .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children { position: relative; } .navbar-section .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children>a { position: relative; } .navbar-section .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children>a::after { content: ""; font-family: "font awesome 5 free"; font-weight: 900; font-size: 9px; position: absolute; right: -8px; bottom: 0px; } .navbar-section .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children>a:hover::after { color: var(--dark-blue-1); } .navbar-section .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children .sub-menu { left: 80%; top: -150%; padding: 1rem 0; visibility: hidden; opacity: 0; transition: all 0.5s; } .navbar-section .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children:hover .sub-menu { left: 98%; visibility: visible; opacity: 1; } .navbar-section .navbar .navbar-nav li a { font-size: 14px; margin-right: 2px; font-weight: 700; } .navbar-section .navbar .navbar-nav li a:after { content: ""; display: block; border-bottom: 2px solid var(--dark-blue-1); width: 0; position: relative; right: 0; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .navbar-section .navbar .navbar-nav .menu-item-has-no-children { margin-right: 35px; } .navbar-section .navbar .navbar-nav .menu-item-has-no-children:hover>a, .navbar-section .navbar .navbar-nav .menu-item-has-no-children:hover .fa-chevron-down { color: var(--dark-blue-1); transition: all 0.3s; } .navbar-section .navbar .navbar-nav .menu-item-has-no-children:hover>a:not(.current-menu-item):after { width: 100%; } .navbar-section .navbar .navbar-nav .menu-item-has-children { position: relative; } .navbar-section .navbar .navbar-nav .menu-item-has-children>a::before { content: ""; position: absolute; right: -14px; top: 5px; font-family: "font awesome 5 free"; font-weight: 900; font-size: 10px; color: #545454; } .navbar-section .navbar .navbar-nav .menu-item-has-children:hover>a, .navbar-section .navbar .navbar-nav .menu-item-has-children:hover>a::before { color: var(--dark-blue-1); transition: all 0.3s; } .navbar-section .navbar .navbar-nav .menu-item-has-children:hover>a:not(.current-menu-item):after { width: 100%; } .navbar-section .navbar .navbar-nav .menu-item-has-children:hover .sub-menu { visibility: visible; opacity: 1; margin-top: 35px; } .navbar-section .navbar .navbar-nav img { width: 225px; margin-right: 85px; } .navbar-section .side-nav { width: 200px; display: flex; justify-content: flex-end; align-items: center; z-index: 9; } .navbar-section .side-nav a { padding: 0 10px; } .navbar-section .side-nav .flag { width: 30px; height: 30px; margin: 0 1rem; cursor: pointer; } .navbar-section .side-nav .search, .navbar-section .side-nav .auth { height: 20px; padding: 0 8px; cursor: pointer; color: var(--light-grey-2); } .navbar-section .side-nav .search { border-left: 1px solid var(--light-grey-2); display: flex; align-items: center; } .navbar-section .side-nav .search i { color: var(--light-grey-2); transition: all 0.3s; font-weight: 600; } .navbar-section .side-nav .search i:hover { color: var(--heading-color); } .navbar-section .side-nav .auth { border-right: 1px solid var(--light-grey-2); text-align: right; font-size: 14px; font-weight: 400; } .navbar-section .side-nav .auth:hover { color: var(--heading-color); } .navbar-section .side-nav .location .active { background: none; border: none; outline: none; } .navbar-section .side-nav .location .dropdown-menu { min-width: 60px; border: none; padding-top: 1rem; left: 50% !important; will-change: transform; transform: translate(-50%, 20%) !important; } .navbar-section .side-nav .location .dropdown-menu .dropdown-item { padding: 0.75rem 0.5rem; cursor: pointer; } .navbar-section .main-nav { position: relative; } .navbar-section .main-nav .nav-menu-items { width: 300px; margin: 1rem 0.5rem; padding: 1rem 2rem; background-color: var(--white); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); position: absolute; top: 60px; left: 220px; z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s; } .navbar-section .main-nav .nav-menu-items .nav-items>li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; cursor: pointer; margin: 0; } .navbar-section .main-nav .nav-menu-items .nav-items>li>a { padding: 0.5rem 0; } .navbar-section .main-nav .nav-menu-items .nav-items>li:hover { color: var(--dark-blue-1); } .navbar-section .main-nav .nav-menu-items .nav-items>li .sub-menu { overflow: hidden; width: 100%; margin-left: 1.5rem; max-height: 0; transition: all 0.5s; } .navbar-section .main-nav .nav-menu-items .nav-items>li .animate-dropdown { display: block; opacity: 1; max-height: 800px !important; } .navbar-section .main-nav .nav-menu-items .menu-item-has-children { position: relative; } .navbar-section .main-nav .nav-menu-items .menu-item-has-children::after { content: ""; font-family: "font awesome 5 free"; font-weight: 900; font-size: 8px; margin: 0; color: var(--dark-grey); position: absolute; right: 0px; top: 12px; } .navbar-section .main-nav .nav-menu-items .minimize-icon::after { content: ""; } .navbar-section .main-nav .active { visibility: visible; opacity: 1; } .navbar-section .search-content-wrap { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; background-color: var(--heading-color); transition: all ease-in-out 0.3s; z-index: 99999; } .navbar-section .search-content-wrap.search-visible { visibility: visible; opacity: 1; } .navbar-section .search-content-wrap.search-visible .search-content { opacity: 1; visibility: visible; } .navbar-section .search-content-wrap .search-content { display: inline-block; max-width: 90%; opacity: 0; visibility: hidden; transition: all ease-in-out 0.3s; position: absolute; top: 80px; right: 90px; } .navbar-section .search-content-wrap .search-content .search-form { position: relative; } .navbar-section .search-content-wrap .search-content .search-form input { width: 550px; background-color: var(--white); border: 0; font-size: 14px; padding: 1rem 1.5rem; color: var(--heading-color); transition: all 0.3s ease-out; font-weight: 400; max-width: 100%; height: auto; } .navbar-section .search-content-wrap .search-content .search-close { display: block; position: absolute; top: -40%; left: 97%; height: 40px; width: 40px; border-radius: 50%; background-color: var(--dark-blue-1); transition: all 0.3s; } .navbar-section .search-content-wrap .search-content .search-close:hover { background-color: var(--dark-blue-2); } .navbar-section .search-content-wrap .search-content .search-close .icon { color: var(--white); font-size: 14px; } .navbar-mobile .container-fluid { display: flex; justify-content: space-between; margin-top: 1rem; align-items: center; padding: 0 10px !important; position: relative; z-index: 99; height: 50px; background-color: var(--white); } .navbar-mobile .container-fluid .divider { height: 40px; width: 1px; background-color: var(--light-grey-1); margin: 0 1rem; } .navbar-mobile .container-fluid .menu-toggler .hamburger-menu a span { background: var(--dark-grey-4); } .navbar-mobile .container-fluid .menu-toggler .hamburger-menu a span::after, .navbar-mobile .container-fluid .menu-toggler .hamburger-menu a span::before { background: var(--dark-grey-4); } .navbar-mobile .container-fluid .menu-toggler .hamburger-menu .active span { background: transparent; } .navbar-mobile .container-fluid .mobile-menu-toggler .hamburger-menu-button { width: 40px; height: 40px; padding: 8px; display: block; position: relative; border: 0; background: 0; z-index: 100; color: transparent; cursor: pointer; outline: none; } .navbar-mobile .container-fluid .logo img { height: 30px; } .navbar-mobile .container-fluid .language button { background: none; border: none; width: 100%; } .navbar-mobile .container-fluid .language .active { background: none; border: none; outline: none; } .navbar-mobile .container-fluid .language .flag { width: 30px; height: 30px; margin: 0 1rem; cursor: pointer; margin: 0; } .navbar-mobile .container-fluid .language .dropdown-menu { min-width: 60px; border: none; padding-top: 1rem; left: 50% !important; will-change: transform; transform: translate(-50%, 30px) !important; } .navbar-mobile .container-fluid .language .dropdown-menu .dropdown-item { padding: 0.75rem 1rem; cursor: pointer; } .navbar-mobile .container-fluid .search { cursor: pointer; } .navbar-mobile .container-fluid .search i { color: var(--light-grey-2); transition: all 0.3s; font-weight: 600; } .navbar-mobile .container-fluid .search i:hover { color: var(--heading-color); } .navbar-mobile .mobile-search-wrapper { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: rgba(51, 62, 72, 0.9); z-index: 9; opacity: 0; transition: all 0.5s; height: 100%; visibility: hidden; } .navbar-mobile .mobile-search-wrapper form input { position: absolute; height: 60px; width: 100%; left: 0px; right: 0px; top: 50px; padding: 0.5rem 1rem; } .navbar-mobile .mobile-search-wrapper form input::placeholder { color: rgba(85, 85, 85, 0.5); font-size: 12px; font-family: var(--main-font); } .navbar-mobile .nav-menu-items { width: 97%; margin: 1rem 0.5rem; padding: 1rem 2rem; background-color: var(--white); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); position: absolute; z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s; } .navbar-mobile .nav-menu-items .nav-items>li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; cursor: pointer; margin: 0; } .navbar-mobile .nav-menu-items .nav-items>li>a { padding: 0.5rem 0; } .navbar-mobile .nav-menu-items .nav-items>li:hover { color: var(--dark-blue-1); } .navbar-mobile .nav-menu-items .nav-items>li .sub-menu { overflow: hidden; width: 100%; margin-left: 1.5rem; max-height: 0; transition: all 0.5s; } .navbar-mobile .nav-menu-items .nav-items>li .animate-dropdown { display: block; opacity: 1; max-height: 800px !important; } .navbar-mobile .nav-menu-items .menu-item-has-children { position: relative; } .navbar-mobile .nav-menu-items .menu-item-has-children::after { content: ""; font-family: "font awesome 5 free"; font-weight: 900; font-size: 8px; margin: 0; color: var(--dark-grey); position: absolute; right: 0px; top: 12px; } .navbar-mobile .nav-menu-items .minimize-icon::after { content: ""; } .navbar-mobile .nav-menu-items .current-menu-item { color: var(--dark-blue-1); } .navbar-mobile .active { visibility: visible; opacity: 1; } .page-nav-section { padding: 4rem 0 1rem 0; } .page-nav-section ul li { margin-right: 3rem; } .page-nav-section ul li .active { color: var(--dark-blue-1); border-bottom: 2px solid var(--dark-blue-1); } .page-nav-section ul li a { font-size: 15px; font-weight: 600; padding: 0.2rem 0.5rem; } .page-nav-section ul li a:not(.active):after { content: ""; display: block; border-bottom: 2px solid var(--dark-blue-1); width: 0; position: relative; right: 0; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .page-nav-section ul li:hover a:not(.active):after { width: 100%; } .page-nav-section ul .search-input-group input { border: 1px solid var(--light-blue-2); outline: none; padding: 0.2rem 0.5rem; } .page-nav-section ul .search-input-group input::placeholder { color: var(--icon-color); font-size: 11px; letter-spacing: -1px; } .page-nav-section ul .search-input-group input:focus { border-right: 1px solid var(--dark-grey-3); transition: all 0.3s; } .page-nav-section ul .search-input-group i { color: var(--dark-grey-3); margin-left: 0.5rem; font-size: 14px; font-weight: 600; } .header_section { position: relative; z-index: 0; padding-left: 130px; min-height: 500px; } .header_section .social-icon { position: absolute; left: 70px; top: 50%; transform: translateY(-50%); } .header_section .social-icon ul { margin: 0; padding: 0; list-style: none; } .header_section .social-icon ul li { display: block; } .header_section .social-icon ul li+li { margin-top: 15px; } .header_section .social-icon ul li a { color: var(--icon-color); transition: all 500ms; } .header_section .social-icon ul li a:hover { color: var(--active-icon-color); } .header_section .social-icon ul li a i { margin: 4px 0; font-size: 15px; } .header_section .header-carousel .owl-dots { position: absolute; left: -55px; bottom: 0; } .header_section .header-carousel .owl-dots div { margin: 5px 0; background-color: var(--icon-color); height: 20px; width: 3px; transition: all 0.4s; display: block; } .header_section .header-carousel .owl-dots div.active { height: 50px; background-color: var(--active-icon-color); } .header_section .header-carousel .owl-nav { position: absolute; left: 30%; bottom: 0; } .header_section .header-carousel .owl-nav div { width: 42px; height: 42px; background-color: var(--dark-grey-3); color: var(--white); text-align: center; line-height: 42px; } .header_section .header-carousel .owl-nav div.owl-prev { margin-left: -42px; } .header_section .header-carousel .owl-nav i { color: var(--white); } .header_section .header-carousel .owl-stage, .header_section .header-carousel .owl-item, .header_section .header-carousel .single-header-item { height: 100%; overflow: hidden; margin-right: 1px; } .header_section .header-carousel .owl-stage .owl-item.active .single-header-item .content-area .title { -webkit-animation: 1s 0.2s fadeInLeft both; animation: 1s 0.2s fadeInLeft both; } .header_section .header-carousel .owl-stage .owl-item.active .single-header-item .content-area p { -webkit-animation: 1s 0.2s fadeInUp both; animation: 1s 0.2s fadeInUp both; } .header_section .header-carousel .owl-stage .owl-item.active .single-header-item .content-area .boxed-btn { -webkit-animation: 1s 0.2s flipInX both; animation: 1s 0.2s flipInX both; } .header_section .single-header-item { position: relative; z-index: 0; } .header_section .single-header-item .bg-image { position: absolute; right: 0; top: 0; width: 70%; height: 100%; z-index: -1; background-size: cover; background-position: center; } .header_section .single-header-item .content-area { width: 30%; height: 80vh; min-height: 500px; padding: 10vh 0 0 14px; } .header_section .single-header-item .content-area .title { font-weight: 700; color: var(--heading-color); font-family: var(--heading-font); margin-bottom: 35px; position: relative; width: 42vw; } .header_section .single-header-item .content-area .boxed-btn { display: inline-block; color: var(--white); background-color: rgba(0, 147, 184, 0.8); border: none; font-weight: 600; font-size: 14px; font-family: "Comfortaa", cursive; cursor: pointer; box-shadow: 0px 6px 20px -8px var(--dark-blue-1); transition: all 0.4s; padding: 10px 25px; border-radius: 1px; text-decoration: none; margin-top: 50px; } .header_section .single-header-item .content-area .boxed-btn:hover { background-color: var(--dark-blue-1); color: var(--white); box-shadow: 0px 10px 20px -8px var(--dark-blue-1); } .header_section .single-header-item .content-area p { font-family: "Comfortaa", cursive; color: var(--light-grey-2); line-height: 1.6; padding-right: 50px; margin-bottom: 0px; } .event-item-style-1 { margin: 5rem 0; } .event-item-style-1 .date, .event-item-style-1 .media { padding: 0; } .event-item-style-1 .date, .event-item-style-1 .details { margin-top: 5%; } .event-item-style-1 h1, .event-item-style-1 h5 { font-family: var(--main-font); font-weight: 700; letter-spacing: 2px; padding: 0.75rem 0; color: var(--heading-color); } .event-item-style-1 h1 { font-size: 4.7rem; padding: 0px; border-bottom: 1px solid var(--icon-color); } .event-item-style-1 h5 { font-size: 1rem; } .event-item-style-1 .details p { margin: 1.8rem 0 0.8rem 0; } .event-item-style-1 .details .main-btn { margin: 2rem 0; } .event-item-style-1 .details .event-infos .info { height: 3rem; display: flex; align-items: center; } .event-item-style-1 .details .event-infos .info span { font-size: 11px; margin: 0; color: var(--dark-grey-3); } .event-item-style-1 .details .event-infos .info i { color: var(--heading-color); margin-right: 0.5rem; } .event-item-style-1.odd-event .details { padding-left: 3rem; } .event-item-style-1.even-event .details { padding-right: 3rem; order: 1; } .event-item-style-1.even-event .media { order: 2; } .event-item-style-1.even-event .date { text-align: right; order: 3; } .events-section { padding: 3rem 0 2rem 0; } /*----------------------------- Testimonial Slider -----------------------------*/ .testimonial-carousel-area { background-color: var(--light-blue-2); } .testimonial-carousel-area .section-title { text-align: center; margin-bottom: 45px; } .testimonial-carousel-area .section-title .title { font-weight: 500; font-family: var(--heading-font); } .testimonial-style-1 { position: relative; padding: 60px 0; } @media only screen and (max-width: 991px) { .testimonial-style-1 { padding: 60px; } } @media only screen and (max-width: 490px) { .testimonial-style-1 { padding: 30px; } } .testimonial-style-1 .author-meta { margin-top: 30px; } .testimonial-style-1 .testimonial-slider-arrows { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; } @media only screen and (max-width: 420px) { .testimonial-style-1 .testimonial-slider-arrows { display: none; } } .testimonial-style-1 .testimonial-slider-arrows .slick-arrow { position: absolute; left: 30px; top: 50%; font-size: 20px; transition: 500ms all; cursor: pointer; transform: translateY(-50%); } .testimonial-style-1 .testimonial-slider-arrows .slick-arrow i { color: var(--dark-grey-4); } .testimonial-style-1 .testimonial-slider-arrows .slick-arrow:hover i { color: var(--dark-blue-1); } .testimonial-style-1 .testimonial-slider-arrows .slick-arrow.slick-next { left: auto; right: 30px; } .testimonial-style-1 .testimonial-slider-dots { position: absolute; left: -70px; bottom: 30px; } .testimonial-style-1 .testimonial-slider-dots ul { margin: 0; padding: 0; list-style: none; } .testimonial-style-1 .testimonial-slider-dots ul li { display: block; position: relative; z-index: 0; margin: 5px 0; height: 20px; transition: 500ms all; } .testimonial-style-1 .testimonial-slider-dots ul li.slick-active { min-height: 50px; } .testimonial-style-1 .testimonial-slider-dots ul li.slick-active:after { background-color: var(--active-icon-color); height: 50px; } .testimonial-style-1 .testimonial-slider-dots ul li:after { position: absolute; left: 0; top: 0; width: 3px; height: 20px; background-color: var(--icon-color); content: ""; transition: 500ms all; } .testimonial-style-1 .testimonial-slider-dots ul li button { display: none; } .testimonial-style-1 .testimonial-thumbnail-slider { height: 120px; overflow: hidden; } .testimonial-style-1 .testimonial-thumbnail-slider .slick-track { margin-left: -50px !important; } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb+.single-testimonial-thumb { margin-left: 10px; } @media only screen and (max-width: 490px) { .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb+.single-testimonial-thumb { margin-left: 20px; } } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active { position: relative; min-width: 100px; } @media only screen and (max-width: 490px) { .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active { min-width: 80px; margin-left: 20px; } } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active .img-wrap:after { display: none !important; } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active .img { width: 100px !important; height: 100px !important; margin-top: -22px !important; } @media only screen and (max-width: 490px) { .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active .img { width: 80px !important; height: 80px !important; margin-top: -22px !important; } } @media only screen and (max-width: 384px) { .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active .img { margin-left: 8px; } } @media only screen and (max-width: 360px) { .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active .img { margin-left: 14px; } } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb .img { background-size: cover; background-position: top; } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb .img-wrap { display: inline-block; position: relative; z-index: 0; } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb .img-wrap:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); content: ""; } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(even) { margin-top: 30px; } @media only screen and (max-width: 490px) { .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(even) { margin-top: 35px; } } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(even) .img { width: 65px; height: 65px; margin: 0 auto; transition: 0.3s ease-in; background-position: center; background-size: cover; } @media only screen and (max-width: 490px) { .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(even) .img { width: 40px; height: 40px; } } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(odd) { margin-top: 35px; } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(odd) .img { width: 55px; height: 55px; margin: 0 auto; transition: 0.3s ease-in; background-position: center; background-size: top; } .testimonial-style-1 .testimonial-description-slider { margin-top: 50px; } @media only screen and (max-width: 490px) { .testimonial-style-1 .testimonial-description-slider { margin-top: 0px; } } .testimonial-style-1 .testimonial-description-slider .single-testimonial-item { text-align: center; padding: 0 100px; } @media only screen and (max-width: 991px) { .testimonial-style-1 .testimonial-description-slider .single-testimonial-item { padding: 0px; } } .testimonial-style-1 .testimonial-description-slider .single-testimonial-item p { font-family: "Comfortaa", cursive; color: var(--light-grey-2); font-size: 15px; font-weight: 400; line-height: 1.6; } .testimonial-style-1 .testimonial-description-slider .single-testimonial-item .author-meta .title { font-size: 14px; font-weight: 400; color: var(--dark-grey-4); } .testimonial-style-1 .testimonial-description-slider .single-testimonial-item .author-meta .title .designation { font-size: 14px; font-weight: 400; } .testimonial-style-2 { position: relative; } .testimonial-style-2 .container { background-color: var(--white); padding: 3rem; position: relative; } .testimonial-style-2 .container .heading { height: 60px; background: url("../img/icons/caro-bac.png") no-repeat center center; } .testimonial-style-2 .container .heading h3 { font-family: var(--heading-font); font-weight: 500; padding: 1rem 0; color: var(--dark-indigo); } .testimonial-style-2 .container .author-meta { margin-top: 30px; } .testimonial-style-2 .container .testimonial-slider-arrows { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; } @media only screen and (max-width: 420px) { .testimonial-style-2 .container .testimonial-slider-arrows { display: none; } } .testimonial-style-2 .container .testimonial-slider-arrows .slick-arrow { position: absolute; left: 30px; top: 50%; font-size: 20px; transition: 500ms all; cursor: pointer; transform: translateY(-50%); } .testimonial-style-2 .container .testimonial-slider-arrows .slick-arrow i { color: var(--dark-grey-4); } .testimonial-style-2 .container .testimonial-slider-arrows .slick-arrow:hover i { color: var(--dark-blue-1); } .testimonial-style-2 .container .testimonial-slider-arrows .slick-arrow.slick-next { left: auto; right: 30px; } .testimonial-style-2 .container .slider-indicator-2 { right: -50px; top: 70px; } .testimonial-style-2 .container .slider-indicator-2 .slick-dots button { color: var(--dark-indigo); } .testimonial-style-2 .container .slider-indicator-2 .slick-dots .slick-active button { color: var(--dark-blue-1); } .testimonial-style-2 .container .slider-indicator-3 { bottom: 0px; left: -20px; } .testimonial-style-2 .container .slider-indicator-3 * { color: var(--dark-indigo); } .testimonial-style-2 .container .testimonial-thumbnail-slider { height: 120px; overflow: hidden; } .testimonial-style-2 .container .testimonial-thumbnail-slider .slick-track { margin-left: -50px !important; } .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb+.single-testimonial-thumb { margin-left: 10px; } @media only screen and (max-width: 490px) { .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb+.single-testimonial-thumb { margin-left: 20px; } } .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active { position: relative; min-width: 100px; } @media only screen and (max-width: 490px) { .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active { min-width: 80px; margin-left: 20px; } } .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active .img-wrap:after { display: none !important; } .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active .img { width: 100px !important; height: 100px !important; margin-top: -22px !important; } @media only screen and (max-width: 490px) { .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active .img { width: 80px !important; height: 80px !important; margin-top: -22px !important; } } @media only screen and (max-width: 384px) { .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active .img { margin-left: 8px; } } @media only screen and (max-width: 360px) { .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb.slick-current.slick-active .img { margin-left: 14px; } } .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb .img { background-size: cover; background-position: top; } .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb .img-wrap { display: inline-block; position: relative; z-index: 0; } .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb .img-wrap:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(36, 46, 80, 0.7); content: ""; } .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(even) { margin-top: 30px; } @media only screen and (max-width: 490px) { .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(even) { margin-top: 35px; } } .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(even) .img { width: 65px; height: 65px; margin: 0 auto; transition: 0.3s ease-in; background-position: center; background-size: cover; } @media only screen and (max-width: 490px) { .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(even) .img { width: 40px; height: 40px; } } .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(odd) { margin-top: 35px; } .testimonial-style-2 .container .testimonial-thumbnail-slider .single-testimonial-thumb:nth-child(odd) .img { width: 55px; height: 55px; margin: 0 auto; transition: 0.3s ease-in; background-position: center; background-size: top; } .testimonial-style-2 .container .testimonial-description-slider { margin-top: 50px; } @media only screen and (max-width: 490px) { .testimonial-style-2 .container .testimonial-description-slider { margin-top: 0px; } } .testimonial-style-2 .container .testimonial-description-slider .single-testimonial-item { text-align: center; padding: 0 100px; } @media only screen and (max-width: 991px) { .testimonial-style-2 .container .testimonial-description-slider .single-testimonial-item { padding: 0px; } } .testimonial-style-2 .container .testimonial-description-slider .single-testimonial-item p { color: var(--light-grey-6); font-size: 15px; font-weight: 400; line-height: 1.6; } .testimonial-style-2 .container .testimonial-description-slider .single-testimonial-item .author-meta .title { font-size: 14px; font-weight: 400; color: var(--dark-grey-6); } .testimonial-style-2 .container .testimonial-description-slider .single-testimonial-item .author-meta .title .designation { font-size: 14px; font-weight: 400; } .testimonials-style-3 .container { position: relative; } .testimonials-style-3 .container .testimonial { position: relative; z-index: 2; } .testimonials-style-3 .container .testimonial * { color: var(--white); } .testimonials-style-3 .container .testimonial h5 { font-weight: 700; margin: 0; } .testimonials-style-3 .container .testimonial span { font-size: 12px; } .testimonials-style-3 .container .testimonial img { display: block; height: 65px; margin: 1.5rem 0 0.25rem 0; } .testimonials-style-3 .container .testimonial .testimonial-slider-wrapper { position: relative; } .testimonials-style-3 .container .testimonial .testimonial-slider-wrapper .slick-list { padding: 0 !important; } .testimonials-style-3 .container .testimonial .testimonial-slider-wrapper .testimonial-slider { min-height: 420px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; } .testimonials-style-3 .container .testimonial .testimonial-slider-wrapper .testimonial-slider .content { margin: 7rem 14rem 14rem 14rem; position: relative; z-index: 2; } .testimonials-style-3 .container .testimonial .testimonial-slider-wrapper .testimonial-slider .overlay { background-color: rgba(51, 62, 72, 0.8); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .testimonials-style-3 .container .lg-text { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font-size: 8.5rem; opacity: 0.2; z-index: 11; color: var(--white); } .testimonials-style-3 .container .carousel-controlar { display: flex; flex-direction: column; position: absolute; top: 40%; left: -20px; } .testimonials-style-3 .container .carousel-controlar .icon { height: 50px; width: 10px; cursor: pointer; margin: 1rem 0; } .testimonials-style-3 .container .pagination-style-3 { position: absolute; right: -18%; top: 45%; height: 100px; display: flex; align-items: center; overflow: hidden; width: 200px; } .features-section .container>p { width: 80%; margin: 0 auto; } .features-section .container h2 { margin: 4rem 0 3rem 0; } .features-section .container .icon { font-size: 10px; } .features-section .container .media img { width: 100%; } .features-section .container .row { margin: 5rem 0; } /*----------------------------- Accordion Item -----------------------------*/ .accordion-wrapper .card { border: none; background-color: transparent; text-align: left; } .accordion-wrapper .card+.card { margin-top: 20px; } .accordion-wrapper .card .card-header { background-color: transparent; padding: 0; border: none; } .accordion-wrapper .card .card-header a { display: block; font-size: 16px; line-height: 26px; font-weight: 700; background-color: var(--light-blue-2); padding: 10px 30px; cursor: pointer; position: relative; font-family: "Comfortaa", cursive; color: #555; } .accordion-wrapper .card .card-header a:after { position: absolute; right: 30px; top: 10px; content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; } .accordion-wrapper .card .card-header a[aria-expanded=false] { background-color: var(--icon-color); color: var(--white); font-weight: 400; } .accordion-wrapper .card .card-header a[aria-expanded=false]:after { content: ""; } .accordion-wrapper .card .card-body { background-color: transparent; padding: 20px 30px 0px; font-family: "Comfortaa", cursive; color: var(--light-grey-2); font-size: 14px; font-weight: 400; } .blog-section { background-color: var(--light-grey-3); padding: 4rem 0; } .blog-section .container .blog-carousel-wrap { position: relative; margin: 6rem auto 4rem auto; } .blog-section .container .blog-carousel-wrap .blog-carousel-controls { height: 100%; position: absolute; width: 100%; z-index: 1; } .blog-section .container .blog-carousel-wrap .blog-carousel-controls .dots { position: absolute; left: -80px; top: 250px; margin-top: 20px; } .blog-section .container .blog-carousel-wrap .blog-carousel-controls .dots div { display: block; height: 20px; width: 3px; background-color: var(--icon-color); transition: 500ms all; } .blog-section .container .blog-carousel-wrap .blog-carousel-controls .dots div.active { height: 50px; background-color: var(--dark-blue-2); } .blog-section .container .blog-carousel-wrap .blog-carousel-controls .dots div+div { margin-top: 5px; } .blog-section .container .blog-carousel-wrap .blog-carousel-controls .owl-next, .blog-section .container .blog-carousel-wrap .blog-carousel-controls .owl-prev { position: absolute; top: 250px; transform: translateY(-50%); font-size: 20px; cursor: pointer; } .blog-section .container .blog-carousel-wrap .blog-carousel-controls .owl-next i, .blog-section .container .blog-carousel-wrap .blog-carousel-controls .owl-prev i { color: var(--dark-grey-3); } .blog-section .container .blog-carousel-wrap .blog-carousel-controls .owl-prev { left: -55px; } .blog-section .container .blog-carousel-wrap .blog-carousel-controls .owl-next { right: -50px; } .blogs-section-2 .container { position: relative; } .blogs-section-2 .container .rotated-text { color: rgba(1, 148, 186, 0.1); z-index: -1; } .blogs-section-2 .container .main-btn { margin: 4rem auto; } .blogs-section-2 .container .slider-indicator-2 { right: -12%; top: 50%; transform: translateY(-50%); } .blogs-section-2 .container .slider-indicator-2 .slick-dots button { color: var(--dark-indigo); } .blogs-section-2 .container .slider-indicator-2 .slick-dots .slick-active button { color: var(--dark-blue-1); } .blogs-section-2 .container .slider-indicator-3 { left: -30px; bottom: 20px; } .blogs-section-2 .container .slider-indicator-3 * { color: var(--dark-indigo); } .blog-item-style-2 { border: 0; margin: 0 1rem; text-align: center; } .blog-item-style-2 .card-img-top { border-radius: 0; } .blog-item-style-2 .card-body { background-color: var(--light-grey-5); } .blog-item-style-2 .card-body .card-text { text-transform: uppercase; letter-spacing: 1px; color: var(--dark-grey-4); } .blog-item-style-2 .card-body h5 { line-height: 1.5; color: var(--dark-grey-4); } .achievement-section h1 { font-family: var(--main-font); } .achievement-section h4 { font-size: 18px; color: rgba(85, 85, 85, 0.9); } .achievement-section .row { padding: 2rem 0; } .achievements-style-2 { background: url("../img/University/Homepage_4/cournter_bg.png") no-repeat center center/cover; padding: 4rem 0; position: relative; } .achievements-style-2 .overaly { background: rgba(36, 46, 80, 0.8); position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .achievements-style-2 .container { position: relative; z-index: 9; } .achievements-style-2 .container * { color: var(--white); } .achievements-style-2 .container h4 { font-weight: 400; } .footer-section { margin-top: 6vh; } .footer-section .divider { width: 100%; height: 1px; background-color: var(--light-grey-4); margin: 0; } .footer-section .footer-content { padding: 4rem 0; } .footer-section .footer-content h5 { display: inline-block; color: var(--dark-grey-3); border-bottom: 1px solid var(--dark-blue-4); padding-bottom: 0.5rem; } .footer-section .footer-content a { font-size: 15px; color: var(--light-grey-2); } .footer-section .footer-content a:hover { color: var(--dark-blue-1); } .footer-section .footer-content li { margin: 0.5rem 0; } .footer-section .footer-content .contact-links .social-icons { margin: 1.4rem auto; } .footer-section .footer-content .contact-links .social-icons i { font-size: 15px; color: var(--dark-grey-3); } .footer-section .footer-content .brand-logo { height: 45px; margin-bottom: 3rem; } .footer-section .footer-content .newsletter p { margin: 1.5rem 0; } .footer-section .footer-content .newsletter form * { height: 35px; margin: 0; border: 0; } .footer-section .footer-content .newsletter form input { width: 70%; background-color: var(--light-blue-2); padding: 0.25rem 1.5rem; } .footer-section .footer-content .newsletter form input::placeholder { color: var(--icon-color); font-size: 12px; } .footer-section .footer-content .newsletter form input:focus { outline: 1px solid var(--dark-blue-1); } .footer-section .footer-content .newsletter form .main-btn { margin: 0; } .footer-section .copyright { background-color: var(--active-icon-color); padding: 2rem 0; } .footer-section .copyright .container-fluid { position: relative; } .footer-section .copyright .container-fluid p { margin: 0; color: var(--white); font-size: 12px; font-weight: 300; } .footer-section .copyright .container-fluid span { color: var(--light-red); } .footer-section .copyright #scroll-top { display: inline-block; background-color: var(--icon-color); position: absolute; right: 60px; bottom: 25px; height: 35px; margin-bottom: -20px; width: 35px; border-radius: 4px; cursor: pointer; transition: all 0.4s; z-index: 9; } .footer-section .copyright #scroll-top i { display: block; color: var(--white); } .footer-section .copyright #scroll-top:hover { background-color: var(--dark-blue-1); } .footer-section .copyright .active { margin: 0px !important; position: fixed !important; transition: 0.3s; } .footer-style-2 { margin-top: 6vh; background-color: var(--light-grey-4); } .footer-style-2 .footer-content { padding: 4rem 0; } .footer-style-2 .footer-content h5 { display: inline-block; border-bottom: 1px solid var(--dark-blue-1); padding-bottom: 0.5rem; color: var(--dark-grey-4); } .footer-style-2 .footer-content a { font-size: 15px; color: var(--light-grey-2); } .footer-style-2 .footer-content a:hover { color: var(--dark-blue-1); } .footer-style-2 .footer-content li { margin: 0.5rem 0; } .footer-style-2 .footer-content .brand-logo { height: 45px; margin-bottom: 3rem; } .footer-style-2 .footer-content .contact-links .social-icons { margin: 1.4rem auto; } .footer-style-2 .footer-content .contact-links .social-icons i { color: var(--dark-grey-4); font-size: 15px; } .footer-style-2 .footer-content .ins-feed ul { margin-top: 2rem; display: flex; flex-wrap: wrap; } .footer-style-2 .footer-content .ins-feed ul li { margin: 0; width: 33%; padding: 3px; } .footer-style-2 .footer-content .twi-feed .post { margin-top: 2rem; display: flex; margin-bottom: 2rem; cursor: pointer; } .footer-style-2 .footer-content .twi-feed .post i { font-size: 20px; margin: 0; color: var(--active-icon-color); } .footer-style-2 .footer-content .twi-feed .post .post-detail { margin-left: 1rem; } .footer-style-2 .footer-content .twi-feed .post .post-detail .name { font-size: 11px; font-weight: 400; } .footer-style-2 .footer-content .twi-feed .post .post-detail p { margin-bottom: 0.25rem; font-size: 12px; line-height: 18px; font-weight: 700; color: var(--dark-grey-4); } .footer-style-2 .footer-content .twi-feed .post .post-detail .time { font-size: 9px; } .footer-style-2 .footer-content .twi-feed .post:hover i { color: var(--dark-grey-4); } .footer-style-2 .footer-content .newsletter p { margin: 1.5rem 0; } .footer-style-2 .footer-content .newsletter form * { height: 35px; margin: 0; border: 0; } .footer-style-2 .footer-content .newsletter form input { width: 70%; background-color: var(--dark-grey-4); padding: 0.25rem 1.5rem; color: var(--white); } .footer-style-2 .footer-content .newsletter form input::placeholder { color: var(--white); font-size: 12px; } .footer-style-2 .footer-content .newsletter form input:focus { outline: 1px solid var(--dark-blue-1); } .footer-style-2 .footer-content .newsletter form .main-btn { width: 28%; margin: 0; } .footer-style-2 .copyright { background-color: var(--dark-grey-4); position: relative; } .footer-style-2 .copyright .container-fluid { position: relative; } .footer-style-2 .copyright .container-fluid p { padding: 2rem 0; margin: 0; color: var(--white); font-size: 12px; font-weight: 300; } .footer-style-2 .copyright .container-fluid span { color: var(--light-red); } .footer-style-2 .copyright #scroll-top { display: inline-block; background-color: var(--white); position: absolute; right: 60px; bottom: 25px; height: 35px; margin-bottom: -20px; width: 35px; border-radius: 4px; cursor: pointer; transition: all 0.4s; } .footer-style-2 .copyright #scroll-top .icon { display: block; fill: var(--dark-grey-4); } .footer-style-2 .copyright #scroll-top:hover { background-color: var(--dark-blue-1); } .footer-style-2 .copyright .active { margin: 0px !important; position: fixed !important; transition: 0.3s; } .footer-style-3 { margin-top: 6vh; background-color: var(--light-grey-3); } .footer-style-3 .footer-content { padding: 6rem 0 4rem 0; } .footer-style-3 .footer-content * { color: var(--dark-indigo); } .footer-style-3 .footer-content h5 { display: inline-block; border-bottom: 1px solid var(--dark-indigo); padding-bottom: 0.5rem; margin-bottom: 2rem; } .footer-style-3 .footer-content a { font-size: 15px; font-weight: 400; } .footer-style-3 .footer-content a:hover { font-weight: 700; } .footer-style-3 .footer-content li { margin: 0.5rem 0; } .footer-style-3 .footer-content .brand-logo { height: 45px; margin-bottom: 3rem; } .footer-style-3 .footer-content .contact-links .social-icons { margin: 1.4rem auto; } .footer-style-3 .footer-content .contact-links .social-icons i { color: var(--dark-indigo); font-size: 15px; } .footer-style-3 .footer-content .ins-feed ul { display: flex; flex-wrap: wrap; } .footer-style-3 .footer-content .ins-feed ul li { margin: 0; width: 33%; padding: 4px; } .footer-style-3 .copyright { background-color: var(--light-grey-3); position: relative; } .footer-style-3 .copyright .container-fluid { position: relative; } .footer-style-3 .copyright .container-fluid p { padding: 2rem 0; margin: 0; color: var(--dark-indigo); font-size: 12px; font-weight: 700; } .footer-style-3 .copyright .container-fluid span { color: var(--light-red); } .footer-style-3 .copyright #scroll-top { display: inline-block; background-color: var(--dark-indigo); position: absolute; right: 60px; bottom: 25px; height: 35px; margin-bottom: -20px; width: 35px; border-radius: 4px; cursor: pointer; transition: all 0.4s; } .footer-style-3 .copyright #scroll-top .icon { display: block; fill: var(--light-grey-4); } .footer-style-3 .copyright #scroll-top:hover .icon { fill: var(--white); } .footer-style-3 .copyright .active { margin: 0px !important; position: fixed !important; transition: 0.3s; } .footer-style-4 { background-color: var(--dark-grey-3); } .footer-style-4 * { color: var(--white); } .footer-style-4 .red { color: var(--red); } .footer-style-4 .footer-content { position: relative; padding: 8px 0; } .footer-style-4 .footer-content .row { height: 80px; display: flex; justify-content: center; align-items: center; } .footer-style-4 .footer-content .row .footer-links { display: flex; align-items: center; justify-content: center; margin: 0; } .footer-style-4 .footer-content .row .footer-links li { margin: 0 1rem; } .footer-style-4 .footer-content .row .footer-links li a:after { content: ""; width: 0; height: 1px; background-color: var(--white); display: block; transition: all 0.5s; } .footer-style-4 .footer-content .row .footer-links li:hover a { color: var(--white); } .footer-style-4 .footer-content .row .footer-links li:hover a:after { width: 100%; } .footer-style-4 .footer-content .row .social-icons i { color: var(--white); margin: 0 6px; } .footer-style-4 .footer-content #scroll-top { display: inline-block; background-color: var(--white); position: absolute; right: -10px; bottom: 25px; height: 35px; margin-bottom: -20px; width: 35px; border-radius: 4px; cursor: pointer; transition: all 0.4s; } .footer-style-4 .footer-content #scroll-top .icon { display: block; fill: var(--dark-grey-2); } .footer-style-4 .footer-content #scroll-top:hover .icon { fill: var(--dark-indigo); } .footer-style-4 .footer-content .active { margin: 0px !important; position: fixed !important; transition: 0.3s; } .footer-style-5 { margin-top: 6vh; background-color: var(--dark-grey-4); } .footer-style-5 .footer-content { padding: 6rem 0 4rem 0; } .footer-style-5 .footer-content * { color: var(--white); } .footer-style-5 .footer-content h5 { display: inline-block; border-bottom: 1px solid var(--active-icon-color); padding-bottom: 0.5rem; margin-bottom: 2rem; } .footer-style-5 .footer-content a { font-size: 15px; font-weight: 400; } .footer-style-5 .footer-content a:hover { color: var(--icon-color); } .footer-style-5 .footer-content li { margin: 0.5rem 0; } .footer-style-5 .footer-content>div { display: flex; flex-direction: column; align-items: center; } .footer-style-5 .footer-content>div:not(:last-child) { position: relative; } .footer-style-5 .footer-content>div:not(:last-child)::after { content: ""; display: inline-block; height: 100%; width: 1px; background-color: var(--white); position: absolute; right: 0; top: 0; } .footer-style-5 .footer-content .col-divider { height: 200px; width: 1px; background-color: var(--white); } .footer-style-5 .footer-content .contact-links .social-icons { margin-top: 3rem; margin-bottom: 1rem; } .footer-style-5 .footer-content .contact-links .social-icons i { color: var(--white); } .footer-style-5 .footer-content .brand-logo { height: 45px; margin-bottom: 3rem; } .footer-style-5 .footer-content .ins-feed ul { display: flex; flex-wrap: wrap; } .footer-style-5 .footer-content .ins-feed ul li { margin: 0; width: 33%; padding: 4px; } .footer-style-5 .copyright { background-color: var(--dark-grey-4); position: relative; } .footer-style-5 .copyright .container-fluid { position: relative; } .footer-style-5 .copyright .container-fluid p { padding: 2rem 0; margin: 0; color: var(--white); font-size: 12px; font-weight: 400; } .footer-style-5 .copyright .container-fluid span { color: var(--light-red); } .footer-style-5 .copyright #scroll-top { display: inline-block; background-color: var(--light-grey-4); position: absolute; right: 60px; bottom: 25px; height: 35px; margin-bottom: -20px; width: 35px; border-radius: 4px; cursor: pointer; transition: all 0.4s; } .footer-style-5 .copyright #scroll-top .icon { display: block; fill: var(--dark-indigo); } .footer-style-5 .copyright .active { margin: 0px !important; position: fixed !important; transition: 0.3s; } .price-cards { margin: 4rem 2rem; position: relative; display: flex; justify-content: center; align-items: center; } .price-cards .price-card { background-color: var(--light-grey-3); width: 32%; padding: 3rem 2rem; position: relative; cursor: pointer; transition: all 0.3s; } .price-cards .price-card *:not(.main-btn) { color: var(--dark-blue-2); } .price-cards .price-card>i { font-size: 5rem; margin-bottom: 2rem; } .price-cards .price-card h4 { font-weight: 700; margin-bottom: 2px; } .price-cards .price-card:hover { background-color: var(--white); } .price-cards .price-card:hover *:not(.main-btn) { color: var(--dark-grey-4); } .price-cards .price-card .price { display: flex; justify-content: center; margin: 1rem 0; } .price-cards .price-card .price i { margin: 0.5rem 0.25rem; } .price-cards .price-card .price h1 { font-size: 4.5rem; font-family: var(--main-font); margin-bottom: 0; } .price-cards .price-card .price .time { margin-top: auto; margin-bottom: 1rem; } .price-cards .price-card .features .feature { display: flex; align-items: center; text-align: left; } .price-cards .price-card .features .feature i { font-size: 10px; margin: 0.25rem 1rem 0.25rem 0; } .price-cards .price-card .features .feature p { font-size: 11px; margin-bottom: 0; line-height: 15px; } .price-cards .price-card .main-btn { margin: 2rem auto 1rem auto; } .price-cards .active-price-card { background-color: var(--white); width: 36%; padding: 5rem 3rem; z-index: 10; position: relative; box-sizing: border-box; box-shadow: 0 3px 8px 4px var(--light-grey-1); } .price-cards .active-price-card *:not(.main-btn) { color: var(--dark-grey-4); } .price-cards .active-price-card .features { margin: 1rem 0; } .price-cards .active-price-card .features .feature i { color: var(--dark-blue-1); } .price-cards .active-price-card .main-btn { margin: 3rem auto 0 auto; } .basic-package-table { background-color: var(--light-grey-3); border: 2px solid var(--light-grey-1); font-family: var(--main-font); } .basic-package-table * { border: none; color: var(--dark-grey-3); } .basic-package-table tr { border-bottom: 1px solid var(--light-grey-1); margin: 0 2rem; } .basic-package-table tr th, .basic-package-table tr td { font-size: 14px; font-weight: 400; padding: 1rem; } .basic-package-table tr th i, .basic-package-table tr td i { margin: 0; color: var(--dark-blue-3); } .basic-package-table tr td { font-weight: 700; color: var(--dark-blue-1); text-align: center; } .basic-package-table tbody tr>th { padding-left: 4rem; } .basic-package-table thead th { text-align: center; font-weight: 600; } .stripped-package-table { border: 2px solid var(--light-grey-1); font-family: var(--main-font); } .stripped-package-table * { border: none; } .stripped-package-table tr { border-bottom: 1px solid var(--light-grey-1); margin: 0 2rem; } .stripped-package-table tr th, .stripped-package-table tr td { font-size: 14px; font-weight: 400; padding: 1rem; } .stripped-package-table tr th i, .stripped-package-table tr td i { margin: 0; color: var(--dark-blue-3); } .stripped-package-table tr td { font-weight: 700; color: var(--dark-blue-1); text-align: center; } .stripped-package-table tbody tr>th { padding-left: 4rem; } .stripped-package-table tbody tr:nth-child(odd) { background-color: var(--light-grey-3); } .stripped-package-table thead th { text-align: center; font-weight: 600; } .mantra .container { background-color: var(--light-grey-3); position: relative; } .mantra .container .content { padding: 4rem 3rem; } .mantra .container .content h2 { margin-bottom: 2rem; } .mantra .container .media { padding: 0px; } .mantra .container .media .img-fluid { height: 100%; width: 100%; } .mantra .container .halfway-btn { left: 0%; top: 70%; } .mission-section .content, .vision-section .content { width: 85%; margin: 0 auto; } .values-section .content { padding: 2rem; } .values-section .container .top-content .media { padding: 0; } .values-section .container .top-content .row { background-color: var(--light-grey-3); } .values-section .container .top-content .row img { width: 85%; } .values-section .container .top-content .media { margin-top: 3%; padding-left: 60px; } .values-section .container .top-content .content { padding-right: 60px; } .values-section .container .bottom-content .row { background-color: var(--light-grey-5); padding-top: 2rem; } .values-section .container .bottom-content .row h2 { margin-bottom: 1.5rem; } .teachers-section { background-color: var(--light-grey-5); padding: 3rem 0; position: relative; } teachers-carousel { width: 250px; height: 400px; } teachers-carousel img { height: 30vh; } .teachers-section .teachers-carousel .owl-nav div { position: absolute; left: 0; top: 0; width: 40px; height: 40px; text-align: center; line-height: 40px; color: var(--white); background-color: rgba(51, 62, 72, 0.8); transition: all 500ms; } .teachers-section .teachers-carousel .owl-nav div:hover { background-color: #333e48; } .teachers-section .teachers-carousel .owl-nav div i { color: var(--white); } .teachers-section .teachers-carousel .owl-nav div.owl-next { left: auto; right: 0; top: auto; bottom: 90px; } .teachers-section .dots .owl-dot { height: 20px; width: 3px; margin: 5px 0; background-color: var(--icon-color); transition: 500ms all; } .teachers-section .dots .owl-dot+.active { height: 50px; background-color: var(--active-icon-color); } .teachers-section .dots { position: absolute; left: 4vw; top: 50%; } .opportunity-section h2 { margin-bottom: 0.75rem; } .courses-section .main-btn { margin: 3rem auto; position: relative; transition: 0.3s; } .courses-section .main-btn:after { content: "⭢"; position: absolute; opacity: 0; right: 20px; transition: 0.3s; } .courses-section .main-btn:hover { padding-right: 28px; padding-left: 8px; } .courses-section .main-btn:hover:after { opacity: 1; right: 15px; } .membership-section { background-color: rgba(158, 182, 188, 0.3); padding: 3rem 0 1rem 0; } .membership-section .price-cards .rotated-text { font-size: 8.5rem; right: -34%; bottom: 36%; } .membership-section .package-tables { margin: 4rem 2rem; display: none; opacity: 0; animation: fadeIn 0.5s; } #features .container .row h2 { margin: 0; margin-bottom: 3rem; } .teacher-details .container-fluid { margin-top: 6rem; padding-left: 0px; } .teacher-details .container-fluid .media { background: url("../img/University/teachers_profile/teacher.png") no-repeat center center/cover; min-height: 800px; } .teacher-details .container-fluid .media .side-social-icons { top: 5%; left: 10%; } .teacher-details .container-fluid .teacher-brif h2 { margin: 2rem 0; } .teacher-details .container-fluid .teacher-brif h3 { font-family: var(--heading-font); } .teacher-details .container-fluid .teacher-brif h6 { font-weight: 600; } .teacher-details .container-fluid .teacher-brif .divider { height: 1px; width: 140px; background-color: var(--icon-color); margin: 0; } .teacher-details .container-fluid .teacher-brif .teacher-rating { display: flex; align-items: center; } .teacher-details .container-fluid .teacher-brif .teacher-rating .rate-detail { display: flex; } .teacher-details .container-fluid .teacher-brif .teacher-rating .rate-detail span { font-size: 11px; padding: 2px; } .teacher-details .container-fluid .teacher-brif .teacher-rating .rate-detail .rating { color: var(--dark-grey-3); } .teacher-details .container-fluid .teacher-brif .teacher-rating .rate-detail .raters { color: var(--icon-color); } .teacher-details .container-fluid .content { padding: 0 3rem; position: relative; } .teacher-details .container-fluid .content .show { visibility: visible; opacity: 1; transform: scale(1); } .teacher-details .container-fluid .content .small-btn { margin: 1rem 0 5rem 0; } .teacher-details .container-fluid .content .progress-bars { padding: 0; } .message-teacher .container { background-color: var(--light-grey-3); } .message-teacher .container h2 { margin-bottom: 2rem; } .message-teacher .container .media { padding: 0; } .message-teacher .container .media img { height: 100%; } .message-teacher .container .content { padding: 3rem 2rem; } .message-teacher .container .content .form-style-2 { margin: 0; } .message-teacher .container .content .form-style-2 label { margin-bottom: 0; font-size: 11px; } .message-teacher .container .content .form-style-2 .form-group { margin-bottom: 1rem; } .message-teacher .container .content .form-style-2 .form-group input::placeholder { font-family: var(--main-font); color: var(--active-icon-color); } .message-teacher .container .content .form-style-2 .main-btn { margin: 2rem 0px 0px 0px; } .teacher-reviews h2 { margin: 2rem 0 1.5rem 0; } .teacher-reviews .review-nums { color: var(--dark-grey-4); } .teacher-reviews .view-more { margin: 3rem auto; text-align: center; } .teacher-reviews .view-more a { font-size: 15px; font-weight: 700; } .post-comment .container h2 { margin: 1.5rem 0 2rem 0; } .post-comment .container .rate-teacher { display: flex; align-items: center; } .post-comment .container .rate-teacher p { margin: 0 1rem 0 0; font-size: 15px; color: var(--dark-grey-3); } .post-comment .container .rate-teacher .star { font-size: 12px; } .blog-sum-item-style-1 { display: flex; align-items: center; } .blog-sum-item-style-1 .content p, .blog-sum-item-style-1 .content h6 { color: var(--dark-grey-3); } .blog-sum-item-style-1 .content p { margin: 1.5rem 0; } .blog-sum-item-style-1 .content .date { color: var(--dark-grey-4); margin: 1rem 0; letter-spacing: 1px; } .blog-sum-item-style-1 .content .react { display: flex; align-items: center; margin: 0.25rem 0; } .blog-sum-item-style-1 .content .react p, .blog-sum-item-style-1 .content .react i { color: var(--dark-grey-4); font-size: 11px; } .blog-sum-item-style-1 .content .react i { margin: 0 0.5rem 0 0; } .blog-sum-item-style-1 .content .react p { margin: 0; } .blog-sum-item-style-1 .content .small-btn { margin: 3rem 0 0 0; } /* vertical tabs */ .vertical_tabs .tabbable .nav>li { display: inherit; position: relative; width: 100%; } .vertical_tabs { overflow: hidden; } .vertical_tabs .tabbable .nav>li>a, .vertical_tabs .tabbable .nav>li>a>span { -webkit-transition: color .2s ease-out; transition: color .2s ease-out; } .vertical_tabs .tabbable .nav>li>a>span span { margin: 0; } .vertical_tabs .tabbable .nav>li>a:focus, .vertical_tabs .tabbable .nav>li>a:hover { background-color: transparent; border-right: 0; } .vertical_tabs .tabbable .nav>li>a.active, .vertical_tabs .tabbable .nav>li>a.active>span, .vertical_tabs .tabbable .nav>li>a:hover, .vertical_tabs .tabbable .nav>li>a:hover>span { color: #cd2122 !important; } .vertical_tabs .tabbable .nav>li:first-child { border-top: 0; } .vertical_tabs .tabbable .tab-content>.tab-pane>h4 { margin: 0 0 25px; } /* Style1 specific */ .vertical_tabs.kl-style-1 .tabbable .nav>li>a.active { box-shadow: inset -3px 0 0 0 #cd2122; } .vertical_tabs.kl-style-1 .tabbable .nav>li>a { line-height: 22px; padding: 10px 20px 10px 0; margin-right: -1px; font-weight: 800; color: #8f8f8f; font-size: 15px; width: 100%; } .vertical_tabs.kl-style-1 .tabbable .nav>li>a>span { padding: 6px 0 7px; color: #C7C7C7; margin-right: 8px; line-height: 1; display: inline-block; margin-top: -1px; border-radius: 50%; font-size: 18px; vertical-align: middle; margin-right: 10px; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f6f6f6; } table { width: 100%; margin-top: 5%; } .vertical_tabs.kl-style-1 .tabbable .nav>li>a.active>span, .vertical_tabs.kl-style-1 .tabbable .nav>li>a:hover>span { color: #767676; } @media (min-width: 768px) { .vertical_tabs .tabbable .nav { float: left; width: 20%; } } .fade { transition: opacity 0.15s linear; } img { max-width: 100%; height: auto; } .show { display: block !important; opacity: 1 !important; visibility: visible !important; transform: scale(1) !important; } @media (min-width: 768px) { .vertical_tabs .tabbable .tab-content { float: left; width: 80%; min-height: 240px; padding-left: 30px; border-left: 1px solid #c2c2c2; } /* tabs style 5 */ .tabs_style5>ul.nav { border-bottom: 2px solid #dfdfdf; } .tabs_style5>ul.nav>li { float: left; margin-bottom: -2px; } .tabs_style5>ul.nav li>a { color: #909090; } .tabs_style5>ul.nav li>a:hover { color: #535353; } .tabs_style5>ul.nav>li>a.active { color: #535353; border-bottom: 2px solid #cd2122; background: none; } .tabs_style5>ul.nav>li:first-child>a { padding: 8px 20px 8px 0; } .tab-content>.active { display: block; } .tabs_style5>ul.nav>li>a { padding: 8px 20px; line-height: 1.7; display: inline-block; } .tabs_style5>ul.nav>li>a:hover { background: none; } .tabs_style5 .tab-content h5 { color: #4d4d4d; } .tabs_style5 .tab-content { width: 100%; padding: 10px 0 15px; margin-top: 10px; } } .blog-sum-item-style-2 { display: flex; align-items: center; } .blog-sum-item-style-2 .content p, .blog-sum-item-style-2 .content h6 { color: var(--dark-grey-3); } .blog-sum-item-style-2 .content p { margin: 1.5rem 0; } .blog-sum-item-style-2 .content .date { color: var(--dark-grey-4); margin: 1rem 0; letter-spacing: 1px; } .blog-sum-item-style-2 .content .react { display: flex; align-items: center; margin: 0.25rem 0; } .blog-sum-item-style-2 .content .react p, .blog-sum-item-style-2 .content .react i { color: var(--dark-grey-4); font-size: 11px; } .blog-sum-item-style-2 .content .react i { margin: 0 0.5rem 0 0; } .blog-sum-item-style-2 .content .react p { margin: 0; } .blog-sum-item-style-2 .content .small-btn { margin: 3rem 0 0 0; } .blog-sum-item-style-2 .inner-content { position: relative; left: 12%; top: -8vh; z-index: 10; } .tweet-sum-item { display: flex; margin-bottom: 2rem; cursor: pointer; } .tweet-sum-item i { font-size: 20px; margin: 0; } .tweet-sum-item .post-detail { margin-left: 1rem; } .tweet-sum-item .post-detail p { margin-bottom: 0.25rem; color: var(--dark-grey-4); } .tweet-sum-item .post-detail .time { font-size: 9px; } .tweet-sum-item:hover i { color: var(--active-icon-color); } .blogs-area-section .container-fluid { padding-right: 0; } .blogs-area-section .img-fluid { width: 100%; } .blogs-area-section .side-section .side-media { background: url("../img/University/Blog/architecture-balcony.png") no-repeat center center/cover; height: 110vh; min-height: 900px; margin-top: 15vh; } .blogs-area-section .side-section .social-feed h4 { margin: 3rem 0; } .blogs-area-section .blog { margin-bottom: 4rem; margin-right: 1rem; } .blog-detail h2 { margin-bottom: 1rem; } .blog-detail .heading { margin: 3rem 0; } .blog-detail .heading p { text-transform: uppercase; letter-spacing: 1px; font-size: 11px; margin-bottom: 0.5rem; } .blog-detail .media-grid { width: 80%; max-width: 1280px; margin: 0 auto; position: relative; } .blog-detail .media-grid .img { padding: 0.6rem; } .blog-detail .media-grid .img-fluid { width: 100%; } .blog-detail .media-grid .side-social-icons { left: -6%; top: 20%; } .blog-detail .media-grid .side-social-icons i { font-size: 1rem; color: var(--icon-color); } .blog-detail .media-grid .side-social-icons i:hover { color: var(--active-icon-color); } .blog-detail .blog-contents .blog-text { margin: 3rem 0; } .blog-detail .blog-contents .reacts { display: flex; } .blog-detail .blog-contents .reacts .react { display: flex; align-items: center; margin-right: 3rem; } .blog-detail .blog-contents .reacts .react p, .blog-detail .blog-contents .reacts .react i { color: var(--dark-grey-4); font-size: 15px; font-weight: 600; } .blog-detail .blog-contents .reacts .react i { margin: 0 0.5rem 0 0; } .blog-detail .blog-contents .reacts .react p { margin: 0; } .blog-detail .blog-contents .more { float: right; } .blog-detail .blog-contents .more:hover a, .blog-detail .blog-contents .more:hover .arrow { color: var(--dark-blue-1); } .blog-detail .blog-contents .more a { font-size: 10px; color: var(--light-grey-5); } .blog-detail .blog-contents .more .arrow { font-size: 15px; } .comment-section h2, .post-comment h2, #author h2 { margin: 6rem 0 4rem 0; } .post-comment .main-btn { margin: 1rem 0; } .author-section .name { font-weight: 700; margin: 0; } .author-section .title { font-size: 11px; } .author-section .about { margin: 2.5rem 0 1.5rem 0; } .author-section .social-icons i { margin: 0 0.75rem 0 0; color: var(--dark-grey-3); } .author-section .social-icons i:hover { color: var(--active-icon-color); } .more-carousel-1 { background-color: var(--light-grey-3); padding: 4rem; } .more-carousel-1 .container { position: relative; } .more-carousel-1 .container .blog-carousel-2 .content .title { font-size: 1rem; font-weight: 500; } .more-carousel-1 .container .blog-carousel-2 .content .title:hover { color: var(--dark-indigo); } .more-carousel-1 .container .blog-carousel-controls .prev, .more-carousel-1 .container .blog-carousel-controls .next { cursor: pointer; position: absolute; bottom: 15px; } .more-carousel-1 .container .blog-carousel-controls .prev *, .more-carousel-1 .container .blog-carousel-controls .next * { color: var(--dark-grey-3); } .more-carousel-1 .container .blog-carousel-controls .prev:hover *, .more-carousel-1 .container .blog-carousel-controls .next:hover * { color: var(--dark-indigo); } .more-carousel-1 .container .blog-carousel-controls .prev { left: -35px; } .more-carousel-1 .container .blog-carousel-controls .next { right: -35px; } .course-detail .container-fluid { padding-right: 0; } .course-detail .container-fluid h2 { margin-bottom: 4rem; } .course-detail .container-fluid .content { padding-right: 2.5rem; } .course-detail .container-fluid .content h6 { font-weight: 700; margin-bottom: 1rem; } .course-detail .container-fluid .content .about, .course-detail .container-fluid .content .requirements, .course-detail .container-fluid .content .summary { margin: 2rem 0; } .course-detail .container-fluid .content .about p { margin-bottom: 1rem; } .course-detail .container-fluid .content .summary .data { display: flex; justify-content: space-between; } .course-detail .container-fluid .content .summary .data table { width: 40%; } .course-detail .container-fluid .content .summary .data table td { padding: 0.5rem 0.2rem; } .course-detail .container-fluid .content .summary .data table i { font-size: 14px; color: var(--heading-color); margin: 0; } .course-detail .container-fluid .content .summary .data table p { margin: 0; } .course-detail .container-fluid .content .summary .main-btn { margin: 3rem 0; } .course-detail .container-fluid .media { background: url("../img/University/Detailed_course/jacob-bowman-356700-unsplash.png") center center/cover; margin-top: 10vh; max-height: 100vh; min-height: 800px; } .course-detail .container-fluid .media .side-form-icons { margin: 5vh 0 0 40vw; } .more-carousel-1 .container .carousel .card .card-text { text-transform: capitalize; letter-spacing: 0px; } .event-detail .container-fluid { padding-left: 0px; } .event-detail .container-fluid .media { background: url("../img/University/students/adult-biology-chemical.png") no-repeat center center/cover; height: 82vh; min-height: 800px; } .event-detail .container-fluid .content { padding-left: 5vw; } .event-detail .container-fluid .content .date { display: flex; align-items: flex-end; position: relative; } .event-detail .container-fluid .content .date h1, .event-detail .container-fluid .content .date h5 { font-family: var(--main-font); font-weight: 700; letter-spacing: 2px; padding: 0.75rem 0; color: var(--heading-color); margin: 0; } .event-detail .container-fluid .content .date h1 { font-size: 4.7rem; padding: 0px; } .event-detail .container-fluid .content .date h5 { padding: 1.5rem 0.5rem; } .event-detail .container-fluid .content .date .divider { width: 5vw; height: 1px; background: var(--icon-color); position: absolute; left: -5vw; top: 50%; } .event-detail .container-fluid .content .event-infos .info { height: 3rem; display: flex; align-items: center; margin-right: 1rem; } .event-detail .container-fluid .content .event-infos .info span { font-size: 11px; margin: 0; color: var(--dark-grey-3); } .achievement1 { background-image: url(https://bitstechnology.org/wp-content/uploads/2019/02/BITS-Edu-Campus-3_compressed12.png); background-position: center; background-size: cover; background-attachment: fixed; color: white; } .tabs_style2 { margin: 10px 0; } .tabs_stylec>ul.nav1 { margin-bottom: 10px; } .tabs_stylec>ul.nav1>li { float: left; border-left: 1px dotted #ccc; line-height: 18px; } .tabs_stylec>ul.nav1>li:first-child { border-left: 0; } .tabs_stylec>ul.nav1>li:first-child a { border-left: 0; padding-left: 0; } .tabs_stylec>ul.nav1>li>a { padding: 4px 15px; line-height: 18px; color: #CD2122; } .tabs_stylec>ul.nav1>li>a.active { font-weight: bold; } .tabs_stylec>ul.nav1>li>a.active, .tabs_stylec>ul.nav1>li>a:hover { background: none; color: #CD2122; } .tabs_stylec .tab-content { width: 100%; padding: 0; margin-top: 15px; } @media (min-width: 768px) { .vertical_tabs .tabbable1 .tab-content { float: left; width: 80%; min-height: 240px; padding-left: 30px; border-left: 0px; } } .nav1 { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .action_box { padding: 20px 30px; color: #fff; border-top: 2px solid #fff; border-bottom: 1px solid #fff; position: relative; background-color: var(--icon-color); clear: both; } .action_box.style2 .ac-content-text { margin-bottom: 25px; } .action_box.style2 .ac-content-text, .action_box.style2 .ac-buttons { display: block; text-align: center; padding-left: 0; } .event-detail .container-fluid .content .event-infos .info i { color: var(--heading-color); margin-right: 0.5rem; } .event-detail .container-fluid .content .reservation { margin: 4rem 0; } .event-detail .container-fluid .content .form-style-3 .form-group { display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 2rem; } .event-detail .container-fluid .content .form-style-3 .form-group label { width: 40%; font-size: 15px; font-weight: 600; font-family: var(--main-font); color: var(--dark-grey-3); margin: 0; position: static; } .event-detail .container-fluid .content .form-style-3 .form-group .range-slider-con { width: 60%; } .event-detail .container-fluid .content .form-style-3 .form-group .range-slider-con .pmd-range-slider { width: 80%; } .event-detail .container-fluid .content .form-style-3 .form-group input { font-size: 15px; padding: 0.25rem 0.5rem; width: 60%; font-family: var(--main-font); border: 0; border-radius: 0; border-bottom: 1px solid var(--icon-color); background-color: transparent; } .event-detail .container-fluid .content .form-style-3 .form-group input::placeholder { color: var(--active-icon-color); font-family: var(--main-font); } .event-detail .container-fluid .content .form-style-3 .form-group input:focus { box-shadow: none; border-color: var(--dark-blue-1); } .event-detail .container-fluid .content .form-style-3 .small-text { color: var(--icon-color); font-size: 9px; display: inline-block; position: absolute; left: 40%; top: 32px; } .event-detail .container-fluid .content .form-style-3 .main-btn { margin: 3rem 0 2rem 0; } .event-detail .container-fluid .content .form-style-3 .note { font-size: 11px; } .page-nav-section { padding: 1rem 0 0 0; } .events-section-style-2 .container .event { margin: 5rem 0; } .events-section-style-2 .container .event .date, .events-section-style-2 .container .event .img { padding: 0; } .events-section-style-2 .container .event h1, .events-section-style-2 .container .event h5 { font-family: var(--main-font); font-weight: 700; letter-spacing: 2px; padding: 0.75rem 0; color: var(--heading-color); } .events-section-style-2 .container .event h1 { font-size: 4.7rem; padding: 0px; border-bottom: 1px solid var(--icon-color); } .events-section-style-2 .container .event h4 { font-weight: 700; } .events-section-style-2 .container .event h5 { font-size: 1rem; } .events-section-style-2 .container .event .date { display: flex; flex-direction: column; justify-content: center; } .events-section-style-2 .container .event .details p { margin: 1rem 0 0.5rem 0; } .events-section-style-2 .container .event .details .main-btn { margin: 1rem 0; } .events-section-style-2 .container .event .details .event-infos .info { height: 2rem; display: flex; align-items: center; margin-right: 2.5rem; } .events-section-style-2 .container .event .details .event-infos .info span { font-size: 11px; margin: 0; color: var(--dark-grey-3); } .events-section-style-2 .container .event .details .event-infos .info i { color: var(--heading-color); margin: 0 0.5rem 0 0; font-size: 14px; } .events-section-style-2 .container .odd-event .details { padding-left: 2rem; } .events-section-style-2 .container .even-event .details { padding-right: 2rem; order: 1; } .events-section-style-2 .container .even-event .img { order: 2; } .events-section-style-2 .container .even-event .date { text-align: right; order: 3; } .events-section-style-2 .container .more a { font-size: 18px; padding: 0.25rem; color: var(--dark-blue-2); text-align: center; border-bottom: 1px solid var(--dark-blue-2); font-weight: 400; display: inline-block; position: relative; transition: 0.3s; } .events-section-style-2 .container .more a:after { content: "⭢"; position: absolute; opacity: 0; right: 5px; transition: 0.3s; } .events-section-style-2 .container .more a:hover { padding-right: 28px; padding-left: 8px; } .events-section-style-2 .container .more a:hover:after { opacity: 1; right: 5px; } .payment-btn { color: var(--white); background-color: rgba(252, 210, 42, 0.8); border: 0; font-weight: 600; height: 38px; width: 132px; font-size: 14px; font-family: var(--main-font); margin: 2rem auto; cursor: pointer; box-shadow: 0px 6px 20px -8px #fcd22a; transition: all 0.4s; display: flex; justify-content: center; align-items: center; } .payment-btn:hover { background-color: #fcd22a; box-shadow: 0px 10px 20px -8px #dfb306; } .membership-plan .container-fluid { padding-right: 0; } .membership-plan .container-fluid .blue { color: var(--dark-blue-1); cursor: pointer; } .membership-plan .container-fluid .content .relative-title { position: relative; width: 70vw; } .membership-plan .container-fluid .content .title h2 { margin-bottom: 0.5rem; } .membership-plan .container-fluid .content>div { margin: 3.5rem 0; } .membership-plan .container-fluid .content .price h4 { margin-bottom: 2rem; } .membership-plan .container-fluid .content .price p { margin-bottom: 1rem; } .membership-plan .container-fluid .content .benefits h5 { margin-bottom: 2rem; } .membership-plan .container-fluid .content .login .form-style-2 { width: 80%; } .membership-plan .container-fluid .content .login .form-style-2 .small-text-1, .membership-plan .container-fluid .content .login .form-style-2 .small-text-2 { color: var(--icon-color); display: block; } .membership-plan .container-fluid .content .login .form-style-2 .small-text-1 { font-size: 11px; } .membership-plan .container-fluid .content .login .form-style-2 .small-text-2 { font-size: 10px; } .membership-plan .container-fluid .content .payment { display: flex; } .membership-plan .container-fluid .content .payment button { margin: 1rem 3rem 0 0; } .membership-plan .container-fluid .content img { height: 25px; } .membership-plan .container-fluid .media { background: url("../img/University/Membership/naassom-azevedo.png") center center/cover; height: 800px; margin-top: 200px; } .not-found .content-wrapper { height: calc(100vh - 200px); width: 100%; display: flex; justify-content: center; align-items: center; } .not-found .content-wrapper .page-heading { color: var(--dark-blue-1); } .not-found .content-wrapper h4 { line-height: 1.6; font-size: 16px; margin: 20px 0 30px 0; } .not-found .content-wrapper .main-btn { margin: 1rem 0; } .not-found .media { height: calc(100vh - 200px); } .not-found .media img { height: 100%; } .questions-section .container-fluid { padding-right: 0; } .questions-section .container-fluid .content { padding: 0 2% 0 10%; } .questions-section .container-fluid .content .accordion { margin-top: 2rem; } .questions-section .container-fluid .content .accordion .card-header { padding: 0.5rem; } .questions-section .container-fluid .content .accordion .card-header h5 button { font-size: 14px; } .questions-section .container-fluid .side-media { background: url("../img/University/FAQ/bookcase.png") no-repeat center center/cover; height: 85vh; min-height: 800px; } .question-form-section { background-color: var(--light-grey-3); padding: 4rem 0; } .question-form-section img { height: 60px; } .question-form-section h2 { margin: 1.5rem; } .question-form-section h5 { color: var(--dark-grey-4); } .question-form-section .form-group .small-text { margin-top: -8px; } .teacher-form .container-fluid { padding: 0; background-color: var(--light-grey-3); } .teacher-form .container-fluid .content { padding: 2rem 3rem 2rem 18vw; } .teacher-form .container-fluid .content .text { margin: 0 1.5rem; } .teacher-form .container-fluid .content .text h2 { margin-bottom: 1rem; } .teacher-form .container-fluid .content .form-style-2 { padding: 3rem 2rem; margin: 3rem 0; background-color: var(--white); } .teacher-form .container-fluid .content .form-style-2 .form-group { margin: 0; } .teacher-form .container-fluid .content .form-style-2 .form-group label { margin: 0; font-size: 12px; } .teacher-form .container-fluid .content .form-style-2 .form-group input { padding: 0.25rem 0.5rem; margin: 0.25rem 0 1rem 0; } .teacher-form .container-fluid .content .form-style-2 .form-group .options { display: flex; } .teacher-form .container-fluid .content .form-style-2 .form-group .options p { margin: 0.75rem 2rem 0.5rem 0; font-weight: 700; } .teacher-form .container-fluid .content .form-style-2 .main-btn { margin: 2rem 0; } .teacher-form .container-fluid .media { background: url("../img/University/join_us/teacher-students.png") center center/cover; } .teacher-form .container-fluid .halfway-btn { left: 58.333%; top: 50%; } body { position: relative; } .coming-soon { overflow-x: hidden; min-height: 100vh; background-color: var(--dark-grey-4); } .coming-soon .media { background: url("../img/University/Coming_soon/ambar-simpang.png") no-repeat center center/cover; height: 100vh; } .coming-soon .content { background-color: var(--dark-grey-4); padding: 0 4rem; height: 100vh; } .coming-soon .content * { color: var(--white); } .coming-soon .content .title { font-size: 5.5rem; width: 600px; letter-spacing: 1px; position: relative; left: -257px; margin: 20vh 0 10vh 0; font-family: var(--heading-font); } .coming-soon .content .title * { font-family: var(--heading-font); } .coming-soon .content .left { color: var(--dark-grey-4); } .coming-soon .content form { width: 70%; max-width: 480px; margin-bottom: 2rem; } .coming-soon .content form * { height: 35px; margin: 0; border: 0; } .coming-soon .content form input { background-color: var(--light-blue-2); padding: 0.25rem 1.5rem; width: 75%; color: var(--dark-grey-4); } .coming-soon .content form input::placeholder { color: var(--icon-color); font-size: 12px; } .coming-soon .content form input:focus { outline: 1px solid var(--dark-blue-1); } .coming-soon .content form .small-btn { width: 20%; margin: 0; } .navbar-style-2 { height: 3rem; position: absolute; top: 30px; left: 0px; right: 0px; z-index: 99; } .navbar-style-2 a { margin: 0; padding: 0; } .navbar-style-2 .current-menu-item { color: var(--dark-blue-1) !important; } .navbar-style-2 .row { position: relative; } .navbar-style-2 .nav-container { display: flex; justify-content: space-between; } .navbar-style-2 .navbar .navbar-brand { margin-right: 100px; } .navbar-style-2 .navbar .navbar-brand img { height: 50px; } .navbar-style-2 .navbar .navbar-nav { display: flex; justify-content: center; } .navbar-style-2 .navbar .navbar-nav .current-menu-item { color: var(--white); border-bottom: 2px solid var(--white); padding: 0; } .navbar-style-2 .navbar .navbar-nav .current-menu-item::before { color: var(--white); } .navbar-style-2 .navbar .navbar-nav li { margin-right: 50px; margin-bottom: 0; display: flex; align-items: center; position: relative; } .navbar-style-2 .navbar .navbar-nav li a { padding: 0; } .navbar-style-2 .navbar .navbar-nav li .sub-menu { position: absolute; top: 20%; width: 180px; padding: 10px 0; left: 0; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); background-color: var(--white); visibility: hidden; opacity: 0; margin-top: 50px; transition: margin 0.1s linear 0.3s, visibility 0.1s linear 0.3s, opacity 0.1s linear 0.3s; z-index: 999; } .navbar-style-2 .navbar .navbar-nav li .sub-menu * { margin: 0; padding: 0; } .navbar-style-2 .navbar .navbar-nav li .sub-menu li { padding: 0 20px; } .navbar-style-2 .navbar .navbar-nav li .sub-menu li .current-menu-item { border-bottom: none; color: var(--dark-blue-1); } .navbar-style-2 .navbar .navbar-nav li .sub-menu li a { margin: 5px 0; font-size: 12px; font-weight: 500; } .navbar-style-2 .navbar .navbar-nav li .sub-menu li a:hover { text-decoration: none; } .navbar-style-2 .navbar .navbar-nav li .sub-menu li i { position: relative; right: -10px; font-size: 8px; } .navbar-style-2 .navbar .navbar-nav li .sub-menu li:hover>a { margin-left: 4px; color: var(--dark-blue-1); } .navbar-style-2 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children { position: relative; } .navbar-style-2 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children>a { position: relative; } .navbar-style-2 .navbar .navbar-nav>li>a { color: var(--dark-grey); } .navbar-style-2 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children>a::after { content: ""; font-family: "font awesome 5 free"; font-weight: 900; font-size: 9px; position: absolute; right: -8px; bottom: 0px; } .navbar-style-2 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children>a:hover::after { color: var(--dark-blue-1); } .navbar-style-2 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children .sub-menu { left: 80%; top: -100%; padding: 1rem 0; visibility: hidden; opacity: 0; transition: all 0.5s; } .navbar-style-2 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children:hover .sub-menu { left: 98%; visibility: visible; opacity: 1; } .navbar-style-2 .navbar .navbar-nav li a { font-size: 14px; margin-right: 2px; font-weight: 700; } .navbar-style-2 .navbar .navbar-nav li a:after { content: ""; display: block; border-bottom: 2px solid var(--dark-grey); width: 0; position: relative; right: 0; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .navbar-style-2 .navbar .navbar-nav .menu-item-has-no-children { margin-right: 35px; } .navbar-style-2 .navbar .navbar-nav .menu-item-has-no-children:hover>a, .navbar-style-2 .navbar .navbar-nav .menu-item-has-no-children:hover .fa-chevron-down { color: var(--dark-grey); transition: all 0.3s; } .navbar-style-2 .navbar .navbar-nav .menu-item-has-no-children:hover>a:not(.current-menu-item):after { width: 100%; } .navbar-style-2 .navbar .navbar-nav .menu-item-has-children { position: relative; } .navbar-style-2 .navbar .navbar-nav .menu-item-has-children>a::before { content: ""; position: absolute; right: -14px; top: 5px; font-family: "font awesome 5 free"; font-weight: 900; font-size: 10px; color: var(--dark-grey); } .navbar-style-2 .navbar .navbar-nav .menu-item-has-children:hover>a, .navbar-style-2 .navbar .navbar-nav .menu-item-has-children:hover>a::before { color: var(--dark-grey); transition: all 0.3s; } .navbar-style-2 .navbar .navbar-nav .menu-item-has-children:hover>a:not(.current-menu-item):after { width: 100%; } .navbar-style-2 .navbar .navbar-nav .menu-item-has-children:hover .sub-menu { visibility: visible; opacity: 1; margin-top: 35px; } .navbar-style-2 .navbar .navbar-nav img { width: 225px; margin-right: 85px; } .navbar-style-2 .navbar .navbar-nav>li>a { color: var(--dark-grey); } .navbar-style-2 .side-nav { width: 200px; display: flex; justify-content: flex-end; align-items: center; } .navbar-style-2 .side-nav a { padding: 0 10px; } .navbar-style-2 .side-nav .flag { width: 30px; height: 30px; margin: 0 1rem; cursor: pointer; } .navbar-style-2 .side-nav .search, .navbar-style-2 .side-nav .auth { height: 20px; padding: 0 8px; cursor: pointer; color: var(--dark-grey); } .navbar-style-2 .side-nav .search { border-left: 1px solid var(--white); display: flex; align-items: center; } .navbar-style-2 .side-nav .search i { color: var(--white); transition: all 0.3s; font-weight: 600; } .navbar-style-2 .side-nav .search i:hover { color: var(--dark-blue-1); } .navbar-style-2 .side-nav .auth { border-right: 1px solid var(--white); text-align: right; font-size: 14px; font-weight: 400; } .navbar-style-2 .side-nav .auth:hover { color: var(--dark-blue-1); } .navbar-style-2 .side-nav .location .active { background: none; border: none; outline: none; } .navbar-style-2 .side-nav .location .dropdown-menu { min-width: 60px; border: none; padding-top: 1rem; left: 50% !important; will-change: transform; transform: translate(-50%, 20%) !important; } .navbar-style-2 .side-nav .location .dropdown-menu .dropdown-item { padding: 0.75rem 0.5rem; cursor: pointer; } .navbar-style-2 .main-nav { position: relative; } .navbar-style-2 .main-nav .menu-toggler .hamburger-menu span { background-color: var(--white); } .navbar-style-2 .main-nav .menu-toggler .hamburger-menu span::after { background-color: var(--white); } .navbar-style-2 .main-nav .menu-toggler .hamburger-menu span::before { background-color: var(--white); } .navbar-style-2 .main-nav .menu-toggler .hamburger-menu .active span { background: transparent; } .navbar-style-2 .main-nav .nav-menu-items { width: 300px; margin: 1rem 0.5rem; padding: 1rem 2rem; background-color: var(--white); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); position: absolute; top: 60px; left: 220px; z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s; } .navbar-style-2 .main-nav .nav-menu-items .nav-items>li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; cursor: pointer; margin: 0; } .navbar-style-2 .main-nav .nav-menu-items .nav-items>li>a { padding: 0.5rem 0; } .navbar-style-2 .main-nav .nav-menu-items .nav-items>li:hover { color: var(--dark-blue-1); } .navbar-style-2 .main-nav .nav-menu-items .nav-items>li .sub-menu { overflow: hidden; width: 100%; margin-left: 1.5rem; max-height: 0; transition: all 0.5s; } .navbar-style-2 .main-nav .nav-menu-items .nav-items>li .animate-dropdown { display: block; opacity: 1; max-height: 800px !important; } .navbar-style-2 .main-nav .nav-menu-items .menu-item-has-children { position: relative; } .navbar-style-2 .main-nav .nav-menu-items .menu-item-has-children::after { content: ""; font-family: "font awesome 5 free"; font-weight: 900; font-size: 8px; margin: 0; color: var(--dark-grey); position: absolute; right: 0px; top: 12px; } .navbar-style-2 .main-nav .nav-menu-items .minimize-icon::after { content: ""; } .navbar-style-2 .main-nav .active { visibility: visible; opacity: 1; } .navbar-style-2 .search-content-wrap { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; background-color: var(--heading-color); transition: all ease-in-out 0.3s; z-index: 99999; } .navbar-style-2 .search-content-wrap.search-visible { visibility: visible; opacity: 1; } .navbar-style-2 .search-content-wrap.search-visible .search-content { opacity: 1; visibility: visible; } .navbar-style-2 .search-content-wrap .search-content { display: inline-block; max-width: 90%; opacity: 0; visibility: hidden; transition: all ease-in-out 0.3s; position: absolute; top: 80px; right: 95px; } .navbar-style-2 .search-content-wrap .search-content .search-form { position: relative; } .navbar-style-2 .search-content-wrap .search-content .search-form input { width: 550px; background-color: var(--white); border: 0; font-size: 14px; padding: 1rem 1.5rem; color: var(--heading-color); transition: all 0.3s ease-out; font-weight: 400; max-width: 100%; height: auto; } .navbar-style-2 .search-content-wrap .search-content .search-close { display: block; position: absolute; top: -40%; left: 97%; height: 40px; width: 40px; border-radius: 50%; background-color: var(--dark-blue-1); transition: all 0.3s; } .navbar-style-2 .search-content-wrap .search-content .search-close:hover { background-color: var(--dark-blue-2); } .navbar-style-2 .search-content-wrap .search-content .search-close .icon { color: var(--white); font-size: 14px; } .navbar-mobile-2 { position: absolute; top: 0; left: 0; right: 0; z-index: 999; } .navbar-mobile-2 .current-menu-item { color: var(--dark-blue-1) !important; } .navbar-mobile-2 .container-fluid { display: flex; justify-content: space-between; margin-top: 1rem; align-items: center; } .navbar-mobile-2 .container-fluid .divider { height: 40px; width: 1px; background-color: var(--white); margin: 0 1rem; } .navbar-mobile-2 .container-fluid .menu-toggler .hamburger-menu span { background-color: var(--white); } .navbar-mobile-2 .container-fluid .menu-toggler .hamburger-menu span::after { background-color: var(--white); } .navbar-mobile-2 .container-fluid .menu-toggler .hamburger-menu span::before { background-color: var(--white); } .navbar-mobile-2 .container-fluid .menu-toggler .hamburger-menu .active span { background: transparent; } .navbar-mobile-2 .container-fluid .logo { width: 160px; } .navbar-mobile-2 .container-fluid .language button { background: none; border: none; width: 100%; } .navbar-mobile-2 .container-fluid .language .active { background: none; border: none; outline: none; } .navbar-mobile-2 .container-fluid .language .flag { width: 30px; height: 30px; margin: 0 1rem; cursor: pointer; margin: 0; } .navbar-mobile-2 .container-fluid .language .dropdown-menu { min-width: 60px; border: none; padding-top: 1rem; left: 50% !important; will-change: transform; transform: translate(-50%, 30px) !important; } .navbar-mobile-2 .container-fluid .language .dropdown-menu .dropdown-item { padding: 0.75rem 1rem; cursor: pointer; } .navbar-mobile-2 .container-fluid .search { cursor: pointer; } .navbar-mobile-2 .container-fluid .search i { color: var(--white); } .navbar-mobile-2 .mobile-search-wrapper { position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: rgba(51, 62, 72, 0.9); display: none; opacity: 0; z-index: -1; transition: all 0.5s; height: 100%; visibility: hidden; animation: fadeIn 0.3s linear; } .navbar-mobile-2 .mobile-search-wrapper form input { position: absolute; height: 60px; width: 100%; left: 0px; right: 0px; top: 60px; padding: 0.5rem 1rem; } .navbar-mobile-2 .mobile-search-wrapper form input::placeholder { color: rgba(85, 85, 85, 0.5); font-size: 12px; font-family: var(--main-font); } .navbar-mobile-2 .nav-menu-items { width: 97%; margin: 1rem 0.5rem; padding: 1rem 2rem; background-color: var(--white); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); position: absolute; z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s; } .navbar-mobile-2 .nav-menu-items .nav-items>li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; cursor: pointer; margin: 0; } .navbar-mobile-2 .nav-menu-items .nav-items>li>a { padding: 0.5rem 0; } .navbar-mobile-2 .nav-menu-items .nav-items>li:hover { color: var(--dark-blue-1); } .navbar-mobile-2 .nav-menu-items .nav-items>li .sub-menu { overflow: hidden; width: 100%; margin-left: 1.5rem; max-height: 0; transition: all 0.5s; } .navbar-mobile-2 .nav-menu-items .nav-items>li .animate-dropdown { display: block; opacity: 1; max-height: 800px !important; } .navbar-mobile-2 .nav-menu-items .menu-item-has-children { position: relative; } .navbar-mobile-2 .nav-menu-items .menu-item-has-children::after { content: ""; font-family: "font awesome 5 free"; font-weight: 900; font-size: 8px; margin: 0; color: var(--dark-grey); position: absolute; right: 0px; top: 12px; } .navbar-mobile-2 .nav-menu-items .minimize-icon::after { content: ""; } .navbar-mobile-2 .active { visibility: visible; opacity: 1; } .showcase-style-2 { height: 100vh; width: 100vw; } .showcase-style-2 .container-fluid { padding: 0; position: relative; } .showcase-style-2 .container-fluid .slider-wrapper .slider-item { background-repeat: no-repeat; background-position: center center; background-size: cover; height: 100vh; min-height: 600px; width: 100%; position: relative; } @media (min-width: 562px) { .showcase-style-2 .container-fluid .slider-wrapper .slider-item { background-repeat: no-repeat; background-position: center center; background-size: cover; height: 80vh; min-height: 600px; width: 100%; position: relative; margin-top: 2.5%; } } .showcase-style-2 .container-fluid .slider-wrapper .slider-item .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.4); } .showcase-style-2 .container-fluid .slider-wrapper .slider-item .content { position: relative; top: 40%; z-index: 5; } .showcase-style-2 .container-fluid .slider-wrapper .slider-item .content .main-content { width: 50%; } .showcase-style-2 .container-fluid .slider-wrapper .slider-item .content .main-content .heading { position: relative; left: 12vw; } .showcase-style-2 .container-fluid .slider-wrapper .slider-item .content .main-content .heading h1 { color: var(--white); } .showcase-style-2 .container-fluid .slider-wrapper .slider-item .content .main-content .heading .btns { display: flex; margin: 4rem 0; } .showcase-style-2 .container-fluid .slider-wrapper .slider-item .content .main-content .heading .btns .main-btn { margin: 0 2rem 0 0; } .showcase-style-2 .container-fluid .slider-wrapper .slider-item .v-container { position: absolute; left: 0px; right: 0px; bottom: 0px; top: 0px; } .showcase-style-2 .container-fluid .slider-wrapper .slick-current h1 { animation: fadeInDown 1.5s 0s both; } .showcase-style-2 .container-fluid .slider-wrapper .slick-current .btns { animation: fadeInUp 1s 0s both; } .showcase-style-2 .container-fluid .scroll-next { position: absolute; top: auto; bottom: 30px; left: 50%; cursor: pointer; transform: translate(-50%, 0); } .showcase-style-2 .container-fluid .side-social-icons { top: 75vh; left: 50px; } .showcase-style-2 .container-fluid .side-social-icons i { color: rgba(255, 255, 255, 0.8); } .showcase-style-2 .container-fluid .side-social-icons i:hover { color: var(--white); } .showcase-style-2 .container-fluid .indicator-style-2 { position: absolute; top: auto; bottom: 10px; right: 70px; } .showcase-style-2 .container-fluid .indicator-style-2 i { color: var(--white); } .showcase-style-2 .container-fluid .indicator-style-2 .total:before { content: "/"; display: inline-block; padding: 0 4px; } .navbar-style-3 { height: 3rem; position: absolute; top: 30px; left: 0px; right: 0px; z-index: 99; } .navbar-style-3 a { margin: 0; padding: 0; } .navbar-style-3 .current-menu-item { color: var(--dark-blue-1) !important; } .navbar-style-3 .row { position: relative; } .navbar-style-3 .nav-container { display: flex; justify-content: space-between; } .navbar-style-3 .navbar .navbar-brand { margin-right: 100px; } .navbar-style-3 .navbar .navbar-brand img { height: 50px; } .navbar-style-3 .navbar .navbar-nav { display: flex; justify-content: center; } .navbar-style-3 .navbar .navbar-nav .current-menu-item { color: var(--dark-blue-1); border-bottom: 2px solid var(--dark-blue-1); padding: 0; } .navbar-style-3 .navbar .navbar-nav .current-menu-item::before { color: var(--dark-blue-1) !important; } .navbar-style-3 .navbar .navbar-nav li { margin-right: 50px; margin-bottom: 0; display: flex; align-items: center; position: relative; } .navbar-style-3 .navbar .navbar-nav li a { padding: 0; } .navbar-style-3 .navbar .navbar-nav li .sub-menu { position: absolute; top: 20%; width: 160px; padding: 10px 0; left: 0; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); background-color: var(--white); visibility: hidden; opacity: 0; margin-top: 50px; transition: margin 0.1s linear 0.3s, visibility 0.1s linear 0.3s, opacity 0.1s linear 0.3s; z-index: 999; } .navbar-style-3 .navbar .navbar-nav li .sub-menu * { margin: 0; padding: 0; } .navbar-style-3 .navbar .navbar-nav li .sub-menu li { padding: 0 20px; } .navbar-style-3 .navbar .navbar-nav li .sub-menu li .current-menu-item { border-bottom: none; } .navbar-style-3 .navbar .navbar-nav li .sub-menu li a { margin: 5px 0; font-size: 12px; font-weight: 500; } .navbar-style-3 .navbar .navbar-nav li .sub-menu li a:hover { text-decoration: none; } .navbar-style-3 .navbar .navbar-nav li .sub-menu li i { position: relative; right: -10px; font-size: 8px; } .navbar-style-3 .navbar .navbar-nav li .sub-menu li:hover>a { margin-left: 4px; color: var(--dark-blue-1); } .navbar-style-3 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children { position: relative; } .navbar-style-3 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children>a { position: relative; } .navbar-style-3 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children>a::after { content: ""; font-family: "font awesome 5 free"; font-weight: 900; font-size: 9px; position: absolute; right: -8px; bottom: 0px; } .navbar-style-3 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children>a:hover::after { color: var(--dark-blue-1); } .navbar-style-3 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children .sub-menu { left: 80%; top: -100%; padding: 1rem 0; visibility: hidden; opacity: 0; transition: all 0.5s; } .navbar-style-3 .navbar .navbar-nav li .sub-menu .sub-menu-item-has-children:hover .sub-menu { left: 98%; visibility: visible; opacity: 1; } .navbar-style-3 .navbar .navbar-nav li a { font-size: 14px; margin-right: 2px; font-weight: 700; } .navbar-style-3 .navbar .navbar-nav li a:after { content: ""; display: block; border-bottom: 2px solid var(--dark-blue-1); width: 0; position: relative; right: 0; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .navbar-style-3 .navbar .navbar-nav .menu-item-has-no-children { margin-right: 35px; } .navbar-style-3 .navbar .navbar-nav .menu-item-has-no-children:hover>a, .navbar-style-3 .navbar .navbar-nav .menu-item-has-no-children:hover .fa-chevron-down { color: var(--dark-blue-1); transition: all 0.3s; } .navbar-style-3 .navbar .navbar-nav .menu-item-has-no-children:hover>a:not(.current-menu-item):after { width: 100%; } .navbar-style-3 .navbar .navbar-nav .menu-item-has-children { position: relative; } .navbar-style-3 .navbar .navbar-nav .menu-item-has-children>a::before { content: ""; position: absolute; right: -14px; top: 5px; font-family: "font awesome 5 free"; font-weight: 900; font-size: 10px; color: #545454; } .navbar-style-3 .navbar .navbar-nav .menu-item-has-children:hover>a, .navbar-style-3 .navbar .navbar-nav .menu-item-has-children:hover>a::before { color: var(--dark-blue-1); transition: all 0.3s; } .navbar-style-3 .navbar .navbar-nav .menu-item-has-children:hover>a:not(.current-menu-item):after { width: 100%; } .navbar-style-3 .navbar .navbar-nav .menu-item-has-children:hover .sub-menu { visibility: visible; opacity: 1; margin-top: 35px; } .navbar-style-3 .navbar .navbar-nav img { width: 225px; margin-right: 85px; } .navbar-style-3 .side-nav { width: 250px; display: flex; justify-content: flex-end; align-items: center; } .navbar-style-3 .side-nav a { padding: 0 10px; } .navbar-style-3 .side-nav .flag { width: 30px; height: 30px; margin: 0 1rem; cursor: pointer; } .navbar-style-3 .side-nav .search, .navbar-style-3 .side-nav .auth { height: 20px; padding: 0 8px; cursor: pointer; color: var(--light-grey-2); } .navbar-style-3 .side-nav .search { border-left: 1px solid var(--light-grey-2); display: flex; align-items: center; } .navbar-style-3 .side-nav .search i { color: var(--light-grey-2); transition: all 0.3s; font-weight: 600; } .navbar-style-3 .side-nav .search i:hover { color: var(--heading-color); } .navbar-style-3 .side-nav .auth { border-right: 1px solid var(--light-grey-2); text-align: right; font-size: 14px; font-weight: 400; } .navbar-style-3 .side-nav .auth:hover { color: var(--heading-color); } .navbar-style-3 .side-nav .location .active { background: none; border: none; outline: none; } .navbar-style-3 .side-nav .location .dropdown-menu { min-width: 60px; border: none; padding-top: 1rem; left: 50% !important; will-change: transform; transform: translate(-50%, 20%) !important; } .navbar-style-3 .side-nav .location .dropdown-menu .dropdown-item { padding: 0.75rem 0.5rem; cursor: pointer; } .navbar-style-3 .main-nav { position: relative; } .navbar-style-3 .main-nav .nav-menu-items { width: 300px; margin: 1rem 0.5rem; padding: 1rem 2rem; background-color: var(--white); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); position: absolute; top: 60px; left: 220px; z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s; } .navbar-style-3 .main-nav .nav-menu-items .nav-items>li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; cursor: pointer; margin: 0; } .navbar-style-3 .main-nav .nav-menu-items .nav-items>li>a { padding: 0.5rem 0; } .navbar-style-3 .main-nav .nav-menu-items .nav-items>li:hover { color: var(--dark-blue-1); } .navbar-style-3 .main-nav .nav-menu-items .nav-items>li .sub-menu { overflow: hidden; width: 100%; margin-left: 1.5rem; max-height: 0; transition: all 0.5s; } .navbar-style-3 .main-nav .nav-menu-items .nav-items>li .animate-dropdown { display: block; opacity: 1; max-height: 800px !important; } .navbar-style-3 .main-nav .nav-menu-items .menu-item-has-children { position: relative; } .navbar-style-3 .main-nav .nav-menu-items .menu-item-has-children::after { content: ""; font-family: "font awesome 5 free"; font-weight: 900; font-size: 8px; margin: 0; color: var(--dark-grey); position: absolute; right: 0px; top: 12px; } .navbar-style-3 .main-nav .nav-menu-items .minimize-icon::after { content: ""; } .navbar-style-3 .main-nav .active { visibility: visible; opacity: 1; } .navbar-style-3 .search-content-wrap { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; background-color: var(--heading-color); transition: all ease-in-out 0.3s; z-index: 99999; } .navbar-style-3 .search-content-wrap.search-visible { visibility: visible; opacity: 1; } .navbar-style-3 .search-content-wrap.search-visible .search-content { opacity: 1; visibility: visible; } .navbar-style-3 .search-content-wrap .search-content { display: inline-block; max-width: 90%; opacity: 0; visibility: hidden; transition: all ease-in-out 0.3s; position: absolute; top: 80px; right: 95px; } .navbar-style-3 .search-content-wrap .search-content .search-form { position: relative; } .navbar-style-3 .search-content-wrap .search-content .search-form input { width: 550px; background-color: var(--white); border: 0; font-size: 14px; padding: 1rem 1.5rem; color: var(--heading-color); transition: all 0.3s ease-out; font-weight: 400; max-width: 100%; height: auto; } .navbar-style-3 .search-content-wrap .search-content .search-close { display: block; position: absolute; top: -40%; left: 97%; height: 40px; width: 40px; border-radius: 50%; background-color: var(--dark-blue-1); transition: all 0.3s; } .navbar-style-3 .search-content-wrap .search-content .search-close:hover { background-color: var(--dark-blue-2); } .navbar-style-3 .search-content-wrap .search-content .search-close .icon { color: var(--white); font-size: 14px; } .navbar-mobile-style-3 { position: absolute; top: 0; left: 0; right: 0; z-index: 999; } .navbar-mobile-style-3 .container-fluid { display: flex; justify-content: space-between; margin-top: 1rem; align-items: center; } .navbar-mobile-style-3 .container-fluid .menu-toggler .hamburger-menu span { background-color: var(--dark-grey-3); } .navbar-mobile-style-3 .container-fluid .menu-toggler .hamburger-menu span::after, .navbar-mobile-style-3 .container-fluid .menu-toggler .hamburger-menu span::before { background-color: var(--dark-grey-3); } .navbar-mobile-style-3 .container-fluid .menu-toggler .hamburger-menu .active span { background-color: transparent; } .navbar-mobile-style-3 .container-fluid .divider { height: 40px; width: 1px; background-color: var(--icon-color); margin: 0 1rem; } .navbar-mobile-style-3 .container-fluid .logo img { width: 150px; } .navbar-mobile-style-3 .container-fluid .language button { background: none; border: none; width: 100%; } .navbar-mobile-style-3 .container-fluid .language .active { background: none; border: none; outline: none; } .navbar-mobile-style-3 .container-fluid .language .flag { width: 30px; height: 30px; margin: 0 1rem; cursor: pointer; margin: 0; } .navbar-mobile-style-3 .container-fluid .language .dropdown-menu { min-width: 60px; border: none; padding-top: 1rem; left: 50% !important; will-change: transform; transform: translate(-50%, 30px) !important; } .navbar-mobile-style-3 .container-fluid .language .dropdown-menu .dropdown-item { padding: 0.75rem 1rem; cursor: pointer; } .navbar-mobile-style-3 .container-fluid .search { cursor: pointer; } .navbar-mobile-style-3 .container-fluid .search i { color: var(--light-grey-2); transition: all 0.3s; font-weight: 600; } .navbar-mobile-style-3 .container-fluid .search i:hover { color: var(--heading-color); } .navbar-mobile-style-3 .nav-menu-items { width: 97%; margin: 1rem 0.5rem; padding: 1rem 2rem; background-color: var(--white); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); position: absolute; z-index: 99; opacity: 0; visibility: hidden; transition: all 0.3s; } .navbar-mobile-style-3 .nav-menu-items .nav-items>li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; cursor: pointer; margin: 0; } .navbar-mobile-style-3 .nav-menu-items .nav-items>li>a { padding: 0.5rem 0; } .navbar-mobile-style-3 .nav-menu-items .nav-items>li:hover { color: var(--dark-blue-1); } .navbar-mobile-style-3 .nav-menu-items .nav-items>li .sub-menu { overflow: hidden; width: 100%; margin-left: 1.5rem; max-height: 0; transition: all 0.5s; } .navbar-mobile-style-3 .nav-menu-items .nav-items>li .animate-dropdown { display: block; opacity: 1; max-height: 800px !important; } .navbar-mobile-style-3 .nav-menu-items .menu-item-has-children { position: relative; } .navbar-mobile-style-3 .nav-menu-items .menu-item-has-children::after { content: ""; font-family: "font awesome 5 free"; font-weight: 900; font-size: 8px; margin: 0; color: var(--dark-grey); position: absolute; right: 0px; top: 12px; } .navbar-mobile-style-3 .nav-menu-items .minimize-icon::after { content: ""; } .navbar-mobile-style-3 .mobile-search-wrapper { position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: rgba(51, 62, 72, 0.5); z-index: -1; display: none; opacity: 0; transition: all 0.5s; height: 100%; visibility: hidden; transition: all 0.3s; } .navbar-mobile-style-3 .mobile-search-wrapper form input { position: absolute; height: 60px; width: 100%; left: 0px; right: 0px; top: 60px; padding: 0.5rem 1rem; } .navbar-mobile-style-3 .mobile-search-wrapper form input::placeholder { color: rgba(85, 85, 85, 0.5); font-size: 12px; font-family: var(--main-font); } .navbar-mobile-style-3 .active { visibility: visible; opacity: 1; } .showcase-style-3 { height: 100vh; min-height: 600px; width: 100vw; } .showcase-style-3 .container-fluid { height: 100%; padding: 0; position: relative; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item { background-repeat: no-repeat; background-position: center center; background-size: cover; height: 100vh; min-height: 600px; width: 100vw; position: relative; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item .content { position: relative; top: 40%; left: 12vw; z-index: 5; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item .content .main-content { width: 50%; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item .content .title, .showcase-style-3 .container-fluid .slider-wrapper .slider-item .content .sub-title { color: var(--white); } .showcase-style-3 .container-fluid .slider-wrapper .slider-item .content .main-btn { margin: 1rem 0; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); } .showcase-style-3 .container-fluid .slider-wrapper .slick-current .content h1 { animation: fadeInLeft 1s 0s both; } .showcase-style-3 .container-fluid .slider-wrapper .slick-current .content p { animation: fadeInUp 1s 0.5s both; } .showcase-style-3 .container-fluid .slider-wrapper .slick-current .content .main-btn { animation: fadeInUp 1s 1s both; } .showcase-style-3 .container-fluid .side-social-icons, .showcase-style-3 .container-fluid .indicator-style-3, .showcase-style-3 .container-fluid .scroll-next { z-index: 9; } .showcase-style-3 .container-fluid .side-social-icons { top: auto; bottom: 100px; left: 50px; } .showcase-style-3 .container-fluid .side-social-icons i { color: var(--white); } .showcase-style-3 .container-fluid .side-social-icons i:hover { color: var(--dark-indigo); } .showcase-style-3 .container-fluid .indicator-style-3 { position: absolute; top: 200px; right: 70px; width: 50px; display: flex; flex-direction: column; align-items: center; } .showcase-style-3 .container-fluid .indicator-style-3 * { cursor: pointer; } .showcase-style-3 .container-fluid .indicator-style-3 i { color: var(--dark-indigo); margin: 0; font-weight: 700; color: var(--white); } .showcase-style-3 .container-fluid .indicator-style-3 .home-slider-progressbar { display: inline-block; height: 180px; width: 3px; position: relative; z-index: 0; margin-bottom: 2rem; } .showcase-style-3 .container-fluid .indicator-style-3 .home-slider-progressbar .home-slider-progress { position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: var(--white); content: ""; } .showcase-style-3 .container-fluid .indicator-style-3 .home-slider-progressbar .home-slider-progress-active { position: absolute; left: -1px; top: 0; width: 4px; height: 40%; background-color: #242e50; content: ""; } .showcase-style-3 .container-fluid .indicator-style-3 .current { font-size: 3.5rem; font-family: var(--main-font); color: var(--white); } .navbar-style-4 { position: absolute; top: 20px; left: 0px; right: 0px; z-index: 99; } .navbar-style-4 .container-fluid { position: relative; } .navbar-style-4 .container-fluid .row .nav-container { display: flex; justify-content: space-between; } .navbar-style-4 .container-fluid .row .navbar .navbar-brand { margin-right: 100px; } .navbar-style-4 .container-fluid .row .navbar .navbar-brand img { height: 52px; } .navbar-style-4 .container-fluid .row .side-nav { width: 400px; display: flex; justify-content: flex-end; align-items: center; } .navbar-style-4 .container-fluid .row .side-nav .divider { height: 20px; width: 1px; background: var(--dark-indigo); margin: 0 1rem; } .navbar-style-4 .container-fluid .row .side-nav .flag { width: 30px; height: 30px; margin: 0 1rem; cursor: pointer; } .navbar-style-4 .container-fluid .row .side-nav .search, .navbar-style-4 .container-fluid .row .side-nav .auth { height: 20px; padding: 0 8px; cursor: pointer; color: var(--dark-indigo); } .navbar-style-4 .container-fluid .row .side-nav .search i { color: var(--dark-indigo); transition: all 0.3s; font-weight: 600; } .navbar-style-4 .container-fluid .row .side-nav .search i:hover { color: var(--dark-grey-4); } .navbar-style-4 .container-fluid .row .side-nav .auth { text-align: right; font-size: 14px; font-weight: 400; } .navbar-style-4 .container-fluid .row .side-nav .auth:hover { color: var(--dark-grey-4); } .navbar-style-4 .container-fluid .row .side-nav .location .active { background: none; border: none; outline: none; } .navbar-style-4 .container-fluid .row .side-nav .location .dropdown-menu { min-width: 60px; border: none; padding-top: 1rem; transform: translate(0%, 20%) !important; } .navbar-style-4 .container-fluid .row .side-nav .location .dropdown-menu .dropdown-item { padding: 0.75rem 0; cursor: pointer; } .navbar-style-4 .container-fluid .nav-menu-items { width: 220px; position: absolute; right: 70px; background: var(--white); padding: 2rem; visibility: hidden; opacity: 0; transition: all 0.5s; } .navbar-style-4 .container-fluid .nav-menu-items .nav-items>li { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; cursor: pointer; } .navbar-style-4 .container-fluid .nav-menu-items .nav-items>li a { color: var(--dark-indigo); font-size: 15px; border-bottom: 1px solid transparent; } .navbar-style-4 .container-fluid .nav-menu-items .nav-items>li .current-menu-item { color: var(--dark-blue-1); } .navbar-style-4 .container-fluid .nav-menu-items .nav-items>li:hover>a { color: var(--dark-blue-1); border-color: var(--dark-blue-1); } .navbar-style-4 .container-fluid .nav-menu-items .nav-items .menu-item-has-children { position: relative; } .navbar-style-4 .container-fluid .nav-menu-items .nav-items .menu-item-has-children::after { content: ""; font-family: "font awesome 5 free"; font-weight: 900; position: absolute; font-size: 10px; right: 0px; top: 0px; color: var(--dark-indigo); } .navbar-style-4 .container-fluid .nav-menu-items .nav-items .menu-item-has-children:hover::after { color: var(--dark-blue-1); } .navbar-style-4 .container-fluid .nav-menu-items .nav-items .menu-item-has-children .sub-menu { overflow: hidden; width: 100%; margin-left: 6px; max-height: 0; transition: all 0.5s; } .navbar-style-4 .container-fluid .nav-menu-items .nav-items .menu-item-has-children .sub-menu li a:hover { color: var(--dark-blue-1); } .navbar-style-4 .container-fluid .nav-menu-items .nav-items .menu-item-has-children .animate-dropdown { display: block; opacity: 1; max-height: 800px !important; margin-top: 10px; } .navbar-style-4 .container-fluid .show { visibility: visible; opacity: 1; } .navbar-style-4 .search-content-wrap { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; background-color: var(--heading-color); transition: all ease-in-out 0.3s; z-index: 99999; } .navbar-style-4 .search-content-wrap.search-visible { visibility: visible; opacity: 1; } .navbar-style-4 .search-content-wrap.search-visible .search-content { opacity: 1; visibility: visible; } .navbar-style-4 .search-content-wrap .search-content { display: inline-block; max-width: 90%; opacity: 0; visibility: hidden; transition: all ease-in-out 0.3s; position: absolute; top: 65px; right: 140px; } .navbar-style-4 .search-content-wrap .search-content .search-form { position: relative; } .navbar-style-4 .search-content-wrap .search-content .search-form input { width: 550px; background-color: var(--white); border: 0; font-size: 14px; padding: 1rem 1.5rem; color: var(--heading-color); transition: all 0.3s ease-out; font-weight: 400; max-width: 100%; height: auto; } .navbar-style-4 .search-content-wrap .search-content .search-close { display: block; position: absolute; top: -40%; left: 97%; height: 40px; width: 40px; border-radius: 50%; background-color: var(--dark-blue-1); transition: all 0.3s; } .navbar-style-4 .search-content-wrap .search-content .search-close:hover { background-color: var(--dark-blue-2); } .navbar-style-4 .search-content-wrap .search-content .search-close .icon { color: var(--white); font-size: 14px; } .showcase-style-4 { background: url("../img/University/Homepage_4/iMac.png") no-repeat center center/cover; height: 100vh; width: 100%; min-height: 600px; position: relative; } .showcase-style-4 .overlay { background: linear-gradient(147deg, rgba(36, 46, 80, 0.9) 40%, #72fff4 120%); } .showcase-style-4 .slider-indicator-3 { bottom: 20px; left: 70px; } .showcase-style-4 .content-wrapper { height: 100%; } .showcase-style-4 .content-wrapper .slick-list { height: 100%; } .showcase-style-4 .content-wrapper .slick-list .slick-track { height: 100%; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content { width: 50vw; height: 100%; position: absolute; z-index: 22; padding: 25vh 10vw 10vh 10vw; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content * { color: var(--white); } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content h1 { margin-bottom: 3rem; position: relative; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content h1:after { content: ""; display: inline-block; height: 2px; width: 70%; background-color: var(--dark-blue-3); position: absolute; top: 60%; z-index: 99; margin-left: 3rem; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content img { width: 30%; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content .main-btn { margin: 4rem 0 1rem 0; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .media { background-position: center center; background-size: cover; height: 100vh; min-height: 600px; width: 42vw; margin-left: 50vw; position: absolute; } .showcase-style-4 .content-wrapper .slick-list .slick-current { animation: fadeIn 2s 0s both; } .showcase-style-4 .side-content .side-social-links { right: -100px; top: 35%; } .showcase-style-4 .side-content .side-social-links a { color: rgba(255, 255, 255, 0.5); } .showcase-style-4 .side-content .side-social-links a:hover { color: var(--white); } .showcase-style-4 .side-content .slider-indicator-2 { right: 50px; bottom: 20px; } .learning-object .heading { width: 70%; margin: 4rem auto 0 auto; } .learning-object .heading h2 { margin-bottom: 1.5rem; color: var(--dark-indigo); } .learning-object .objects>div { padding: 2rem; } .learning-object .objects>div img { width: 75%; } .learning-object .objects>div h5 { color: var(--dark-blue-4); } .learning-object .side-form-icons .icon { color: var(--dark-indigo); } .learning-object .side-form-icons .icon:hover { color: var(--dark-blue-1); } .lesson-item-style-1 { margin: 6rem 0; height: 450px; position: relative; overflow-x: hidden; } .lesson-item-style-1 .row { height: 100%; } .lesson-item-style-1 .media { background-repeat: no-repeat; background-position: center center; background-size: cover; } .lesson-item-style-1 .title h2 { position: relative; width: 300%; left: -120%; top: 20%; } .lesson-item-style-1 .title h2::after { content: ""; display: block; height: 2px; width: 70%; margin: 1rem 0; background: var(--dark-blue-4); z-index: -1; position: absolute; left: 0px; } .lesson-item-style-1 .details { text-align: right; display: flex; align-items: flex-end; } .lesson-item-style-1 .details h6 { font-weight: 700; color: var(--dark-blue-4); margin-bottom: 0.8rem; } .lesson-item-style-1 .details .forward-btn { padding: 0.3rem 1.2rem; border-radius: 2px; background-color: rgba(1, 148, 186, 0.8); box-shadow: 0px 6px 10px -8px rgba(1, 148, 186, 0.8); transition: all 0.3s; margin-top: 2rem; } .lesson-item-style-1 .details .forward-btn i { margin: 0; color: var(--white); } .lesson-item-style-1 .details .forward-btn:hover { background-color: var(--dark-blue-4); box-shadow: 0px 6px 15px -8px var(--dark-blue-4); } .lesson-item-style-1.even-lesson .details { order: 1; text-align: left; } .lesson-item-style-1.even-lesson .title { order: 2; text-align: right; } .lesson-item-style-1.even-lesson .title h2::after { right: 0px; left: auto; } .lesson-item-style-1.even-lesson .media { order: 3; } .free-trial-lesson { position: relative; padding: 6rem 0; background: url("../img/University/Homepage_4/creative-designer-editing-1.png") no-repeat center center/cover; } .free-trial-lesson .overlay { background: linear-gradient(147deg, rgba(36, 46, 80, 0.6) 40%, rgba(114, 255, 244, 0.9) 120%); } .free-trial-lesson .container { z-index: 9; position: relative; } .free-trial-lesson .container * { color: var(--white) !important; } .free-trial-lesson .container .countdown-style-1 { margin: 6rem auto; justify-content: center; } .free-trial-lesson .container .trial-form { width: 80%; margin: 0 auto; } .free-trial-lesson .container .trial-form .form-group .form-control { border-color: var(--icon-color); } .free-trial-lesson .container .trial-form .form-group .form-control:focus { border-color: var(--white); } .free-trial-lesson .container .trial-form .form-group .form-control::placeholder { color: var(--white); } .pagination-style-4 { position: absolute; display: flex; align-items: center; } .pagination-style-4 * { font-size: 15px; font-weight: 500; padding: 0 2px; margin: 0; font-family: var(--main-font); color: var(--dark-indigo); } .slider-indicator-2 { position: absolute; display: flex; flex-direction: column; } .slider-indicator-2 .slick-dots button { font-size: 1.5rem; font-weight: 400; margin: 0.5rem 0; color: var(--white); border: none; background: transparent; margin: 0; } .slider-indicator-2 .slick-dots button::before { content: "0"; display: inline-block; } .slider-indicator-2 .slick-dots .slick-active button { font-weight: 700; color: var(--dark-indigo); } .slider-indicator-3 { position: absolute; display: flex; align-items: center; } .slider-indicator-3 * { font-size: 14px; font-weight: 400; padding: 0 2px; margin: 0; font-family: var(--main-font); color: var(--white); } .side-nav-style-2 { width: 250px; display: flex; justify-content: flex-end; align-items: center; } .side-nav-style-2 .search, .side-nav-style-2 .auth { height: 20px; cursor: pointer; color: var(--light-grey-2); padding: 0 10px; } .side-nav-style-2 .search i { color: var(--light-grey-2); transition: all 0.3s; font-weight: 600; } .side-nav-style-2 .search i:hover { color: var(--heading-color); } .side-nav-style-2 .divider { height: 20px; width: 1px; background-color: var(--light-grey-2); } .side-nav-style-2 .auth { text-align: right; font-size: 14px; font-weight: 400; } .side-nav-style-2 .auth:hover { color: var(--heading-color); } .side-nav-style-2 .location button { font-size: 14px; color: var(--light-grey-2); font-family: var(--main-font); cursor: pointer; } .side-nav-style-2 .location .active { background: none; border: none; outline: none; display: flex; align-items: center; margin: 0 1rem; } .side-nav-style-2 .location .active:hover { color: var(--heading-color); } .side-nav-style-2 .location .active i { font-size: 9px; color: var(--light-grey-2); margin: 0 0 0 0.5rem; } .side-nav-style-2 .location .dropdown-menu { min-width: 60px; border: none; padding-top: 1rem; top: 20px !important; } .side-nav-style-2 .location .dropdown-menu .dropdown-item { padding: 0.5rem 1rem; cursor: pointer; } .showcase-style-5 { height: 100vh; min-height: 600px; width: 100%; position: relative; overflow: hidden; } .showcase-style-5 .row { height: 100%; } .showcase-style-5 .row .slider-wrapper { height: 100%; } .showcase-style-5 .row .slider-wrapper .slick-list, .showcase-style-5 .row .slider-wrapper .slick-track, .showcase-style-5 .row .slider-wrapper .content-wrapper { height: 100%; } .showcase-style-5 .row .slider-wrapper .content-wrapper { position: relative; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content { height: 100%; position: absolute; min-height: 600px; width: 55vw; background: linear-gradient(134deg, white 0%, rgba(158, 182, 188, 0.5) 100%); } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content { margin: 30vh 40% auto 18%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content p { margin: 3rem 0; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content .heading { position: relative; width: 195%; z-index: 99; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form { display: flex; justify-content: space-between; position: relative; width: 125%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form * { height: 35px; margin: 0; border: 0; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form input { width: 70%; background-color: var(--dark-grey-4); padding: 0.25rem 1.5rem; color: var(--white); } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form input::placeholder { color: var(--white); font-size: 12px; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form input:focus { outline: 1px solid var(--dark-blue-1); } .showcase-style-5 .row .slider-wrapper .content-wrapper .media { width: 45vw; height: 100%; position: relative; left: 55vw; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media .video-bg { background-position: center center; background-size: cover; background-repeat: no-repeat; height: 65%; width: 110%; position: absolute; top: 18%; right: 20%; z-index: 22; min-height: 400px; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media .video-bg .halfway-btn { left: 50%; top: 50%; height: 80px; width: 80px; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media .video-bg .halfway-btn .icon { height: 30px; width: 30px; } .showcase-style-5 .row .side-social-links { bottom: 34%; right: -80px; } .showcase-style-5 .carousel-controlar { display: flex; flex-direction: column; position: absolute; bottom: 5%; left: 50px; } .showcase-style-5 .carousel-controlar .icon { height: 50px; width: 10px; cursor: pointer; margin: 1rem 0; } .showcase-style-5 .pagination-style-3 { position: absolute; bottom: 2.5rem; right: 50%; } .events-section .container .view-more .grey-colored { color: var(--dark-indigo); border-color: var(--dark-indigo); } .features-section .container>p { width: 80%; margin: 0 auto; } .features-section .container h2 { margin: 4rem 0 3rem 0; } .features-section .container .icon { font-size: 10px; } .features-section .container .media img { width: 100%; } .features-section .container .row { margin: 5rem 0; } /*----------------------------- Accordion Item -----------------------------*/ .accordion-style-2 .card { border: none; background-color: transparent; text-align: left; } .accordion-style-2 .card+.card { margin-top: 20px; } .accordion-style-2 .card .card-header { background-color: transparent; padding: 0; border: none; } .accordion-style-2 .card .card-header a { display: block; font-size: 14px; line-height: 26px; font-weight: 700; background-color: rgba(51, 62, 72, 0.5); padding: 10px 30px; cursor: pointer; position: relative; font-family: var(--main-font); color: var(--white); } .accordion-style-2 .card .card-header a:after { position: absolute; right: 30px; top: 10px; content: ""; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; } .accordion-style-2 .card .card-header a[aria-expanded=false] { background-color: rgba(51, 62, 72, 0.8); color: var(--white); font-weight: 300; } .accordion-style-2 .card .card-header a[aria-expanded=false]:after { content: ""; } .accordion-style-2 .card .card-body { background-color: transparent; padding: 20px 30px 0px; font-family: var(--main-font); color: rgba(51, 62, 72, 0.8); font-size: 14px; font-weight: 300; } /*----------------------------- Blog Slider ------------------------------*/ .blog-style-2 { background-color: var(--light-grey-3); padding: 4rem; } .blog-style-2 .container .blog-carousel-wrap { padding-left: 20px; position: relative; width: 90%; margin: 6rem auto 4rem auto; } .blog-style-2 .container .blog-carousel-wrap .blog-carousel-controls { position: absolute; height: 0; width: 100%; z-index: 11; } .blog-style-2 .container .blog-carousel-wrap .blog-carousel-controls .owl-next, .blog-style-2 .container .blog-carousel-wrap .blog-carousel-controls .owl-prev { position: absolute; transform: translateY(-50%); font-size: 20px; cursor: pointer; left: -55px; } .blog-style-2 .container .blog-carousel-wrap .blog-carousel-controls .owl-next i, .blog-style-2 .container .blog-carousel-wrap .blog-carousel-controls .owl-prev i { color: var(--dark-grey-3); } .blog-style-2 .container .blog-carousel-wrap .blog-carousel-controls .owl-prev { top: 250px; } .blog-style-2 .container .blog-carousel-wrap .blog-carousel-controls .owl-next { top: 300px; } .blog-style-2 .container .rotated-text { right: -36%; } .sign-in-section .container { background: url("../img/University/log-in_sign-up/sign_bg.png") no-repeat center center/cover; text-align: center; box-sizing: border-box; } .sign-in-section .container .sign-in { padding: 4rem; background-color: rgba(255, 255, 255, 0.93); } .sign-in-section .container .sign-in h2 { margin-bottom: 1.5rem; } .sign-in-section .container .sign-in h6 { color: --dark-grey-4; font-weight: 600; } .sign-in-section .container .sign-in .sign-with-social { margin-bottom: 2rem; } .sign-in-section .container .sign-in .sign-with-social i { color: var(--dark-blue-1); margin: 0 0.5rem; } .sign-in-section .container .sign-in form { margin: 2rem 0 0; text-align: left; } .sign-in-section .container .sign-in form label { margin: 0; } .sign-in-section .container .sign-in form .form-group { margin-bottom: 1rem; } .sign-in-section .container .sign-in form span { font-size: 11px; } .sign-in-section .container .sign-up { padding: 1.5rem; } .sign-in-section .container .sign-up .content { background-color: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; padding: 0 10%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .sign-in-section .container .sign-up .content h2 { margin-bottom: 2rem; } .sign-in-section .container .sign-up .content .small-btn { margin: 1rem 0; } .contact-breadcrumb { overflow: hidden; } .contact-details-section .contact-info .openings, .contact-details-section .contact-info .mail, .contact-details-section .contact-info .social-icons { margin: 3rem 0; } .contact-details-section .contact-info .social-icons i { margin: 0 4px 0 0; font-size: 14px; } .contact-details-section .message-from { margin-top: 20%; } .contact-details-section .message-from .form-group label { margin: 0; } .contact-details-section .message-from .form-group .small-text { margin: 0; bottom: -18px; } .contact-details-section .message-from .main-btn { margin: 3rem 0; } .breadcrub-style-1 .bg-img-1 { background: url("../img/University/enrolment/brunette-conversation.png") no-repeat center center/cover !important; } .course-enrolment .cover-img { background: url("../img/University/enrolment/blurred-background-cap.png") no-repeat center center/cover; height: 102%; } .course-enrolment .enrolment-details h2 { margin-bottom: 1rem; } .course-enrolment .enrolment-details .col-blue { color: var(--dark-blue-1); } .course-enrolment .enrolment-details .form-group { margin: 0; margin: 2rem 0; } .course-enrolment .enrolment-details .form-group label { margin: 0; font-size: 12px; } .course-enrolment .enrolment-details .form-group input { margin: 0; } .course-enrolment .enrolment-details .form-group .toggle-switch { display: inline-block; width: 80px; height: 25px; margin: 0 2rem; position: relative; border-radius: 40px; background-color: rgba(158, 182, 188, 0.4); } .course-enrolment .enrolment-details .form-group .toggle-switch::after { content: ""; } .course-enrolment .enrolment-details .form-group .toggle-switch input { display: none; } .course-enrolment .enrolment-details .form-group .options { display: flex; } .course-enrolment .enrolment-details .form-group .options p { margin: 0.75rem 2rem 0.5rem 0; font-weight: 700; color: var(--active-icon-color); } .course-enrolment .enrolment-details .select-box-con { margin-bottom: 3.5rem; } .course-enrolment .enrolment-details .terms-conditons .list-item { margin: 0; padding: 0; } .course-enrolment .enrolment-details .terms-conditons .list-item a { color: var(--active-icon-color); } .course-enrolment .enrolment-details .main-btn { margin: 2rem 0; } .popular-courses { background-color: var(--light-grey-3); padding: 4rem 0 3rem 0; } .popular-courses .container { position: relative; } .popular-courses .container .rotated-text-2 { position: absolute; left: -150px; top: 100px; } .all-courses .course-wrapper { position: relative; } .all-courses .course-wrapper .rotated-text { font-size: 8rem; bottom: auto; top: 50%; right: -36%; transform: translateY(-50%) rotate(-90deg); z-index: -1; } .font-family-section .font-details { display: flex; justify-content: space-between; align-items: center; } .font-family-section .font-details .font-name { width: 120px; } .font-family-section .font-details .font-name h5 { font-weight: 700; letter-spacing: 2px; line-height: 1.6; text-transform: uppercase; } .font-family-section .font-details .font-name h5::after { content: ""; display: block; height: 1px; width: 200px; background-color: var(--icon-color); margin: 0.5rem 0; } .font-family-section .font-details .font-name h6 { text-transform: capitalize; } .font-family-section .font-details .font { height: 120px; width: 160px; display: flex; justify-content: center; align-items: center; background-color: var(--light-grey-3); } .heading-fonts-section { background-color: var(--light-grey-3); } .heading-fonts-section .container>p { margin: 2rem 0 0.5rem; } .icons { font-size: 2rem; padding: 4rem; margin: 2rem 0; } .icons i { margin: 2rem; } .dark-icons i { color: var(--dark-grey-4); } .white-icons { background-color: var(--dark-grey-4); } .white-icons i { color: var(--white); } .sign-up-section .container { background: url("../img/University/log-in_sign-up/sign_bg.png") no-repeat center center/cover; text-align: center; box-sizing: border-box; } .sign-up-section .container .sign-up { padding: 4rem; background-color: rgba(255, 255, 255, 0.93); } .sign-up-section .container .sign-up h2 { margin-bottom: 1.5rem; } .sign-up-section .container .sign-up h6 { color: --dark-grey-4; font-weight: 600; } .sign-up-section .container .sign-up .sign-with-social { margin-bottom: 2rem; } .sign-up-section .container .sign-up .sign-with-social i { color: var(--dark-blue-1); margin: 0 0.5rem; } .sign-up-section .container .sign-up .sign-with-email { margin: 2rem auto; } .sign-up-section .container .sign-up .sign-with-email form { margin: 2rem 0 0; text-align: left; } .sign-up-section .container .sign-up .sign-with-email form label { margin: 0; } .sign-up-section .container .sign-up .sign-with-email form .form-group { margin-bottom: 1rem; } .sign-up-section .container .sign-up .sign-with-email form span { font-size: 9px; } .sign-up-section .container .sign-up .sign-with-email .small-btn { margin: 5rem auto 2rem auto; } .sign-up-section .container .sign-in { padding: 1.5rem; } .sign-up-section .container .sign-in .content { background-color: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; padding: 0 10%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .sign-up-section .container .sign-in .content h2 { margin-bottom: 2rem; } .sign-up-section .container .sign-in .content .small-btn { margin: 1rem 0; } @media (max-width: 991px) { .hide-md-and-down { display: none !important; } } @media (min-width: 992px) { .hide-md-and-up { display: none !important; } } @media only screen and (min-width: 1610px) and (max-width: 1920px) { #showcase .container-fluid .row .col-3 { margin-top: 10vh; } } @media (max-width: 1600px) { .blog-style-3 .slider-indicator-2 { right: 0px; } } @media (max-width: 1366px) { .container-fluid { width: 100%; padding: 0px 50px; } .header_section { padding-left: 100px; } .header_section .social-icon { left: 50px; } .header_section .header-carousel .owl-dots { left: -50px; } .showcase-style-4 .side-social-links { right: -120px !important; } .showcase-style-4 .side-content .slider-indicator-2 { right: 30px; } .coming-soon .content .title { margin: 15vh 0 6vh 0; } } @media (max-width: 1200px) { .container-fluid { padding: 0px 50px; } .navbar-section .navbar-collapse { display: none !important; } .navbar-style-2 .navbar-expand-lg .navbar-collapse { display: none !important; } .navbar-style-3 .navbar-expand-lg .navbar-collapse { display: none !important; } .page-heading { font-size: 4rem; } .blog-section .rotated-text { right: -38%; } .membership-section .price-cards .rotated-text { right: -42%; } .all-courses .course-wrapper .rotated-text { right: -45%; } .teacher-form .container-fluid .content { padding: 2rem; } .showcase-style-3 { height: 80vh; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item { height: 80vh; } .showcase-style-3 .container-fluid .indicator-style-3 { top: 120px; right: 50px; } .showcase-style-3 .container-fluid .side-social-icons { left: 50px; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item .content { top: 30%; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item .content .main-content { width: 70%; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content { padding: 180px 50px 100px 100px; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content img { width: 80px; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content .main-btn { margin: 2rem 0 1rem 0; } .blog-style-2 .container .rotated-text { right: -52%; } .testimonials-style-3 .container .testimonial .testimonial-slider-wrapper .testimonial-slider .content { margin: 6rem 8rem 12rem 8rem; } } @media (max-width: 1200px) and (min-height: 1000px) { .showcase-style-5 { height: 70vh; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content { height: 100%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content { position: relative; z-index: 999; margin: 250px 20% auto 18%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content .heading { width: 200%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media { height: 100%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media .video-bg { left: auto; right: 0px; width: 150%; top: 10%; height: 700px; } .showcase-style-5 .row .side-social-links { right: -120px; } .header_section .single-header-item .content-area { height: 60vh; } } @media (max-width: 992px) { .event-item-style-1 { margin: 1rem 0; } .event-item-style-1 .details { padding: 0; margin: 2rem 0; } .event-item-style-1.odd-event .details { padding-left: 0px; } .event-item-style-1.even-event .media { order: 1; } .event-item-style-1.even-event .date { order: 2; } .event-item-style-1.even-event .details { order: 3; padding-right: 0px; } .events-section-style-2 .container .event .details { margin: 2rem auto; } .header_section .single-header-item .content-area { height: 60vh; } .header_section .single-header-item .content-area .title { width: 60vw; } .features-section .container .row { margin: 3rem 0; } .features-section .container .row .media { order: 1; margin-bottom: 2rem; } .features-section .container .row .content { order: 2; } .footer-style-2 .footer-content .ins-feed ul li { width: 25%; } .mantra .container .media { position: relative; } .mantra .container .media .halfway-btn { top: 50%; left: 50%; transform: translate(-50%, -50%); } .video-portrait-mode { margin: 0 auto !important; } .video-portrait-mode .close-popup { top: 0px !important; right: 0px !important; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form { width: 200%; z-index: 99; margin-top: 2rem; } .coming-soon .content .title { position: static; } .coming-soon .content .title .left { color: var(--white); } .lesson-item-style-1.even-lesson .title { order: 1; } .lesson-item-style-1.even-lesson .media { order: 2; } .lesson-item-style-1.even-lesson .details { order: 3; } .lesson-item-style-1 { margin: 4rem auto; } .lesson-item-style-1 .details { align-items: center; } .footer-style-5 .footer-content>div:not(:last-child)::after { display: none; } .blogs-area-section .container-fluid { margin-top: 4.5rem; } .questions-section .container-fluid .content { padding: 0 2%; } } .breadcrub-style-1 { margin-top: 30px; } @media (max-width: 920px) { .second-nav { display: none; } .breadcrub-style-1 { margin-top: 0px; } } @media (max-width: 768px) { .container-fluid { width: 100%; padding: 0 30px; } .container { width: 90%; } .side-form-icons { transform: rotate(90deg); position: fixed; left: 60px; bottom: -120px; top: auto; width: 45px; height: 150px; opacity: 0; transition: all 0.5s; } .side-form-icons * { transform: rotate(-90deg); } .page-heading { font-size: 4rem; } .breadcrub-style-2 .page-heading { font-size: 3rem; } .breadcrub-style-1 .container-fluid .heading { right: 50%; transform: translateX(50%); } .breadcrub-style-1 .container-fluid .heading h1 { font-size: 3rem; } .breadcrub-style-2 { height: 280px; } .breadcrub-style-4 { height: 200px; } #showcase { min-height: 400px; } #showcase .container-fluid .row .main-content { position: absolute; width: 70vw; z-index: 9; } #showcase .container-fluid .row .main-content h1 { width: 70vw; } #showcase .container-fluid .row .content-media { margin: 0; padding: 0; margin-left: auto; } #showcase .container-fluid .row .content-media .carousel-item { height: 60vh; min-height: 400px; } .events-section { padding: 0; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content h1:after { display: none; } .blogs-area-section .container-fluid { margin-top: 3rem; } .navbar-section .navbar .navbar-brand { margin-right: 50px; } .navbar-section .navbar .navbar-brand img { height: 40px; } .navbar-section .search-content-wrap .search-content { right: 60px; top: 70px; } .navbar-section .search-content-wrap .search-content .search-form input { width: 400px; } .header_section .single-header-item .content-area .title { width: 75vw; } .header_section .single-header-item .bg-image { width: 80%; } .header_section .single-header-item .content-area { width: 35%; } .header_section .header-carousel .owl-nav { left: 20%; } .header_section .header-carousel .owl-stage .owl-item.active .single-header-item .content-area .boxed-btn { margin-top: 30px; } .navbar-style-2 .navbar .navbar-brand { margin-right: 50px; } .navbar-style-2 .navbar .navbar-brand img { height: 40px; } .navbar-style-2 .search-content-wrap .search-content { right: 60px; top: 70px; } .navbar-style-2 .search-content-wrap .search-content .search-form input { width: 400px; } .navbar-style-3 .navbar .navbar-brand { margin-right: 40px; } .navbar-style-3 .navbar .navbar-brand img { height: 40px; } .side-nav-style-2 { width: 240px; } .navbar-style-3 .search-content-wrap .search-content { top: 65px; right: 65px; } .navbar-style-3 .search-content-wrap .search-content .search-form input { width: 400px; } .not-found .content-wrapper .content { text-align: center; } .not-found .content-wrapper .content .main-btn { margin: 1rem auto; } .navbar-style-4 .search-content-wrap .search-content .search-form input { width: 400px; } .footer-section .footer-content { text-align: center; } .footer-section .footer-content .contact-links { display: flex; flex-direction: column; align-items: center; } .footer-section .copyright { padding-bottom: 4rem; } .footer-section .copyright #scroll-top { right: 20px; } .footer-style-2 .copyright #scroll-top { right: 20px; } .footer-style-3 .copyright #scroll-top { right: 20px; } .footer-style-2 .copyright { padding-bottom: 3rem; } .footer-style-3 { text-align: center; } .footer-style-3 .footer-content .brand-logo { height: 30px; } .footer-style-3 .footer-content .contact-links { display: flex; flex-direction: column; align-items: center; } .footer-style-3 .footer-content .social-icons { margin: 1rem auto; } .footer-style-3 .copyright { padding-bottom: 3rem; } .achievement-section #counters { padding: 0; } .achievement-section #counters>div { margin: 1rem 0; } .blog-section .container .blog-carousel-wrap .blog-carousel-controls .dots { top: auto; bottom: -20px; left: 50%; transform: translateX(-50%); } .blog-section .container .blog-carousel-wrap .blog-carousel-controls .dots .owl-dot { display: inline-block; height: 3px; width: 1rem; margin: 0 3px; } .blog-section .container .blog-carousel-wrap .blog-carousel-controls .dots .active { height: 3px !important; width: 40px; } .breadcrub-style-1 { height: 300px; overflow: hidden; } .breadcrub-style-1 .heading h1 { font-size: 4rem; } .mantra .container .content h2 { text-align: center; } .values-section .container .bottom-content { text-align: center; } .blog-sum-item-style-1 .media { margin: 2rem 0 1rem 0; } .opening-popup, .location-popup, .form-popup { width: 70%; } .opening-popup .content, .location-popup .content, .form-popup .content { padding: 2rem 3rem; } .side-form-popup #location-map { height: 250px; } .price-cards { margin: 2rem 1rem; } .courses-section .card-columns { column-count: 2; } .price-cards { display: block; } .price-cards .price-card, .price-cards .price-card+.active { width: 100%; box-shadow: none; margin: 1rem 0; } .price-cards .price-card img, .price-cards .price-card+.active img { height: 50px; } .believes-section h2 { margin: 2rem 0.5rem; text-align: center; } .breadcrub-style-6 { height: 300px; } .events-section-style-2 .container .event { margin: 3rem 0; } .events-section-style-2 .container .event .details { padding: 0; } .events-section-style-2 .container .even-event .img { order: 1; } .events-section-style-2 .container .even-event .date { order: 2; } .events-section-style-2 .container .even-event .details { order: 3; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item .content { top: 30%; left: 50px; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item .content .main-content { width: 80%; } .showcase-style-5 { height: 680px; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content { width: 60vw; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content { position: relative; margin: 180px 50px auto 70px; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content .heading { width: 120%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form { display: block; margin-top: 4rem; z-index: 99; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form input { width: 60%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form .main-btn { margin: 1rem 0; width: 30%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media { width: 40vw; left: 60vw; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media .video-bg { top: 120px; height: 450px; right: 0px; width: 160%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media .pagination-style-3 { left: -80%; bottom: 1.5rem; } .showcase-style-5 .carousel-controlar { bottom: 30%; left: 15px; } .showcase-style-5 .pagination-style-3 { bottom: 1rem; } .features-section .media { margin-bottom: 2rem; } .testimonials-style-3 .container { width: 100%; padding: 0; } .testimonials-style-3 .container .lg-text { font-size: 6rem; bottom: -10px; } .testimonials-style-3 .container .pagination-style-3 { right: 50%; bottom: -70px; } .testimonials-style-3 .container .carousel-controlar { top: 50%; left: 40px; z-index: 9; } .testimonials-style-3 .container .carousel-controlar .icon { fill: var(--white); } .testimonials-style-3 .container .testimonial .testimonial-slider-wrapper .testimonial-slider .content { margin: 4rem 6rem 8rem 6rem; } .footer-section .footer-content .contact-links .social-icons { margin: 1.5rem 0; } .footer-section .footer-content .title { margin: 1rem auto; } .footer-section .footer-content .newsletter form input { width: 60%; } .footer-section .footer-content .newsletter form .main-btn { width: 36%; } .questions-section .container-fluid { padding: 0 3rem; } .questions-section .container-fluid .row { margin: 0; } .questions-section .container-fluid .content h2 { margin-bottom: 1rem; } .contact-breadcrumb { height: 200px; } .contact-breadcrumb .row .content { height: 100%; top: 0; } .contact-breadcrumb .row .content .inner-content { padding: 3rem; text-align: center; } .teacher-details .container-fluid { margin-top: 3.5rem; } .teacher-details .container-fluid .media { min-height: 250px; } .teacher-details .container-fluid .content h2 { margin: 1rem auto; text-align: center; } .popular-courses .container .rotated-text-2 { left: -130px; top: 50%; } .all-courses .container h2 { margin-bottom: 2rem; } .course-enrolment { padding: 0 1rem; } .blog-detail .media-grid { width: 100%; overflow-x: hidden; } .showcase-style-2 { height: 600px; } .showcase-style-2 .container-fluid .slider-wrapper .slider-item { height: 100%; } .showcase-style-2 .container-fluid .slider-wrapper .slider-item .content .main-content { width: 100%; } .showcase-style-2 .container-fluid .slider-wrapper .slider-item .heading { top: 200px; left: 30px; width: 80%; } .showcase-style-3 { height: 60vh; min-height: 480px; } .showcase-style-3 .container-fluid .indicator-style-3 { right: 30px; } .showcase-style-3 .container-fluid .indicator-style-3 .current { font-size: 3rem; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item { height: 60vh; min-height: 480px; } .showcase-style-4 { height: 600px; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content .main-btn { margin-top: 20px; } .learning-object .objects .media { display: flex; justify-content: center; margin-bottom: 2rem; } .learning-object .objects .media img { width: 40px; } .trending-lessons h2 { margin-bottom: 6rem; } .achievements-style-2 .container #counters>div { margin-top: 20px; } .testimonials-style-3 .container .testimonial .testimonial-slider-wrapper .slick-list { margin: 0 30px; } .testimonial-style-2 .container .slider-indicator-2 { right: -20px; } .believes-section .container .col-12 { padding: 0; } .believes-section .container .content { margin-top: 2rem; } .believes-section .container .content .card .card-header { padding: 0.5rem 0; } .believes-section .container .content .card .card-header h5 button { font-size: 14px; } .blog-style-2 { padding: 2rem 0; } .blog-style-2 .carousel { margin: 2rem 1rem; } } @media (max-width: 576px) { h1 { font-size: 32px; } h2 { font-size: 26px; } h3 { font-size: 18px; } h4 { font-size: 16px; } .container { width: 100%; } .container-fluid { padding: 0 15px; } .page-heading { font-size: 3rem; } .breadcrub-style-2 .page-heading { font-size: 2.5rem; } .popover-section .popover-container { margin: 0 1rem; } .blogs-area-section .container-fluid { margin-top: 2rem; } .breadcrub-style-5 .heading { height: 70px; } .breadcrub-style-5 .heading h1 { font-size: 4rem; bottom: -2rem; } .pagination-style-3 .current { font-size: 2.5rem; } .pagination-style-3 .current::after { width: 120px; height: 1px; left: 52px; } .pagination-style-3 .total { font-size: 14px; } .header_section { padding-left: 50px; height: 40vh; min-height: 360px; } .header_section .social-icon { left: 20px; top: 30%; } .header_section .single-header-item .bg-image { width: 80%; height: 100%; } .header_section .header-carousel { height: 100%; } .header_section .header-carousel>div { height: 100%; } .header_section .header-carousel .owl-dots { position: absolute; left: -30px; bottom: 0; } .header_section .header-carousel .owl-nav { left: 20%; } .header_section .single-header-item .content-area { padding-top: 5vh; } .header_section .single-header-item .content-area .title { width: 80vw; } .header_section .single-header-item .content-area .boxed-btn { margin: 0px; width: 140px; } .blog-style-2 .container .blog-carousel-wrap { width: 100%; } .model-alert { width: 300px; padding: 2rem; } .questions-section .container-fluid .content { padding: 0; } .features-section .media, .features-section .content { padding: 0; } .countdown-style-2 h6 { letter-spacing: 1px; } .countdown-style-2 .time-con .time { margin: 1rem 4px; } .countdown-style-2 .time-con .time:after { content: ""; } .range-slider-con { width: 320px; } .range-slider-con .pmd-range-slider { width: 250px; } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb { margin-top: 25px; } .testimonial-style-1 .testimonial-thumbnail-slider .single-testimonial-thumb .img { height: 60px !important; width: 60px !important; } .event-item-style-1 .details .event-infos .info:not(:first-child) { margin-left: 1rem !important; } .event-item-style-1 .details .event-infos .info i { margin: 6px; } .video-popup .video-popup-wrapper .v-container { width: 100%; margin: 25vh auto; } .card-body img { clear: both; display: block; margin-left: auto; margin-right: auto; text-align: center; } .tab1 img { clear: both; display: block; margin-left: auto; margin-right: auto; text-align: center; } .video-popup .video-popup-wrapper .v-container .close-popup { height: 30px; width: 30px; right: 0px; top: 0px; border-radius: 50% 0 50% 50%; } .video-popup .video-popup-wrapper .v-container .buttons { left: 0px; bottom: 20px; } .video-popup .video-popup-wrapper .v-container .buttons button { height: 30px; width: 30px; } .video-popup .video-popup-wrapper .v-container .buttons button i { font-size: 14px; } .video-popup .video-popup-wrapper .v-container .share { bottom: 76px; left: 35px; } .video-popup .video-popup-wrapper .v-container .share .social-icons i { margin: 8px; font-size: 14px; } .opening-popup, .location-popup, .form-popup { width: 320px; } .opening-popup .content, .location-popup .content, .form-popup .content { padding: 2rem; } .side-form-popup #location-map { height: 200px; } .testimonial-style-1 .testimonial-slider-dots { left: -5px; } .testimonial-style-1 .testimonial-thumbnail-slider { height: 130px; padding: 0 25px; } .alert { width: 300px; } .cookies { width: 300px; } .breadcrub-style-1 { height: 250px; } .breadcrub-style-1 .heading { right: 50%; top: 50%; transform: translate(50%, -50%); width: 85%; padding: 20px; } .breadcrub-style-1 .heading h1 { font-size: 2.8rem; } .courses-section .card-columns { column-count: 1; } .blogs-area-section .blog { margin-right: 0; } .blog-section .container .blog-carousel-wrap { margin: 6rem 12px 4rem 12px; } .breadcrub-style-6 { height: 220px; } .events-section-style-2 .container .event h1 { font-size: 3rem; } .events-section-style-2 .container .event .details .event-infos .info { margin-right: 1.5rem; } .event-detail .container-fluid { padding: 0 15px; } .event-detail .container-fluid .content .form-style-3 .form-group .range-slider-con .pmd-range-slider { width: 72%; } .breadcrub-style-2 { height: 200px; } .breadcrub-style-2 .breadcrub-style { margin-top: 1rem; } .questions-section .container-fluid { padding: 0 1rem; } .membership-plan .container-fluid .content .payment button { margin-right: 1rem; } .contact-details-section .message-from { margin-top: 2rem; } .course-enrolment { padding: 0 1rem; } .coming-soon .content { padding: 0 2rem; } .coming-soon .content .title { font-size: 3rem; margin: 100px 0 40px 0; } .coming-soon .content form { width: 90%; } .countdown-style-1 .divider { margin: 0 0.5rem; } .author-section img { margin-bottom: 2rem; } .author-section .about { margin-top: 0.5rem; } .more-carousel-1 { padding: 2rem 0 0 0; } .course-detail .container-fluid .content .summary .data { display: block; } .course-detail .container-fluid .content .summary .data table { width: 100%; } .showcase-style-4 { height: 480px; min-height: 480px; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content { padding: 120px 15px 50px 15px; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content h1 { margin-bottom: 1rem; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content h1::after { display: none; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .main-content img { width: 45%; } .showcase-style-4 .content-wrapper .slick-list .slick-track .content .media { top: 65px; min-height: 420px; height: 420px; width: 50vw; margin-left: 50vw; position: absolute; } .showcase-style-4 .slider-indicator-3 { left: 15px; } .showcase-style-4 .slider-indicator-2 { right: 15px; } .showcase-style-4 .slider-indicator-2 .slick-dots button { font-size: 1rem; font-weight: 300; } .showcase-style-4 .slider-indicator-2 .slick-dots .slick-active button { font-weight: 700; color: var(--white); } .trending-lessons .lessons .lesson .title h2::after { width: 50%; } .free-trial-lesson { padding: 3rem 0; } .free-trial-lesson .container .countdown-style-1 { margin: 3rem auto; flex-direction: column; } .free-trial-lesson .container .countdown-style-1>div { margin: 1rem auto; } .free-trial-lesson .container .countdown-style-1>div h1 { font-size: 3rem; font-weight: 400; } .free-trial-lesson .container .countdown-style-1 .divider { display: none; } .blogs-section-2 .container .slider-indicator-2 { left: 5px; } .blogs-section-2 .container .slider-indicator-2 .slick-dots button { font-size: 14px; } .blogs-section-2 .container .main-btn { margin: 2rem auto 8rem auto; } .blogs-section-2 .container .slider-indicator-3 { left: 50%; transform: translateX(-50%); bottom: -60px; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item .content { left: 20px; text-align: center; } .showcase-style-3 .container-fluid .slider-wrapper .slider-item .content .main-content .main-btn { margin: 1rem auto; } .showcase-style-3 .container-fluid .indicator-style-3 { top: 80px; right: 10px; } .showcase-style-3 .container-fluid .indicator-style-3 .indicators { margin: 1rem 0; } .showcase-style-3 .container-fluid .indicator-style-3 .indicators .indicator { height: 10px; } .showcase-style-3 .container-fluid .indicator-style-3 .indicators .active { height: 25px; } .showcase-style-3 .container-fluid .indicator-style-3 .current { font-size: 30px; } .showcase-style-3 .container-fluid .indicator-style-3 i { margin: 0; font-size: 11px; font-weight: 600; } .showcase-style-5 { height: 400px; margin-top: 1rem; min-height: auto; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content { margin: 50px 10px auto 40px; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form { margin-top: 2rem; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form input { width: 70%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .content .main-content form .main-btn { width: 40%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media .video-bg { top: 0px; right: -1rem; height: 100%; width: 200%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media .video-bg .halfway-btn { width: 50px; height: 50px; left: 70%; top: 30%; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media .video-bg .halfway-btn i { font-size: 1rem; } .showcase-style-5 .row .slider-wrapper .content-wrapper .media .pagination-style-3 { left: -100%; } .showcase-style-5 .carousel-controlar { left: 5px; } .showcase-style-5 .pagination-style-3 { bottom: 20px; } .stripped-package-table tbody tr>th { padding-left: 1rem; } .basic-package-table tbody tr>th { padding-left: 1rem; } .testimonials-style-3 .container .lg-text { font-size: 3.6rem; } .testimonials-style-3 .container .testimonial .testimonial-slider-wrapper .testimonial-slider .content { margin: 3rem 2rem 6rem 2rem; } .testimonials-style-3 .container .testimonial .testimonial-slider-wrapper .slick-list { margin: 0; } .testimonials-style-3 .container .carousel-controlar { left: 10px; } .opportunity-section h2 { margin-bottom: 2rem; } .opportunity-section .main-btn { margin: 2rem 0; } .footer-style-2 .footer-content .brand-logo { height: 30px; } .breadcrub-style-1 .container-fluid .heading { width: 70%; } .carousel-icon { top: -9vh; } .carousel-icon .icon { transform: scale(0.7); } #navbar { display: none; } .navbar-small-mobile { display: block; } #reviews .container { padding: 1rem; } #reviews .container .reviews-carousel { width: 70%; margin: 1rem auto; } #reviews .container .reviews-carousel .item { transform: scale(0.8); } #reviews .container .carousel-indicator .indicator { transform: scale(0.7); margin: 0; } #blog .carousel .carousel-indicator { left: -20px; top: 60%; } #footer .footer-content { text-align: center; } #footer .footer-content>div { margin-top: 1rem; } #footer .footer-content .contact-links { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } #footer .footer-content .newsletter { text-align: left; } #footer .footer-content .newsletter form input { width: 60%; } #footer .footer-content .newsletter form .main-btn { width: 35%; } } .accordion-wrapper .card .card-header a[aria-expanded=false] { background-color: var(--icon-color); color: var(--white); font-weight: 400; } @media only screen and (max-width: 920px) { /* horizontal scrollbar for tables if mobile screen */ table { overflow-x: auto; display: block; } .hg_section .tabbable li { padding: 0px 10px; } } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; right: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; z-index: 444; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 15px; color: #818181; display: block; transition: 0.3s } .sidenav h4 { padding: 8px 8px 8px 32px; text-decoration: none; color: #818181; display: block; transition: 0.3s } .sidenav .bits { border-bottom: 1px solid #818181; font-weight: 1000; } .sidenav a:hover, .offcanvas a:focus { color: #f1f1f1; } .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px !important; margin-left: 50px; z-index: 444; } #main { position: sticky; float: right; transition: margin-right .5s; padding-left: 50px; padding-top: 5px; padding-bottom: 5px; color: white; background-color: #111; width: 35px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; top: 120px; z-index: 444; } .plus { padding-right: 15px; } @media (max-width: 750px) { .sidenav { display: none; } #main { display: none; } }