/* important code for course section */ @media only screen and (max-width: 700px) { #category-data .col-md-6, #category-data .col-sm-6 { max-width: 50% !important; } } @media only screen and (min-width: 700px) { #category-data .col-md-6, #category-data .col-sm-6 { max-width: 25% !important; } } #category-data { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .bootstrap-styles .card-footer { padding: .75rem 1.25rem; background-color: #fff !important; border-top: none !important; } #ixsfal { position: absolute; right: 47px; bottom: 20px; } .banner { position: relative; } .banner-content { position: absolute; height: 30%; width: 50%; padding: 50px; background: rgba(0, 0, 0, 0.6); z-index: 3; top: 50%; transform: translateY(-50%); left: 100px; } .txt-rotate { border-right: 3px solid #ffa555; padding-right: 10px; color: #fff; } @media only screen and (max-width: 500px) { .banner-content { z-index: 3; top: 50%; width: 80%; transform: translateY(-50%); left: 10px; padding: 10px 5px; } .banner-content h1 { font-size: 18px; } } /* important code for course section */ ul { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; height: auto; } #service .single_service { padding: 25px; height: 190px; margin-bottom: 25px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } #service .single_service:hover { box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.4); transition: 1s; } #service .single_service:hover .icon { color: #fff; } #service .icon { border-radius: 5%; color: #F8C01B; font-size: 35px; line-height: 65px; overflow: hidden; text-align: center; text-decoration: none; width: 70px; } #service .single_service .single_service-left { padding-right: 25px; } .single_service-heading { font-size: 13px !important; font-weight: 700; text-transform: uppercase; color: #000; } .brand_border .fa.fa-minus { color: #fff; font-size: 8px; height: 2px; background: #F8C01B none repeat scroll 0 0; width: 100px; } .single_service-body p { font-size: 13px; line-height: 25px; } .single_service-left { display: table-cell; vertical-align: top; } .single_service-body { color: #333333; display: table-cell; vertical-align: top; } .hvr-curl-top-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; } #service .single_service:hover { background: #F8C01B none repeat scroll 0 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', sans-serif; font-weight: 700; letter-spacing: 1px; } label img, footer img { vertical-align: middle; max-height: 41px !important; } .h3, h3 { font-size: 1.3rem; } p { font-family: 'Poppins', sans-serif; font-family: 'Roboto', sans-serif; font-weight: 400; line-height: 1.5em; letter-spacing: 1px; font-size: 16px; } li { margin-bottom: 10px; } .purple-text { color: #3f4c9a !important } .box h3 { font-size: 1.4em; } .nav-link:hover::after { width: 100%; } .hero-section h1 { font-size: 2.5em; letter-spacing: 2px; } .hero-section p { font-size: 1.2em; } .theme-color { color: #3d4d9a; } .theme-bg { background-color: #3d4d9a; color: #fff; } .btn-primary { background: #3f4c9a !important; color: #fff; border-radius: 5px; transition: .5s; } .btn-primary:hover { background: #4b59b2; } .btn-warning { background: #fbb545 !important; color: #fff; border-radius: 5px; transition: .5s; } .btn-warning:hover { background: #fba925; } .text-warning { color: #fbb545 !important; } .text-primary { color: #3f4c9a !important; } .hero-section { height: 600px; background-size: cover; background-repeat: no-repeat no-repeat; background-position: center center; width: 100%; background-image: url('/s/pages/assets/images/banner.jpg'); } .box { text-align: center; padding: 10px 30px; display: block; margin: auto; height: 360px; -webkit-box-shadow: 0px 2px 23px 1px rgba(128, 128, 128, .5); -moz-box-shadow: 0px 2px 23px 1px rgba(128, 128, 128, .5); box-shadow: 0px 2px 23px 1px rgba(128, 128, 128, .5); border-radius: 40px; } .bg-default { background-color: #f6f6f6; } .features-icon li i { width: 50px; height: 50px; font-size: 1.2em; background: #3f4c9a !important; line-height: 50px; text-align: center; color: #fff; border-radius: 50%; margin-right: 20px; } .section-title { margin: 20px 0px; text-align: center; font-weight: 400; font-size: 2.5em; } .section-title span { font-weight: 900; } /* testimonial*/ p.sub-test span { color: #ef9632; font-size: 3em; margin-right: 0.3em; } .testi_grid h5 { color: #ef9632; letter-spacing: 1px; font-size: 0.9em; text-transform: uppercase; } .testi-img-res img, .media img { border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; width: 75px !important; } .testi_grid p { font-size: 13px; line-height: 0.5em; } .testimonials_grid_box { margin: 0px auto; padding-top: 50px; } .owl-nav { position: absolute; top: 10px; left: 10px; } .owl-nav i { line-height: 49px; font-size: 3em; color: #fff; margin: 6px 5px; height: 60px; width: 60px; line-height: 60px; text-align: center; background: orange; } .topbar-social-item { height: 50px; width: 50px; line-height: 50px !important; text-align: center; color: #fff; font-size: 1.5em !important; border: 1px solid #fff; border-radius: 50%; margin-right: 30px; margin-bottom: 20px; transition: .4s; } .topbar-social-item:hover { color: #3f4c9a !important; background: #fff; } .about-member { background-image: url('https://ayasa.spayee.com//s/pages/assets/images/3.jpg'); background-size: cover; min-height: 300px; padding: 100px 0 50px 0; background-repeat: no-repeat no-repeat; } .about-member img { border-radius: 50%; border: 3px solid #fff; box-shadow: 5px 5px 10px #fbb545; } .heading-type5 { color: #fbb545 !important; position: relative; margin-bottom: 50px; } .bg-purple { background: #3f4c9a !important; color: #fff; } .bg-pink { background: #fef6eb; } .heading-type5:before { content: ""; width: 100px; background: #fbb545; position: absolute; height: 1px; bottom: -10px; margin-left: 0px; } .text-warning { color: #fbb545 !important; } .course-section { min-height: 400px; } .course-section .sidebar { padding: 35px 0px 10px 35px; } .course-section .sidebar h3 { font-size: 2em; letter-spacing: 2px; margin-bottom: 30px; } .course-section .sidebar ul li a { display: block; color: #fff; padding: 10px 0px; text-decoration: none; position: relative; font-size: 16px; } .course-section .sidebar ul li a:hover, .course-section .sidebar ul li a.active { color: #fbb545; text-decoration: none; } .course-section .sidebar ul li a.active:after { content: ""; position: absolute; height: 100%; width: 10px; right: 0px; top: 0px; background: #fbb545; } .course-section .sidebar ul li a.active { color: #fbb545; text-decoration: none; } .course-section .sidebar ul li a:hover .sidebar ul li a:after { content: ""; position: absolute; height: 100%; width: 10px; right: 0px; top: 0px; background: #fbb545; } .special-style2 .cl333 .bg.bd-left { border-top-left-radius: 50px; } .special-style2 .cl333 .bg { background: #fbb545; padding: 51px 40px 59px 40px; text-align: center; height: 210px; color: #fff; } .special-style2 .cl333 { width: 33.333%; float: left; } .special-style2 .cl333 .bg a { color: #fff !important; font-size: 24px; font-weight: 600; } .special-style2 .cl333 .bg p { margin-top: 12px; font-size: 15px; line-height: 24px; } .special-style2 .cl333 .bg.bd-right { border-top-right-radius: 50px; } .special-style2 .cl333 .bg.active { background: #ffaa21; } @media only screen and (max-width: 767px) { .special-style2 .cl333 { width: 100%; float: unset; margin-bottom: 20px; } } @media only screen and (min-width: 767px) { .special-style2 { margin-bottom: -100px; } } .spectre footer { display: none !important; } .bottom-type2 { background: #39468f; padding: 30px 0px; color: #fff; } .footer-type2 { background-image: url(https://ayasa.spayee.com/s/pages/assets/images/footer.jpg); background-size: cover; } #footer #footer-widget .widget-nav-menu li a { font-size: 17px; color: #fff; font-weight: 300; } #footer #footer-widget .widget-nav-menu { list-style: none; } #footer #footer-widget .widget-social-media li { display: inline-block; list-style: none; padding-right: 26px; } footer a { color: #ffffff !important; } footer a:hover { text-decoration: none; color: :orange; } #footer #footer-widget .widget.widget-title { font-size: 24px; font-weight: 700; margin-bottom: 36px; } @media screen and (max-width: 600px) { .owl-nav i { line-height: 49px; font-size: 1em; color: #fff; margin: 6px 5px; height: 35px; width: 35px; line-height: 35px; text-align: center; background: orange; } .special-style2 .cl333 .bg.bd-left { border-top-left-radius: 0px; } .special-style2 .cl333 .bg.bd-right { border-top-right-radius: 0px; } } .website-loader { background-color: #1e6cc7; width: 100%; height: 100vh; margin: 0; } .bookshelf_wrapper { position: relative; top: 60%; left: 50%; transform: translate(-50%, -50%); } .books_list { margin: 0 auto; width: 300px; padding: 0; } .book_item { position: absolute; top: -120px; box-sizing: border-box; list-style: none; width: 40px; height: 120px; opacity: 0; background-color: #1e6cc7; border: 5px solid white; transform-origin: bottom left; transform: translateX(300px); animation: travel 2500ms linear infinite; } .book_item.first { top: -140px; height: 140px; } .book_item.first:before, .book_item.first:after { content: ''; position: absolute; top: 10px; left: 0; width: 100%; height: 5px; background-color: white; } .book_item.first:after { top: initial; bottom: 10px; } .book_item.second:before, .book_item.fifth:before, .book_item.second:after, .book_item.fifth:after { box-sizing: border-box; content: ''; position: absolute; top: 10px; left: 0; width: 100%; height: 17.5px; border-top: 5px solid white; border-bottom: 5px solid white; } .book_item.second:after, .book_item.fifth:after { top: initial; bottom: 10px; } .book_item.third:before, .book_item.third:after { box-sizing: border-box; content: ''; position: absolute; top: 10px; left: 9px; width: 12px; height: 12px; border-radius: 50%; border: 5px solid white; } .book_item.third:after { top: initial; bottom: 10px; } .book_item.fourth { top: -130px; height: 130px; } .book_item.fourth:before { box-sizing: border-box; content: ''; position: absolute; top: 46px; left: 0; width: 100%; height: 17.5px; border-top: 5px solid white; border-bottom: 5px solid white; } .book_item.fifth { top: -100px; height: 100px; } .book_item.sixth { top: -140px; height: 140px; } .book_item.sixth:before { box-sizing: border-box; content: ''; position: absolute; bottom: 31px; left: 0px; width: 100%; height: 5px; background-color: white; } .book_item.sixth:after { box-sizing: border-box; content: ''; position: absolute; bottom: 10px; left: 9px; width: 12px; height: 12px; border-radius: 50%; border: 5px solid white; } .book_item:nth-child(2) { animation-delay: 416.6666666667ms; } .book_item:nth-child(3) { animation-delay: 833.3333333333ms; } .book_item:nth-child(4) { animation-delay: 1250ms; } .book_item:nth-child(5) { animation-delay: 1666.6666666667ms; } .book_item:nth-child(6) { animation-delay: 2083.3333333333ms; } .shelf { width: 300px; height: 5px; margin: 0 auto; background-color: white; position: relative; } .shelf:before, .shelf:after { content: ''; position: absolute; width: 100%; height: 100%; background: #1e6cc7; background-image: radial-gradient(rgba(255, 255, 255, 0.5) 30%, transparent 0); background-size: 10px 10px; background-position: 0 -2.5px; top: 200%; left: 5%; animation: move 250ms linear infinite; } .shelf:after { top: 400%; left: 7.5%; } @keyframes move { from { background-position-x: 0; } to { background-position-x: 10px; } } @keyframes travel { 0% { opacity: 0; transform: translateX(300px) rotateZ(0deg) scaleY(1); } 6.5% { transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1); } 8.8% { transform: translateX(273.6px) rotateZ(0deg) scaleY(1); } 10% { opacity: 1; transform: translateX(270px) rotateZ(0deg); } 17.6% { transform: translateX(247.2px) rotateZ(-30deg); } 45% { transform: translateX(165px) rotateZ(-30deg); } 49.5% { transform: translateX(151.5px) rotateZ(-45deg); } 61.5% { transform: translateX(115.5px) rotateZ(-45deg); } 67% { transform: translateX(99px) rotateZ(-60deg); } 76% { transform: translateX(72px) rotateZ(-60deg); } 83.5% { opacity: 1; transform: translateX(49.5px) rotateZ(-90deg); } 90% { opacity: 0; } 100% { opacity: 0; transform: translateX(0px) rotateZ(-90deg); } }