JezK
Edit File: ownstyle.css
/** * Template Name: BizPage - v3.0.0 * Template URL: https://bootstrapmade.com/bizpage-bootstrap-business-template/ * Author: BootstrapMade.com * License: https://bootstrapmade.com/license/ */ /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ @font-face { font-family: 'Numans'; src: url('path/to/Numans.ttf') format('truetype'); } body { background: #fff; color: #666666; /* font-family: 'Roboto-Regular', sans-serif; */ font-family: 'Numans', sans-serif; } a { color: #18d26e; transition: 0.5s; } a:hover, a:active, a:focus { color: #fbcf00; outline: none; text-decoration: none; } p { padding: 0; margin: 0 0 30px 0; } h1, h2, h3, h4, h5, h6 { /* font-family: "Montserrat", sans-serif; */ /* font-family: 'Roboto-Regular', sans-serif; */ font-family: 'Numans', sans-serif; font-weight: 400; margin: 0 0 20px 0; padding: 0; } strong h3{ font-size: 17px; font-weight: 600; font-family: 'Numans', sans-serif; padding-left:10px; } /* Back to top button */ .back-to-top { position: fixed; display: none; /* background: #fbcf00; */ /* color: #fff; */ /* width: 44px; height: 44px; */ text-align: center; line-height: 1; font-size: 16px; border-radius: 50%; right: 15px; bottom: 15px; transition: background 0.5s; z-index: 11; } .back-to-top i { padding-top: 12px; color: #fff; } @media only screen and (min-width: 320px) and (max-width: 500px) { .homecontnt p { text-align: justify; margin-bottom: 0px !important; font-size: 17px; color: #14295e; padding: 12px; } .welcome_content .row p { font-size: 17px; line-height: 35px; color: #00295E; padding: 13px; } } @media (max-width: 768px) { .back-to-top { bottom: 15px; } } /* Prelaoder */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; overflow: hidden; background: #fff; } #preloader:before { content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid #f2f2f2; border-top: 6px solid #18d26e; border-radius: 50%; width: 60px; height: 60px; -webkit-animation: animate-preloader 1s linear infinite; animation: animate-preloader 1s linear infinite; } @-webkit-keyframes animate-preloader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate-preloader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ #header { transition: all 0.5s; z-index: 997; padding: 26px 0; background: rgba(0, 0, 0, 0.9); } #header.header-transparent { /* background: transparent; */ } #header.header-scrolled { /* background: rgba(0, 0, 0, 0.9); */ background: #00295E; padding: 18px 0; } #header .logo { font-size: 34px; margin: 0; padding: 0; line-height: 1; /* font-family: "Montserrat", sans-serif; */ font-family: 'Numans', sans-serif; font-weight: 700; letter-spacing: 3px; /* padding-left: 10px; */ /* border-left: 4px solid #18d26e; */ } #header .logo a { color: #fff; } #header .logo img { /* max-height: 40px; */ } @media (max-width: 992px) { #header .logo { font-size: 28px; } } /*-------------------------------------------------------------- # Navigation Menu --------------------------------------------------------------*/ /* Desktop Navigation */ .nav-menu ul { margin: 0; padding: 0; list-style: none; } .nav-menu>ul { display: flex; } .nav-menu>ul>li { position: relative; white-space: nowrap; padding: 10px 0 10px 28px; } .nav-menu a { display: block; position: relative; color: #fff; transition: 0.3s; font-size: 12px; /* font-family: "Montserrat", sans-serif; */ font-family: 'Numans', sans-serif; text-transform: uppercase; font-weight: 600; } .nav-menu a:hover, .nav-menu .active>a, .nav-menu li:hover>a { color: #18d26e; } .nav-menu .drop-down ul { display: block; position: absolute; left: 14px; top: calc(100% + 30px); z-index: 99; opacity: 0; visibility: hidden; padding: 10px 0; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: 0.3s; } .nav-menu .drop-down:hover>ul { opacity: 1; top: 100%; visibility: visible; } .nav-menu .drop-down li { min-width: 180px; position: relative; } .nav-menu .drop-down ul a { padding: 10px 20px; font-size: 13px; text-transform: none; color: #333333; } .nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active>a, .nav-menu .drop-down ul li:hover>a { color: #18d26e; } .nav-menu .drop-down>a:after { content: "\ea99"; /* font-family: IcoFont; */ font-family: 'Numans', sans-serif; padding-left: 5px; } .nav-menu .drop-down .drop-down ul { top: 0; left: calc(100% - 30px); } .nav-menu .drop-down .drop-down:hover>ul { opacity: 1; top: 0; left: 100%; } .nav-menu .drop-down .drop-down>a { padding-right: 35px; } .nav-menu .drop-down .drop-down>a:after { content: "\eaa0"; /* font-family: IcoFont; */ font-family: 'Numans', sans-serif; position: absolute; right: 15px; } @media (max-width: 1366px) { .nav-menu .drop-down .drop-down ul { left: -90%; } .nav-menu .drop-down .drop-down:hover>ul { left: -100%; } .nav-menu .drop-down .drop-down>a:after { content: "\ea9d"; } } /* Mobile Navigation */ .mobile-nav-toggle { position: fixed; right: 15px; top: 15px; z-index: 9998; border: 0; background: none; font-size: 24px; transition: all 0.4s; outline: none !important; line-height: 1; cursor: pointer; text-align: right; } .mobile-nav-toggle i { color: #fff; } .mobile-nav { position: fixed; top: 55px; right: 15px; bottom: 15px; left: 15px; z-index: 9999; overflow-y: auto; background: #fff; transition: ease-in-out 0.2s; opacity: 0; visibility: hidden; border-radius: 10px; padding: 10px 0; } .mobile-nav * { margin: 0; padding: 0; list-style: none; } .mobile-nav a { display: block; position: relative; color: #333333; padding: 10px 20px; font-weight: 500; outline: none; } .mobile-nav a:hover, .mobile-nav .active>a, .mobile-nav li:hover>a { color: #18d26e; text-decoration: none; } .mobile-nav .drop-down>a:after { content: "\ea99"; /* font-family: IcoFont; */ font-family: 'Numans', sans-serif; padding-left: 10px; position: absolute; right: 15px; } .mobile-nav .active.drop-down>a:after { content: "\eaa1"; } .mobile-nav .drop-down>a { padding-right: 35px; } .mobile-nav .drop-down ul { display: none; overflow: hidden; } .mobile-nav .drop-down li { padding-left: 20px; } .mobile-nav-overly { width: 100%; height: 100%; z-index: 9997; top: 0; left: 0; position: fixed; background: rgba(26, 26, 26, 0.6); overflow: hidden; display: none; transition: ease-in-out 0.2s; } .mobile-nav-active { overflow: hidden; } .mobile-nav-active .mobile-nav { opacity: 1; visibility: visible; } .mobile-nav-active .mobile-nav-toggle i { color: #fff; } /*-------------------------------------------------------------- # Intro Section --------------------------------------------------------------*/ #intro { width: 100%; height: 100vh; background: #000; overflow: hidden; position: relative; } @media (max-height: 500px) { #intro { height: 150vh; } } #intro .carousel, #intro .carousel-inner, #intro .carousel-item, #intro .carousel-item::before { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } #intro .carousel-item { background-size: cover; background-position: center; background-repeat: no-repeat; } #intro .carousel-item::before { content: ''; background-color: rgba(0, 0, 0, 0.281); } #intro .carousel-container { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; top: 70px; left: 50px; right: 50px; } #intro .container { text-align: center; } #intro h2 { color: #fff; margin-bottom: 30px; font-size: 48px; /* font-weight: 700; */ /* font-family: 'Roboto-Regular', sans-serif; */ font-family: 'Numans', sans-serif; } @media (max-width: 768px) { #intro h2 { font-size: 28px; } } #intro p { width: 100%; margin: 0 auto 30px auto; color: #fff; /* font-family: 'Roboto-Regular', sans-serif; */ font-family: 'Numans', sans-serif; } @media (min-width: 1024px) { #intro p { width: 60%; } } #intro .carousel-fade { overflow: hidden; } #intro .carousel-fade .carousel-inner .carousel-item { transition-property: opacity; } #intro .carousel-fade .carousel-inner .carousel-item, #intro .carousel-fade .carousel-inner .active.carousel-item-left, #intro .carousel-fade .carousel-inner .active.carousel-item-right { opacity: 1; } #intro .carousel-fade .carousel-inner .active, #intro .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left, #intro .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right { opacity: 1; transition: 0.5s; } #intro .carousel-fade .carousel-inner .carousel-item-next, #intro .carousel-fade .carousel-inner .carousel-item-prev, #intro .carousel-fade .carousel-inner .active.carousel-item-left, #intro .carousel-fade .carousel-inner .active.carousel-item-right { left: 0; transform: translate3d(0, 0, 0); } #intro .carousel-control-prev, #intro .carousel-control-next { width: 10%; } @media (min-width: 1024px) { #intro .carousel-control-prev, #intro .carousel-control-next { width: 5%; } } #intro .carousel-control-next-icon, #intro .carousel-control-prev-icon { background: none; font-size: 32px; line-height: 1; } #intro .carousel-indicators li { cursor: pointer; } #intro .btn-get-started { /* font-family: "Montserrat", sans-serif; */ font-family: 'Numans', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 8px 32px; border-radius: 50px; transition: 0.5s; margin: 10px; color: #fff; background: #14295e; box-shadow: 0px 0px 20px #6d91ea; } #intro .btn-get-started:hover { background: #fff; color: #14295e; } .slider_des { color: #f6cb04 !important; font-size: 30px !important; text-transform: capitalize; line-height: 1.5; } .scrollDown { position: absolute; bottom: 0; width: 100%; text-align: center; left: 0; } .scrollDown a { scroll-behavior: smooth; } /*-------------------------------------------------------------- # Sections --------------------------------------------------------------*/ section { overflow: hidden; } /* Sections Header --------------------------------*/ .section-header h3 { font-size: 40px; color: #111; text-transform: capitalize; text-align: center; font-weight: 500; position: relative; padding-bottom: 30px; margin-bottom: 50px; } .section-header h3::before { content: ''; position: absolute; display: block; width: 80px; height: 3px; background: #002160; bottom: 0px; left: calc(50% - 50px); } .section-header h3::after { content: ''; position: absolute; display: block; width: 50px; height: 3px; background: #fbcf00; bottom: 0; left: calc(50% - 0px); } .section-header p { text-align: center; padding-bottom: 30px; color: #333; } /* Section with background --------------------------------*/ .section-bg { background: #f7f7f7; } /*-------------------------------------------------------------- # Breadcrumbs --------------------------------------------------------------*/ .breadcrumbs { padding: 20px 0; background-color: #f7f7f7; min-height: 40px; margin-top: 90px; } @media (max-width: 992px) { .breadcrumbs { margin-top: 80px; } } .breadcrumbs h2 { font-size: 24px; margin-bottom: 0; font-weight: 400; } .breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-size: 14px; } .breadcrumbs ol li+li { padding-left: 10px; } .breadcrumbs ol li+li::before { display: inline-block; padding-right: 10px; color: #6c757d; content: "/"; } @media (max-width: 768px) { .breadcrumbs .d-flex { display: block !important; } .breadcrumbs ol { display: block; } .breadcrumbs ol li { display: inline-block; } } /* Featured Services Section --------------------------------*/ #featured-services { background: #000; } #featured-services .box { padding: 30px 20px; } #featured-services .box-bg { background-image: linear-gradient(0deg, #000000 0%, #242323 50%, #000000 100%); } #featured-services i { color: #18d26e; font-size: 48px; display: inline-block; line-height: 1; } #featured-services h4 { font-weight: 400; margin: 15px 0; font-size: 18px; } #featured-services h4 a { color: #fff; } #featured-services h4 a:hover { color: #18d26e; } #featured-services p { font-size: 14px; line-height: 24px; color: #fff; margin-bottom: 0; } /* About Us Section --------------------------------*/ #about { /* background: url("../img/frontImg/about-bg.jpg") center top no-repeat fixed; */ background: white; background-size: cover; padding: 60px 0 40px 0; position: relative; } #contact-us { background: url("../img/frontImg/intro-carousel/3.jpg") center top no-repeat fixed; background-size: cover; padding: 60px 0 40px 0; position: relative; } #about::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.92); z-index: 9; } #contact-us::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; /* background: rgba(255, 255, 255, 0.29); */ z-index: 9; } #about .container { position: relative; z-index: 10; } #about .container-fluid { position: relative; z-index: 10; } #contact-us .container { position: relative; z-index: 10; } #about .about-col .img { position: relative; } .about-col { /* background: url(../img/frontImg/testimonials-bg.png); */ background-size: 100%; background-repeat: no-repeat; height: 24rem; border: 3px solid rgb(193 219 239); border-radius: 45px; box-shadow: 0 4px 5px 2px rgb(193 219 239); } #about .about-col .img .icon img { border-radius: 50%; } #about .about-col .icon { width: 90px; height: 90px; padding-top: 0px; text-align: center; position: absolute; /* background-color: #18d26e; */ border-radius: 50%; text-align: center; border: 3px solid #00205f; left: calc( 50% - 45px); bottom: -60px; transition: 0.3s; box-shadow: 0px 0px 12px #000; } #about .about-col i { font-size: 36px; line-height: 1; color: #fff; transition: 0.3s; } #about .about-col:hover .icon { background-color: #fff; } #about .about-col:hover i { color: #18d26e; } /* #about .about-col h2 { width: 100%; color: #000; text-align: center; font-weight: 700; font-size: 18px !important; padding: 0; */ /* margin: 40px 0 12px 0; */ /* text-transform: uppercase; position: absolute; left: 50%; bottom: 65px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } */ #about .about-col h2 { width: 100%; color: #000; text-align: center; font-weight: 700; font-size: 18px!important; padding: 0; text-transform: uppercase; position: absolute; left: 50%; /* bottom: 65px; */ -webkit-transform: translateX(-50%); transform: translateX(-50%); } #about .about-col h2 a { color: #000; font-size: 23px; } #about .about-col h2 a:hover { color: #18d26e; } #about .about-col p { word-break: break-all; font-size: 17px; line-height: 2; color: #333; margin-bottom: 0; padding: 67px 20px 0px 20px; /* text-align: center; */ text-align: justify; } /* Services Section --------------------------------*/ #services { background: #fff; background-size: cover; padding: 80px 0 40px 0; } #services .box { margin-bottom: 60px; } #services .icon { /* float: left; */ text-align: center; } #services .icon i { color: #18d26e; font-size: 36px; line-height: 1; transition: 0.5s; } #services .title { text-align: center; /* margin-left: 60px; */ font-weight: 500; margin-bottom: 15px; font-size: 20px; margin-top: 15px; line-height: 1.5; } #services .title a { color: #62666a; } #services .box:hover .title a { color: #18d26e; } #services .description { font-size: 14px; margin-left: 60px; line-height: 24px; margin-bottom: 0; } /* Call To Action Section --------------------------------*/ #call-to-action { background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(0, 0, 0, 0.1)), url(../img/call-to-action-bg.jpg) fixed center center; background-size: cover; padding: 60px 0; } #call-to-action h3 { color: #fff; font-size: 17px; font-weight: 700; } #call-to-action p { color: #fff; } #call-to-action .cta-btn { /* font-family: "Montserrat", sans-serif; */ font-family: 'Numans', sans-serif; text-transform: uppercase; font-weight: 500; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 8px 28px; border-radius: 25px; transition: 0.5s; margin-top: 10px; border: 2px solid #fff; color: #fff; } #call-to-action .cta-btn:hover { background: #18d26e; border: 2px solid #18d26e; } /* Call To Action Section --------------------------------*/ #skills { padding: 60px 0; } #skills .progress { height: 35px; margin-bottom: 10px; } #skills .progress .skill { /* font-family: 'Roboto-Regular', sans-serif; */ font-family: 'Numans', sans-serif; line-height: 35px; padding: 0; margin: 0 0 0 20px; text-transform: uppercase; } #skills .progress .skill .val { float: right; font-style: normal; margin: 0 20px 0 0; } #skills .progress-bar { width: 1px; text-align: left; transition: .9s; } /* Facts Section --------------------------------*/ #facts { background: url("../img/facts-bg.jpg") center top no-repeat fixed; background-size: cover; padding: 60px 0 0 0; position: relative; } #facts::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.88); z-index: 9; } #facts .container { position: relative; z-index: 10; } #facts .counters span { /* font-family: "Montserrat", sans-serif; */ font-family: 'Numans', sans-serif; font-weight: bold; font-size: 48px; display: block; color: #18d26e; } #facts .counters p { padding: 0; margin: 0 0 20px 0; /* font-family: "Montserrat", sans-serif; */ font-family: 'Numans', sans-serif; font-size: 14px; color: #111; } #facts .facts-img { text-align: center; padding-top: 30px; } /* Portfolio Section --------------------------------*/ #portfolio { padding: 60px 0; } #portfolio #portfolio-flters { padding: 0; margin: 5px 0 35px 0; list-style: none; text-align: center; } #portfolio #portfolio-flters li { cursor: pointer; margin: 15px 15px 15px 0; display: inline-block; padding: 10px 20px; font-size: 12px; line-height: 20px; color: #666666; border-radius: 4px; text-transform: uppercase; background: #fff; margin-bottom: 5px; transition: all 0.3s ease-in-out; } #portfolio #portfolio-flters li:hover, #portfolio #portfolio-flters li.filter-active { background: #18d26e; color: #fff; } #portfolio #portfolio-flters li:last-child { margin-right: 0; } #portfolio .portfolio-wrap { box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08); transition: 0.3s; } #portfolio .portfolio-wrap:hover { box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16); } #portfolio .portfolio-item { position: relative; height: 360px; overflow: hidden; } #portfolio .portfolio-item figure { background: #000; overflow: hidden; height: 240px; position: relative; border-radius: 4px 4px 0 0; margin: 0; } #portfolio .portfolio-item figure:hover img { opacity: 0.4; transition: 0.3s; } #portfolio .portfolio-item figure .link-preview, #portfolio .portfolio-item figure .link-details { position: absolute; display: inline-block; opacity: 0; line-height: 1; text-align: center; width: 36px; height: 36px; background: #fff; border-radius: 50%; transition: 0.2s linear; } #portfolio .portfolio-item figure .link-preview i, #portfolio .portfolio-item figure .link-details i { padding-top: 6px; font-size: 22px; color: #333; } #portfolio .portfolio-item figure .link-preview:hover, #portfolio .portfolio-item figure .link-details:hover { background: #18d26e; } #portfolio .portfolio-item figure .link-preview:hover i, #portfolio .portfolio-item figure .link-details:hover i { color: #fff; } #portfolio .portfolio-item figure .link-preview { left: calc(50% - 38px); top: calc(50% - 18px); } #portfolio .portfolio-item figure .link-details { right: calc(50% - 38px); top: calc(50% - 18px); } #portfolio .portfolio-item figure:hover .link-preview { opacity: 1; left: calc(50% - 44px); } #portfolio .portfolio-item figure:hover .link-details { opacity: 1; right: calc(50% - 44px); } #portfolio .portfolio-item .portfolio-info { background: #fff; text-align: center; padding: 30px; height: 90px; border-radius: 0 0 3px 3px; } #portfolio .portfolio-item .portfolio-info h4 { font-size: 18px; line-height: 1px; font-weight: 700; margin-bottom: 18px; padding-bottom: 0; } #portfolio .portfolio-item .portfolio-info h4 a { color: #333; } #portfolio .portfolio-item .portfolio-info h4 a:hover { color: #18d26e; } #portfolio .portfolio-item .portfolio-info p { padding: 0; margin: 0; color: #b8b8b8; font-weight: 500; font-size: 14px; text-transform: uppercase; } /* Portfolio Details --------------------------------*/ .portfolio-details { padding-top: 30px; } .portfolio-details .portfolio-details-container { position: relative; } .portfolio-details .portfolio-details-carousel { position: relative; z-index: 1; } .portfolio-details .portfolio-details-carousel .owl-nav, .portfolio-details .portfolio-details-carousel .owl-dots { margin-top: 5px; text-align: left; } .portfolio-details .portfolio-details-carousel .owl-dot { display: inline-block; margin: 0 10px 0 0; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd !important; } .portfolio-details .portfolio-details-carousel .owl-dot.active { background-color: #18d26e !important; } .portfolio-details .portfolio-info { padding: 30px; position: absolute; right: 0; bottom: -70px; background: #fff; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); z-index: 2; } .portfolio-details .portfolio-info h3 { font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .portfolio-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px; } .portfolio-details .portfolio-info ul li+li { margin-top: 10px; } .portfolio-details .portfolio-description { padding-top: 50px; } .portfolio-details .portfolio-description h2 { width: 50%; font-size: 26px; font-weight: 700; margin-bottom: 20px; } .portfolio-details .portfolio-description p { padding: 0 0 0 0; } @media (max-width: 768px) { .portfolio-details .portfolio-description h2 { width: 100%; } .portfolio-details .portfolio-info { position: static; margin-top: 30px; } } /* Clients Section --------------------------------*/ #clients { padding: 60px 0; } #clients img { max-width: 100%; opacity: 0.5; transition: 0.3s; padding: 15px 0; } #clients img:hover { opacity: 1; } #clients .owl-nav, #clients .owl-dots { margin-top: 5px; text-align: center; } #clients .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; } #clients .owl-dot.active { background-color: #18d26e; } /* Testimonials Section --------------------------------*/ #testimonials { padding: 60px 0; } #testimonials .section-header { margin-bottom: 40px; } #testimonials .testimonial-item { text-align: center; } #testimonials .testimonial-item .testimonial-img { width: 120px; border-radius: 50%; border: 4px solid #fff; margin: 0 auto; } #testimonials .testimonial-item h3 { font-size: 20px; font-weight: bold; margin: 10px 0 5px 0; color: #111; } #testimonials .testimonial-item h4 { font-size: 14px; color: #999; margin: 0 0 15px 0; } #testimonials .testimonial-item .quote-sign-left { margin-top: -15px; padding-right: 10px; display: inline-block; width: 37px; } #testimonials .testimonial-item .quote-sign-right { margin-bottom: -15px; padding-left: 10px; display: inline-block; max-width: 100%; width: 37px; } #testimonials .testimonial-item p { font-style: italic; margin: 0 auto 15px auto; } @media (min-width: 992px) { #testimonials .testimonial-item p { width: 80%; } } #testimonials .owl-nav, #testimonials .owl-dots { margin-top: 5px; text-align: center; } #testimonials .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; } #testimonials .owl-dot.active { background-color: #18d26e; } /* Team Section --------------------------------*/ #team { background: #fff; padding: 60px 0; } #team .member { text-align: center; margin-bottom: 20px; background: #000; position: relative; } #team .member .member-info { opacity: 0; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; top: 0; left: 0; right: 0; transition: 0.2s; } #team .member .member-info-content { margin-top: -50px; transition: margin 0.2s; } #team .member:hover .member-info { background: rgba(0, 0, 0, 0.7); opacity: 1; transition: 0.4s; } #team .member:hover .member-info-content { margin-top: 0; transition: margin 0.4s; } #team .member h4 { font-weight: 700; margin-bottom: 2px; font-size: 18px; color: #fff; } #team .member span { font-style: italic; display: block; font-size: 13px; color: #fff; } #team .member .social { margin-top: 15px; } #team .member .social a { transition: none; color: #fff; } #team .member .social a:hover { color: #18d26e; } #team .member .social i { font-size: 18px; margin: 0 2px; } /* Contact Section --------------------------------*/ #contact { padding: 60px 0; } #contact .contact-info { margin-bottom: 20px; text-align: center; } #contact .contact-info i { font-size: 48px; display: inline-block; margin-bottom: 10px; color: #18d26e; } #contact .contact-info address, #contact .contact-info p { margin-bottom: 0; color: #000; } #contact .contact-info h3 { font-size: 18px; margin-bottom: 15px; font-weight: bold; text-transform: uppercase; color: #999; } #contact .contact-info a { color: #000; } #contact .contact-info a:hover { color: #18d26e; } #contact .contact-address, #contact .contact-phone, #contact .contact-email { margin-bottom: 20px; } @media (min-width: 768px) { #contact .contact-address, #contact .contact-phone, #contact .contact-email { padding: 20px 0; } } @media (min-width: 768px) { #contact .contact-phone { border-left: 1px solid #ddd; border-right: 1px solid #ddd; } } #contact .php-email-form { box-shadow: 0 0 30px rgba(214, 215, 216, 0.6); padding: 30px; } #contact .php-email-form .validate { display: none; color: red; margin: 0 0 15px 0; font-weight: 400; font-size: 13px; } #contact .php-email-form .error-message { display: none; color: #fff; background: #ed3c0d; text-align: left; padding: 15px; font-weight: 600; } #contact .php-email-form .error-message br+br { margin-top: 25px; } #contact .php-email-form .sent-message { display: none; color: #fff; background: #18d26e; text-align: center; padding: 15px; font-weight: 600; } #contact .php-email-form .loading { display: none; background: #fff; text-align: center; padding: 15px; } #contact .php-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid #18d26e; border-top-color: #eee; -webkit-animation: animate-loading 1s linear infinite; animation: animate-loading 1s linear infinite; } #contact .php-email-form input, #contact .php-email-form textarea { padding: 10px 14px; border-radius: 0; box-shadow: none; font-size: 15px; } #contact .php-email-form input::focus, #contact .php-email-form textarea::focus { background-color: #18d26e; } #contact .php-email-form button[type="submit"] { background: #18d26e; border: 0; padding: 10px 30px; color: #fff; transition: 0.4s; cursor: pointer; } #contact .php-email-form button[type="submit"]:hover { background: #13a456; } @-webkit-keyframes animate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ #footer { /* background: #000; */ background: #202C36; padding: 0 0 30px 0; color: #eee; font-size: 14px; } #footer .footer-top { /* background: #111; */ background: #202C36; padding: 60px 0 30px 0; } #footer .footer-top .footer-info { margin-bottom: 30px; } #footer .footer-top .footer-info h3 { font-size: 34px; margin: 0 0 20px 0; /* padding: 2px 0 2px 10px; */ line-height: 1; /* font-family: 'Roboto-Regular', sans-serif; */ font-family: 'Numans', sans-serif; font-weight: 700; letter-spacing: 3px; /* border-left: 4px solid #18d26e; */ } #footer .footer-top .footer-info p { font-size: 16px; line-height: 30px; margin-bottom: 0; /* font-family: 'Roboto-Regular', sans-serif; */ font-family: 'Numans', sans-serif; color: #a7a7a7; /* word-spacing: 7px; */ } #footer .footer-top .social-links a { font-size: 18px; display: inline-block; background: #333; color: #a7a7a7; line-height: 1; padding: 8px 0; margin-right: 4px; border-radius: 50%; text-align: center; width: 36px; height: 36px; transition: 0.3s; } #footer .footer-top .social-links a:hover { background: #18d26e; color: #fff; } #footer .footer-top h4 { font-size: 20px; /* font-weight: bold; */ color: #fff; text-transform: uppercase; position: relative; padding-bottom: 12px; } #footer .footer-top h4::before, #footer .footer-top h4::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 70px; } #footer .footer-top h4::before { right: 0; background: #fdcd00; } #footer .footer-top h4::after { /* background: #022060; */ background: #f2f4f7; width: 35px; } #footer .footer-top .footer-links { margin-bottom: 30px; } #footer .footer-top .footer-links ul { list-style: none; padding: 0; margin: 0; } #footer .footer-top .footer-links ul i { padding-right: 8px; color: #ddd; } #footer .footer-top .footer-links ul li { /* border-bottom: 1px solid #333; */ padding: 5px 0; font-size: 17px; } #footer .footer-top .footer-links ul li:first-child { padding-top: 0; } #footer .footer-top .footer-links ul a { color: #a7a7a7; font-size: 16px; } #footer .footer-top .footer-links ul a:hover { color: #18d26e; } #footer .footer-top .footer-contact { margin-bottom: 30px; } #footer .footer-top .footer-contact p { line-height: 26px; font-size: 19px; color: #a7a7a7; } #footer .footer-top .footer-newsletter { margin-bottom: 30px; } #footer .footer-top .footer-newsletter input[type="email"] { border: 0; padding: 6px 8px; width: 65%; } #footer .footer-top .footer-newsletter input[type="submit"] { background: #18d26e; border: 0; width: 35%; padding: 6px 0; text-align: center; color: #fff; transition: 0.3s; cursor: pointer; } #footer .footer-top .footer-newsletter input[type="submit"]:hover { background: #13a456; } #footer .copyright { text-align: center; padding-top: 30px; } #footer .credits { text-align: center; font-size: 13px; color: #ddd; } .blog-heeadings { color: black; font-weight: 500; line-height: 1.2; } .blog-heeadings::first-letter { text-transform: capitalize; } .blog_para { /* text-transform: capitalize; */ font-family: 'Numans', sans-serif; } /* service css */ section.pricing { /* background: #007bff; */ background: white; /* background: linear-gradient(to right, #0062E6, #33AEFF); */ /* background: linear-gradient(to right, #0062E6, #33AEFF); */ } .pricing .card { border: none; border-radius: 22px; transition: all 0.2s; /* box-shadow: 0 0 10px #317ff3; */ box-shadow: 0 0 10PX #5ea5fd; /* box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); */ } .pricing hr { margin: 1.5rem 0; } .pricing .card-title { margin: 0.5rem 0; font-weight: bold; color: #00295B !important; font-size: 20px; letter-spacing: 0; } .pricing .card-price { font-size: 2rem; margin: 0; color: #00295B !important; font-weight: 600; } .pricing .card-price .period { font-size: 0.8rem; } .pricing ul li { /* padding-top: 3px; */ margin-bottom: 15px; } .pricing ul { /* height: 300px; */ } .pricing .text-muted { opacity: 0.7; } .pricing .btn { font-size: 80%; border-radius: 5rem; letter-spacing: .1rem; font-weight: bold; padding: 1rem; opacity: 0.7; transition: all 0.2s; } /* Hover Effects on Card */ @media (min-width: 992px) { .pricing .card:hover { /* margin-top: -.25rem; */ /* margin-bottom: .25rem; */ box-shadow: 0 0 10px #317ff3; /* box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3); */ } .pricing .card:hover .btn { opacity: 1; } } .buy-now { border: none; border-radius: 20px; padding: 9px 37px; box-shadow: 0 0 15px #626465; color: #00295E; background: white; font-weight: 600; font-size: 18px; } .t-text { font-size: 14px !important; color: white !important; } .c-text { color: white; } .form-contact { width: 75%; margin: 0 auto; } .labl-styl { color: white; font-weight: 600; } .input-styl { border: none; background: transparent; border-bottom: 2px solid #fff; border-radius: unset; padding: 0; color: white; } .input-styl:focus { /* color: #495057; */ color: #14295e; background-color: unset !important; border-color: unset !important; outline: unset !important; box-shadow: unset !important; } .input-styl:focus { /* color: #495057; */ color: #fff; background-color: unset !important; border-color: unset !important; outline: unset !important; box-shadow: unset !important; } .sendBtn, .sendBtn:hover { border-radius: 20px; padding: 10px 28px; box-shadow: 0 0 20px #00295E; background: #00295E; border-color: #00295E; color: white; font-weight: 600; } .viewMoreBtn, .viewMoreBtn:hover { border-radius: 25px; padding: 18px 33px; box-shadow: 0 0 20px #33d9ff; background: #00295E; border-color: #00295E; color: white; font-weight: 600; } .viewMoreDiv { padding-top: 40px; } .section-header ul { list-style-image: url('../img/frontImg/bullet.png'); line-height: 2.5; font-size: 23px; } .carousel-control-next-icon, .carousel-control-prev-icon { width: unset; height: unset; } .w-22 { width: 7%; } #about .about-col .icon1 img.quote-sign { padding-top: 8px; position: absolute; left: 30px; bottom: -40px; transition: 0.3s; } .serveImg { background: #00295E; border-radius: 20px; font-size: 25px; text-align: center; /* margin-right: 10px; */ border-radius: 50%; display: inline-block; /* padding: 16px; */ width: 100px; height: 100px; } .serveImg img { width: 100px; height: 100px; border-radius: 50%; } .premiumImg { height: 51px; width: 55px; } .cardBoxImg { border-top-right-radius: 20px; border-bottom-left-radius: 16px; background-image: url(../img/frontImg/box.png); background-repeat: no-repeat; background-position: bottom; border-bottom-right-radius: 16px; //background-size: 100% 80%; } .servicesBnr { height: 260px; background-image: url('../img/frontImg/services.png'); } .servcTxt, .blogTxt, .aboutTxt { padding-top: 130px; color: white; } .blogBnr { height: 260px; background-image: url('../img/frontImg/blog.png') } .aboutBnr { height: 260px; background-image: url('../img/frontImg/aboutus.png'); } .subBtn { color: white !important; background-color: #14295e !important; border-radius: 20px; } .pageMarginTab { /* border: 1px solid white; */ background: white; /* padding-top: 20px; */ border-radius: 20px; /* box-shadow: 0 0 10px #14295e; */ box-shadow: 0 0 14px #005cff; } .resndClr { color: #2a6496; font-weight: 600; } .frgPsw { color: #843534; font-weight: 600; } .newUserA { color: #2a6496; font-weight: 600; } .list-group-item { /* border: 0 !important; */ } .right-border-radius { border-top-right-radius: 19px; /* border-bottom-right-radius: 12px; */ } .left-border-radius { border-top-left-radius: 19px; /* border-bottom-left-radius: 12px; */ } #services { background-image: url('../img/frontImg/bg.jpg'); background-size: cover; } #about_section { padding: 5% 0; } /* */ .slick-slider { position: relative; display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0 } .slick-track { position: relative; top: 0; left: 0; display: block } .slick-track:before, .slick-track:after { display: table; content: '' } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { display: none; float: left; /* height: 100%; */ min-height: 1px; margin: 20px 0; } .slick-slide:focus { border: unset; outline: unset; } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .text_guide_bg { background: url('../img/frontImg/npte-guide.png'); background-size: 100% 100%; background-repeat: no-repeat; } .bg-yellow { background: #fccc00; border-radius: 10px; } .f-40 { font-size: 40px; } h5 .title { padding-top: 100px; } .pt-100 { padding-top: 75px !important; } /* .about-col { min-height: 300px; } */ .trending_tests { background: white; } .trending { background: #ccd2e0; } .flexslider { box-shadow: unset; -webkit-box-shadow: unset; } .flex-control-paging, .flex-direction-nav { display: none; } h4 .text-ifo { text-transform: capitalize; } .dropDownArr { color: #fccc00; font-size: 27px; vertical-align: middle; } #row:nth-child(odd) { flex-direction: row-reverse; } #row:nth-child(even) { flex-direction: row; } .slick-prev { /* background:#000; */ width: 50px; height: 50px; position: absolute; left: 0; top: 50%; -ms-transform: translateY(-50%); /* IE 9 */ -webkit-transform: translateY(-50%); /* Safari */ transform: translateY(-50%); z-index: 99; cursor: pointer; } .slick-next { /* background:#000; */ width: 50px; height: 50px; position: absolute; right: 0; top: 50%; -ms-transform: translateY(-50%); /* IE 9 */ -webkit-transform: translateY(-50%); /* Safari */ transform: translateY(-50%); cursor: pointer; } .carousel-indicators { display: none; } .fa-ul li p, .fa-ul li li { margin: 0 0 8px 0 !important; font-size: 22px !important; } .fa-ul { /* height: 310px !important; */ /* height: 265px !important; */ overflow-y: auto; margin-bottom: 40px; } .fa-ul::-webkit-scrollbar-track { /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */ background-color: #F5F5F5; border-radius: 10px; } .fa-ul::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } .fa-ul::-webkit-scrollbar-thumb { border-radius: 10px; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(222 222 222)), color-stop(0.72, rgb(160 171 185)), color-stop(0.86, rgb(132 135 146))); } .cursor-pointer { cursor: pointer; } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { #intro p { line-height: 36px; font-size: 20px !important; } .section-header h3 { font-size: 25px; } .viewMoreDiv { text-align: center !important; } .about-col { min-height: 265px; } #about .about-col p { line-height: 1.5; } .pt-100 { padding-top: 65px !important; } #about .about-col .icon { width: 70px; height: 70px; left: calc( 50% - 35px); bottom: -46px; } #footer .footer-top .footer-info p { width: 100% !important; } .slick-initialized .slick-slide { min-width: unset !important; } .icon_bg { text-align: center; } .blue_bg { margin-top: 5%; text-align: center; } #frontMenu li a { text-align: center; } /* .RegisterPage { padding-left: 0; padding-right: 0; } */ .reg_section { padding: 0 0 15% 0 !important; } .w-22 { width: 8%; } .front-logo { width: unset !important; } .text_guide_bg { /* background: url(../img/frontImg/npte-guide.png); */ background-size: contain; padding-bottom: 0 !important; } .bg-yellow img { width: auto; } .py-top { padding-top: 15px; } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {} /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {} @media only screen and (max-width: 768px) { .header-wrapper { background-color: #00295E !important; } .menu>li>a { margin-left: 17px; color: white; } .slick-initialized .slick-slide { min-width: unset !important; } #about .about-col p { line-height: 1.3; font-size: 15px; } .pt-100 { padding-top: 60px !important; } .about-col { min-height: 235px; } #about .about-col .icon { width: 70px; height: 70px; left: calc( 50% - 35px); bottom: -46px; } .page-form { width: 500px; } .f-40 { font-size: 19px; } .bg-yellow img { width: 20%; } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { /* #intro { height: 50vh; } */ } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { .example { background: pink; } } .regInput { display: flex; border-radius: 30px !important; padding: 10px 15px; margin-bottom: 30px; box-shadow: 0px 6px 20px #003efbba; } .regInput .fa { padding: 5px; font-size: 23px; color: #4e58da; } .regInput input, .regInput input:focus { padding: 0; border: 0; outline: none; box-shadow: unset !important; } .RegisterPage .body-content { padding: 15px 80px; position: relative; text-align: center; } .buttonCls:hover { background-image: linear-gradient(90deg, #00fcff, #0712d6); } .buttonCls { border: 0; background-image: linear-gradient(90deg, #0712d6, #00fcff); outline: none !important; } .regBtn { border: 0; } .reg_section { position: relative; top: -91px; }