Skip to content

kpoooo98/kleanservices

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

// / General CSS / // body { color: #444444; font-weight: 400; background: #ffffff; font-family: 'Barlow', sans-serif; }

h1, h2, h3, h4, h5, h6 { color: #202C45; }

a { color: #202C45; transition: .3s; }

a:hover, a:active, a:focus { color: #E81C2E; outline: none; text-decoration: none; }

.btn.btn-custom { padding: 10px 30px 12px 30px; text-align: center; font-size: 16px; font-weight: 500; color: #ffffff; background: #E81C2E; border: none; border-radius: 60px; box-shadow: inset 0 0 0 0 #202C45; transition: ease-out 0.5s; -webkit-transition: ease-out 0.5s; -moz-transition: ease-out 0.5s; }

.btn.btn-custom:hover { color: #E81C2E; background: #202C45; box-shadow: inset 200px 0 0 0 #202C45; }

.btn:focus, .form-control:focus { box-shadow: none; }

.container-fluid { max-width: 1366px; }

[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-size: inherit; margin-left: 0; }

// / Loader & Back to Top / // #loader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background: #ffffff; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s ease-out, visibility 0s linear .3s; -o-transition: opacity .3s ease-out, visibility 0s linear .3s; transition: opacity .3s ease-out, visibility 0s linear .3s; z-index: 999; }

#loader.show { -webkit-transition: opacity .6s ease-out, visibility 0s linear 0s; -o-transition: opacity .6s ease-out, visibility 0s linear 0s; transition: opacity .6s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; }

#loader .loader { position: relative; width: 45px; height: 45px; border: 5px solid #dddddd; border-top: 5px solid #E81C2E; border-radius: 50%; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; }

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.back-to-top { position: fixed; display: none; width: 44px; height: 44px; text-align: center; line-height: 1; font-size: 22px; right: 15px; bottom: 15px; transition: .5s; background: #E81C2E; border-radius: 44px; z-index: 9; }

.back-to-top i { color: #ffffff; padding-top: 10px; }

.back-to-top:hover { background: #202C45; }

// / Top Bar CSS ***********/ /**********/ .top-bar { position: relative; height: 75px; display: flex; align-items: center; background: #ffffff; }

.top-bar .logo { text-align: left; overflow: hidden; }

.top-bar .logo h1 { margin: -4px 0 0 0; color: #E81C2E; font-size: 50px; line-height: 50px; font-weight: 800; letter-spacing: 1px; font-style: italic; }

.top-bar .logo h1 span { color: #202C45; }

.top-bar .logo img { max-width: 100%; max-height: 60px; }

.top-bar .top-bar-item { display: flex; align-items: center; justify-content: flex-end; }

.top-bar .top-bar-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #202C45; border-radius: 40px; }

.top-bar .top-bar-icon i { margin: 0; color: #ffffff; font-size: 16px; }

.top-bar .top-bar-text { padding-left: 15px; }

.top-bar .top-bar-text h3 { margin: 0 0 5px 0; font-size: 18px; font-weight: 600; }

.top-bar .top-bar-text p { margin: 0; font-size: 14px; font-weight: 400; }

@media (max-width: 991.98px) { .top-bar .logo { text-align: center; } }

/**********/ /*********** Nav Bar CSS / // .nav-bar { position: relative; background: #202C45; }

.nav-bar.nav-sticky { position: fixed; width: 100%; top: 0; left: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); z-index: 999; }

.nav-bar .navbar { padding: 20px 0; background: #202C45 !important; transition: .3s; }

.nav-bar.nav-sticky .navbar { padding: 5px 0; }

.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link.active { color: #ffffff; padding: 15px; font-weight: 500; letter-spacing: 1px; }

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link.active { color: #E81C2E; }

.nav-bar .dropdown-menu { margin-top: 0; border: 0; border-radius: 0; background: #f8f9fa; }

.nav-bar .btn.btn-custom { color: #202C45; background: #ffffff; box-shadow: inset 0 0 0 0 #E81C2E; }

.nav-bar .btn:hover { color: #ffffff; background: #E81C2E; box-shadow: inset 200px 0 0 0 #E81C2E; }

@media (min-width: 992px) { .nav-bar .navbar-brand { display: none; } }

@media (max-width: 991.98px) { .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link.active { padding: 5px 0; }

.nav-bar .dropdown-menu {
    box-shadow: none;
}

.nav-bar .btn {
    display: none;
}

}

// / Hero CSS ***********/ /**********/ .carousel { position: relative; width: 100%; min-height: 400px; background: #ffffff; margin-bottom: 45px; }

.carousel .container-fluid { padding: 0; }

.carousel .carousel-item { position: relative; width: 100%; min-height: 400px; display: flex; align-items: center; justify-content: center; flex-direction: column; }

.carousel .carousel-img { position: relative; width: 100%; height: 100%; min-height: 400px; text-align: right; overflow: hidden; }

.carousel .carousel-img::after { position: absolute; content: ""; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); z-index: 1; }

.carousel .carousel-img img { width: 100%; height: 100%; object-fit: cover; }

.carousel .carousel-text { position: absolute; max-width: 992px; padding: 0 15px; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 2; }

.carousel .carousel-text h3 { color: #E81C2E; font-size: 20px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 0px; }

.carousel .carousel-text h1 { color: #ffffff; font-size: 90px; font-weight: 700; margin-bottom: 20px; text-transform: capitalize; }

.carousel .carousel-text p { max-width: 500px; color: #ffffff; font-size: 18px; margin-bottom: 40px; }

.carousel .btn.btn-custom { padding: 20px 45px 22px 45px; color: #ffffff; }

.carousel .btn.btn-custom:hover { color: #E81C2E; }

.carousel .owl-nav { position: absolute; width: 100%; height: 50px; top: calc(50% - 25px); left: 0; display: flex; justify-content: space-between; z-index: 9; }

.carousel .owl-nav .owl-prev, .carousel .owl-nav .owl-next { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: #ffffff; border-radius: 50px; background: rgba(256, 256, 256, .2); font-size: 22px; transition: .5s; }

.carousel .owl-nav .owl-prev { margin-left: 30px; }

.carousel .owl-nav .owl-next { margin-right: 30px; }

.carousel .owl-nav .owl-prev:hover, .carousel .owl-nav .owl-next:hover { color: #ffffff; background: #E81C2E; }

.carousel .animated { -webkit-animation-duration: 1s; animation-duration: 1s; }

@media (max-width: 991.98px) { .carousel .carousel-text h3 { margin-bottom: 5px; }

.carousel .carousel-text h1 {
    font-size: 60px;
}

.carousel .carousel-text p {
    font-size: 16px;
}

.carousel .carousel-text .btn {
    padding: 12px 30px;
    font-size: 15px;
    letter-spacing: 0;
}

}

@media (max-width: 767.98px) { .carousel .carousel-text h3 { font-size: 18px; letter-spacing: 2px; margin-bottom: 15px; }

.carousel .carousel-text h1 {
    font-size: 45px;
}

.carousel .carousel-text .btn {
    padding: 10px 25px;
    font-size: 15px;
    letter-spacing: 0;
}

}

@media (max-width: 575.98px) { .carousel .carousel-text h3 { font-size: 14px; letter-spacing: 1px; margin-bottom: 10px; }

.carousel .carousel-text h1 {
    font-size: 30px;
    margin-bottom: 15px;
}

.carousel .carousel-text p {
    margin-bottom: 25px;
}

.carousel .carousel-text .btn {
    padding: 8px 20px;
    font-size: 14px;
    letter-spacing: 0;
}

}

// / Page Header CSS / // .page-header { position: relative; margin-bottom: 45px; padding: 90px 0; text-align: center; background: #202C45; border-top: 1px dotted #ffffff; }

.page-header h2 { position: relative; color: #ffffff; font-size: 60px; font-weight: 700; margin-bottom: 20px; padding-bottom: 5px; }

.page-header h2::after { position: absolute; content: ""; width: 100px; height: 2px; left: calc(50% - 50px); bottom: 0; background: #ffffff; }

.page-header a { position: relative; padding: 0 12px; font-size: 22px; color: #ffffff; }

.page-header a:hover { color: #E81C2E; }

.page-header a::after { position: absolute; content: "/"; width: 8px; height: 8px; top: -2px; right: -7px; text-align: center; color: #ffffff; }

.page-header a:last-child::after { display: none; }

@media (max-width: 991.98px) { .page-header { padding: 60px 0; }

.page-header h2 {
    font-size: 45px;
}

.page-header a {
    font-size: 20px;
}

}

@media (max-width: 767.98px) { .page-header { padding: 45px 0; }

.page-header h2 {
    font-size: 35px;
}

.page-header a {
    font-size: 18px;
}

}

// / Section Header ********/ /*******/ .section-header { position: relative; width: 100%; max-width: 700px; margin: 0 auto 45px auto; }

.section-header p { display: inline-block; margin-bottom: 10px; padding-bottom: 5px; position: relative; font-size: 16px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #E81C2E; }

.section-header p::after { position: absolute; content: ""; width: 50%; height: 2px; left: 25%; bottom: 0; background: #E81C2E; }

.section-header.text-left p::after { left: 0; }

.section-header.text-right p::after { left: 50%; }

.section-header h2 { margin: 0; font-size: 45px; font-weight: 700; text-transform: capitalize; }

@media (max-width: 991.98px) { .section-header h2 { font-size: 45px; } }

@media (max-width: 767.98px) { .section-header h2 { font-size: 40px; } }

@media (max-width: 575.98px) { .section-header h2 { font-size: 35px; } }

// / About CSS / // .about { position: relative; width: 100%; padding: 45px 0 15px 0; }

.about .section-header { margin-bottom: 30px; margin-left: 0; }

.about .about-img img { width: 100%; border-radius: 5px; margin-bottom: 30px; }

.about .about-content { margin-bottom: 30px; }

.about .about-content ul { margin: 0; padding: 0; list-style: none; margin-bottom: 25px; }

.about .about-content ul li { margin-bottom: 5px; }

.about .about-content ul li i { margin-right: 8px; color: #E81C2E; }

// / Service CSS / // .service { position: relative; width: 100%; padding: 45px 0 0 0; }

.service .service-item { position: relative; width: 100%; display: flex; flex-direction: column; margin-bottom: 45px; }

.service .service-item i { color: #202C45; font-size: 75px; line-height: 75px; margin-bottom: 20px; }

.service .service-item [class^="flaticon-"]::before { margin: 0; font-size: 60px; line-height: 60px; background-image: linear-gradient(#E81C2E, #202C45); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: .5s; }

.service .service-item h3 { margin-bottom: 10px; font-size: 20px; font-weight: 700; letter-spacing: 1px; }

.service .service-item p { margin: 0; }

// / Facts CSS / // .facts { position: relative; width: 100%; min-height: 400px; margin: 45px 0; display: flex; align-items: center; background: #202C45; }

.facts .facts-item { display: flex; flex-direction: row; margin: 25px 0; }

.facts .facts-item i { margin-top: 15px; font-size: 45px; color: #E81C2E; }

.facts .facts-text { padding-left: 20px; }

.facts .facts-text h3 { position: relative; display: inline-block; color: #ffffff; font-size: 60px; font-weight: 700; }

.facts .facts-text h3::after { position: absolute; content: "\f067"; top: 0px; right: -25px; color: #ffffff; font-size: 25px; font-family: "Font Awesome 5 Free"; font-weight: 900; }

.facts .facts-text p { color: #ffffff; font-size: 18px; font-weight: 500; margin: 0; }

// / Pricing CSS / // .price { position: relative; width: 100%; padding: 45px 0 15px 0; }

.price .row { padding: 0 15px; }

.price .col-md-4 { padding: 0; }

.price .price-item { position: relative; margin-bottom: 30px; background: #ffffff; border-radius: 5px; text-align: center; }

.price .featured-item { box-shadow: 0 0 30px rgba(0, 0, 0, .2); z-index: 1; }

.price .price-header { padding: 45px 0 30px 0; }

.price .price-header h3 { font-size: 20px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

.price .price-header h2 { display: flex; align-items: flex-start; justify-content: center; font-size: 60px; font-weight: 700; letter-spacing: 5px; }

.price .price-header h2 span { font-size: 25px; line-height: 55px; }

.price .price-item.featured-item h2, .price .price-item.featured-item h3 { color: #E81C2E; }

.price .price-body { padding: 0 0 20px 0; }

.price .price-body ul { margin: 0; padding: 0; list-style: none; }

.price .price-body ul li { padding: 0 0 15px 0; }

.price .price-body ul li i { margin-right: 10px; }

.price .price-body ul li i.fa-check-circle { color: #39B972; }

.price .price-body ul li i.fa-times-circle { color: #cccccc; }

.price .price-item .price-footer { padding-bottom: 45px; }

.price .price-item .price-footer .btn.btn-custom { color: #E81C2E; background: #202C45; box-shadow: inset 0 0 0 0 #E81C2E; }

.price .price-item .price-footer .btn.btn-custom:hover { color: #ffffff; background: #E81C2E; box-shadow: inset 200px 0 0 0 #E81C2E; }

.price .price-item.featured-item .price-footer .btn.btn-custom { color: #ffffff; background: #E81C2E; box-shadow: inset 0 0 0 0 #202C45; }

.price .price-item.featured-item .price-footer .btn.btn-custom:hover { color: #E81C2E; background: #202C45; box-shadow: inset 200px 0 0 0 #202C45; }

/*********/ /******** Location CSS / // .location { position: relative; width: 100%; padding: 45px 0; }

.location .location-item { display: flex; margin-bottom: 30px; }

.location .location-item i { padding-top: 3px; font-size: 30px; color: #E81C2E; }

.location .location-text { padding-left: 15px; }

.location .location-text h3 { font-size: 18px; font-weight: 700; }

.location .location-text p { margin-bottom: 5px; }

.location .location-text p strong { margin-right: 5px; font-weight: 600; }

.location .location-form { padding: 45px 30px; background: #E81C2E; border-radius: 5px; }

.location .location-form h3 { color: #ffffff; font-size: 25px; font-weight: 700; margin-bottom: 25px; }

.location .location-form .control-group { margin-bottom: 15px; }

.location .location-form .form-control { height: 45px; color: #ffffff; padding: 0 15px; border-radius: 5px; border: 1px solid #ffffff; background: transparent; }

.location .location-form textarea.form-control { height: 120px; padding: 15px; }

.location .location-form .form-control::placeholder { color: #ffffff; opacity: 1; }

.location .location-form .form-control:-ms-input-placeholder, .location .location-form .form-control::-ms-input-placeholder { color: #ffffff; }

.location .location-form .btn.btn-custom { width: 100%; color: #E81C2E; background: #ffffff; box-shadow: inset 0 0 0 0 #202C45; }

.location .location-form .btn.btn-custom:hover { color: #ffffff; background: #E81C2E; box-shadow: inset 400px 0 0 0 #202C45; }

@media(min-width: 576px) and (max-width: 991.89px) { .location .location-form .btn.btn-custom:hover { box-shadow: inset 650px 0 0 0 #202C45; } }

/**********/ /*********** Team CSS / // .team { position: relative; width: 100%; padding: 45px 0 15px 0; }

.team .team-item { position: relative; margin-bottom: 30px; }

.team .team-img { position: relative; border-radius: 5px 5px 0 0; overflow: hidden; }

.team .team-img img { width: 100%; transition: .3s; }

.team .team-item:hover img { transform: scale(1.1); }

.team .team-text { position: relative; width: 100%; padding: 35px 30px 30px 30px; text-align: center; background: #202C45; border-radius: 0 0 5px 5px; transition: .5s; }

.team .team-item:hover .team-text { background: #E81C2E; }

.team .team-text h2 { color: #ffffff; font-size: 20px; font-weight: 600; letter-spacing: 1px; margin-bottom: 10px; }

.team .team-text p { margin: 0; color: #ffffff; }

.team .team-social { position: absolute; width: 100%; height: 40px; top: -20px; left: 0; text-align: center; font-size: 0; }

.team .team-social a { display: inline-block; width: 40px; height: 40px; margin: 0 3px; padding: 7px 0; text-align: center; font-size: 16px; color: #ffffff; background: #202C45; border-radius: 40px; transition: .5s; }

.team .team-item:hover .team-social a { background: #E81C2E; }

.team .team-social a:hover { color: #202C45; }

// / Testimonial CSS / // .testimonial { position: relative; width: 100%; padding: 45px 0; }

.testimonial .testimonials-carousel { position: relative; width: calc(100% + 30px); margin: 0 -15px; }

.testimonial .testimonial-item { position: relative; width: 100%; padding: 0 15px; display: flex; }

.testimonial .testimonial-item img { width: 80px; height: 80px; border-radius: 80px; transform: scale(.8); transition: 2s; }

.testimonial .owl-item.center .testimonial-item img { transform: scale(1); }

.testimonial .testimonial-text { width: calc(100% - 100px); padding-left: 20px; }

.testimonial .testimonial-text h3 { font-size: 18px; font-weight: 700; letter-spacing: 1px; margin-bottom: 5px; }

.testimonial .testimonial-text h4 { color: #777777; font-size: 15px; font-weight: 400; font-style: italic; margin-bottom: 10px; }

.testimonial .testimonial-text p { margin: 0; }

.testimonial .testimonial-text p::before { content: "\f10d"; font-size: 25px; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #E81C2E; margin-right: 10px; }

.testimonial .owl-dots { margin-top: 15px; text-align: center; }

.testimonial .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 10px; background: #dddddd; }

.testimonial .owl-dot.active { background: #E81C2E; }

/**********/ /*********** Blog CSS / // .blog { position: relative; width: 100%; padding: 45px 0 0 0; }

.blog .blog-item { margin-bottom: 45px; }

.blog .blog-img { position: relative; width: 100%; }

.blog .blog-img img { width: 100%; border-radius: 5px; }

.blog .meta-date { position: absolute; width: 70px; height: 70px; bottom: 10%; left: calc(50% - 35px); display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 70px; background: #202C45; color: #ffffff; opacity: 0; transition: .5s; }

.blog .meta-date span { font-size: 14px; font-weight: 400; letter-spacing: 1px; }

.blog .meta-date strong { font-size: 16px; font-weight: 700; line-height: 16px; letter-spacing: 3px; text-transform: uppercase; }

.blog .blog-item:hover .meta-date { bottom: calc(50% - 35px); opacity: 1; }

.blog .blog-text { padding: 25px 0 20px 0; }

.blog .blog-text h3 { font-size: 22px; font-weight: 700; }

.blog .blog-text h3 a { color: #202C45; }

.blog .blog-text h3 a:hover { color: #E81C2E; }

.blog .blog-text p { margin: 0; }

.blog .blog-meta { display: flex; }

.blog .blog-meta p { margin: 0; font-size: 14px; line-height: 14px; padding: 0 10px; border-right: 1px solid rgba(0, 0, 0, .15); }

.blog .blog-meta p:first-child { padding-left: 0; }

.blog .blog-meta p:last-child { padding-right: 0; border: none; }

.blog .blog-meta i { color: #999999; margin-right: 5px; }

.blog .blog-meta a { color: #999999; }

.blog .blog-meta a:hover { color: #E81C2E; }

.blog .pagination { margin-bottom: 15px; }

.blog .pagination .page-link { color: #202C45; border-radius: 0; border-color: #202C45; }

.blog .pagination .page-link:hover, .blog .pagination .page-item.active .page-link { color: #E81C2E; background: #202C45; }

.blog .pagination .disabled .page-link { color: #999999; }

// / Contact CSS / // .contact { position: relative; width: 100%; padding: 45px 0; }

.contact .contact-info { width: 100%; margin-bottom: 45px; padding: 35px 30px 10px 30px; border-radius: 5px; background: #202C45;

}

.contact .contact-info h2 { color: #ffffff; font-size: 25px; font-weight: 700; margin-bottom: 30px; }

.contact .contact-info-item { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 30px; }

.contact .contact-info-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 50px; }

.contact .contact-info-icon i { margin: 0; color: #202C45; font-size: 16px; }

.contact .contact-info-text { padding-left: 20px; }

.contact .contact-info-text h3 { margin: 0 0 5px 0; color: #ffffff; font-size: 18px; font-weight: 700; letter-spacing: 1px; }

.contact .contact-info-text p { margin: 0; color: #ffffff; font-size: 16px; font-weight: 500; }

.contact .contact-form { position: relative; width: 100%; margin-bottom: 45px; }

.contact .contact-form input { padding: 15px; border-radius: 5px; border: 1px solid #202C45; }

.contact .contact-form textarea { height: 125px; padding: 8px 15px; border-radius: 5px; border: 1px solid #202C45; }

.contact .help-block ul { margin: 0; padding: 0; list-style-type: none; }

.contact iframe { width: 100%; height: 400px; border-radius: 5px; }

// / Single Post CSS / // .single { position: relative; padding: 45px 0; }

.single .single-content { position: relative; margin-bottom: 30px; overflow: hidden; }

.single .single-content img { margin-bottom: 20px; width: 100%; border-radius: 5px; }

.single .single-tags { margin: -5px -5px 41px -5px; font-size: 0; }

.single .single-tags a { margin: 5px; display: inline-block; padding: 7px 15px; font-size: 14px; font-weight: 500; color: #202C45; border: 1px solid #202C45; border-radius: 5px; }

.single .single-tags a:hover { color: #ffffff; background: #E81C2E; border-color: #E81C2E; }

.single .single-bio { padding: 30px; background: #202C45; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 5px; }

.single .single-bio-img { width: 100%; max-width: 115px; padding: 15px; background: #ffffff; border-radius: 100px; margin-bottom: 20px; }

.single .single-bio-img img { width: 100%; border-radius: 100px; }

.single .single-bio-text { text-align: center; }

.single .single-bio-text h3 { color: #ffffff; font-size: 20px; font-weight: 700; letter-spacing: 1px; }

.single .single-bio-text p { color: #ffffff; margin: 0; }

.single .single-bio-social { margin-top: 20px; display: flex; }

.single .single-bio-social a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #202C45; background: #ffffff; border-radius: 40px; margin-right: 5px; transition: .5s; }

.single .single-bio-social a:last-child { margin: 0; }

.single .single-bio-social a:hover { color: #ffffff; background: #E81C2E; }

.single .single-related { margin-bottom: 45px; }

.single .single-related h2 { font-size: 30px; font-weight: 700; margin-bottom: 25px; }

.single .related-slider { position: relative; margin: 0 -15px; width: calc(100% + 30px); }

.single .related-slider .post-item { margin: 0 15px; }

.single .post-item { display: flex; align-items: center; margin-bottom: 15px; }

.single .post-item .post-img { width: 100%; max-width: 80px; }

.single .post-item .post-img img { width: 100%; border-radius: 5px; }

.single .post-item .post-text { padding-left: 15px; }

.single .post-item .post-text a { font-size: 17px; font-weight: 500; }

.single .post-item .post-text a:hover { color: #E81C2E; }

.single .post-item .post-meta { display: flex; margin-top: 8px; }

.single .post-item .post-meta p { display: inline-block; margin: 0; padding: 0 3px; font-size: 14px; font-weight: 400; font-style: italic; }

.single .post-item .post-meta p a { margin-left: 5px; color: #777777; font-size: 14px; font-weight: 400; font-style: normal; }

.single .related-slider .owl-nav { position: absolute; width: 90px; top: -55px; right: 15px; display: flex; }

.single .related-slider .owl-nav .owl-prev, .single .related-slider .owl-nav .owl-next { margin-left: 15px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: #202C45; border-radius: 5px; font-size: 16px; transition: .3s; }

.single .related-slider .owl-nav .owl-prev:hover, .single .related-slider .owl-nav .owl-next:hover { color: #ffffff; background: #E81C2E; }

.single .single-comment { position: relative; margin-bottom: 45px; }

.single .single-comment h2 { font-size: 30px; font-weight: 700; margin-bottom: 25px; }

.single .comment-list { list-style: none; padding: 0; }

.single .comment-child { list-style: none; }

.single .comment-body { display: flex; margin-bottom: 30px; }

.single .comment-img { width: 60px; }

.single .comment-img img { width: 100%; border-radius: 60px; }

.single .comment-text { padding-left: 15px; width: calc(100% - 60px); }

.single .comment-text h3 { font-size: 20px; font-weight: 600; margin-bottom: 3px; }

.single .comment-text span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 5px; }

.single .comment-text .btn { padding: 3px 10px; font-size: 14px; font-weight: 500; color: #202C45; background: #dddddd; border-radius: 5px; }

.single .comment-text .btn:hover { color: #ffffff; background: #E81C2E; }

.single .comment-form { position: relative; }

.single .comment-form h2 { font-size: 30px; font-weight: 700; margin-bottom: 25px; }

.single .comment-form form { padding: 30px; background: #f3f6ff; border-radius: 5px; }

.single .comment-form form .form-group:last-child { margin: 0; }

.single .comment-form input, .single .comment-form textarea { border-radius: 5px; border-color: #eeeeee; }

.single .comment-form input:focus, .single .comment-form textarea:focus { border-color: #E81C2E; }

.single .comment-form .btn { border-radius: 45px; }

/**********/ /*********** Sidebar CSS / // .sidebar { position: relative; width: 100%; }

@media(max-width: 991.98px) { .sidebar { margin-top: 45px; } }

.sidebar .sidebar-widget { position: relative; margin-bottom: 45px; }

.sidebar .sidebar-widget .widget-title { position: relative; margin-bottom: 30px; padding-bottom: 5px; font-size: 25px; font-weight: 700; }

.sidebar .sidebar-widget .widget-title::after { position: absolute; content: ""; width: 60px; height: 2px; bottom: 0; left: 0; background: #E81C2E; }

.sidebar .sidebar-widget .search-widget { position: relative; }

.sidebar .search-widget input { height: 50px; border: 1px solid #dddddd; border-radius: 5px; }

.sidebar .search-widget input:focus { box-shadow: none; border-color: #E81C2E; }

.sidebar .search-widget .btn { position: absolute; top: 6px; right: 15px; height: 40px; padding: 0; font-size: 25px; color: #202C45; background: none; border-radius: 0; border: none; transition: .3s; }

.sidebar .search-widget .btn:hover { color: #E81C2E; }

.sidebar .sidebar-widget .recent-post { position: relative; }

.sidebar .sidebar-widget .tab-post { position: relative; }

.sidebar .tab-post .nav.nav-pills { border-radius: 5px; overflow: hidden; }

.sidebar .tab-post .nav.nav-pills .nav-link { color: #ffffff; background: #202C45; border-radius: 0; }

.sidebar .tab-post .nav.nav-pills .nav-link:hover, .sidebar .tab-post .nav.nav-pills .nav-link.active { color: #ffffff; background: #E81C2E; }

.sidebar .tab-post .tab-content { padding: 15px 0 0 0; background: transparent; }

.sidebar .tab-post .tab-content .container { padding: 0; }

.sidebar .sidebar-widget .category-widget { position: relative; }

.sidebar .category-widget ul { margin: 0; padding: 0; list-style: none; }

.sidebar .category-widget ul li { margin: 0 0 12px 22px; }

.sidebar .category-widget ul li:last-child { margin-bottom: 0; }

.sidebar .category-widget ul li a { display: inline-block; line-height: 23px; font-weight: 500; letter-spacing: 1px; }

.sidebar .category-widget ul li::before { position: absolute; content: '\f105'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #E81C2E; left: 1px; }

.sidebar .category-widget ul li span { display: inline-block; float: right; }

.sidebar .sidebar-widget .tag-widget { position: relative; margin: -5px -5px; }

.single .tag-widget a { margin: 5px; display: inline-block; padding: 7px 15px; font-size: 14px; font-weight: 400; color: #202C45; border: 1px solid #202C45; border-radius: 5px; }

.single .tag-widget a:hover { color: #ffffff; background: #E81C2E; border-color: #E81C2E; }

.sidebar .image-widget { display: block; width: 100%; overflow: hidden; }

.sidebar .image-widget img { max-width: 100%; border-radius: 5px; transition: .3s; }

.sidebar .image-widget img:hover { transform: scale(1.1); }

/*/ / Footer CSS / // .footer { position: relative; margin-top: 45px; padding-top: 90px; background: #202C45; }

.footer .footer-contact, .footer .footer-link, .footer .footer-newsletter { position: relative; margin-bottom: 45px; color: #ffffff; }

.footer .footer-contact h2, .footer .footer-link h2, .footer .footer-newsletter h2 { margin-bottom: 30px; font-size: 20px; font-weight: 700; letter-spacing: 2px; color: #E81C2E; }

.footer .footer-link a { display: block; margin-bottom: 10px; color: #ffffff; transition: .3s; }

.footer .footer-link a::before { position: relative; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; }

.footer .footer-link a:hover { color: #E81C2E; letter-spacing: 1px; }

.footer .footer-contact p i { width: 25px; }

.footer .footer-social { position: relative; margin-top: 20px; display: flex; }

.footer .footer-social a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #202C45; background: #ffffff; border-radius: 40px; margin-right: 5px; transition: .5s; }

.footer .footer-social a:last-child { margin: 0; }

.footer .footer-social a:hover { color: #ffffff; background: #E81C2E; }

.footer .footer-newsletter form { position: relative; width: 100%; }

.footer .footer-newsletter input { margin-bottom: 15px; height: 45px; background: transparent; border: 1px solid #ffffff; border-radius: 5px; }

.footer .footer-newsletter label { margin-top: 5px; color: #777777; font-size: 14px; letter-spacing: 1px; }

.footer .footer-newsletter .btn.btn-custom { width: 100%; color: #202C45; background: #ffffff; box-shadow: inset 0 0 0 0 #E81C2E; }

.footer .footer-newsletter .btn:hover { color: #ffffff; background: #E81C2E; box-shadow: inset 200px 0 0 0 #E81C2E; }

.footer .copyright { text-align: center; padding-top: 15px; padding-bottom: 45px; }

.footer .copyright p { margin: 0; color: #ffffff; }

.footer .copyright p a { color: #E81C2E; font-weight: 700; letter-spacing: 1px; }

.footer .copyright p a:hover { color: #ffffff; }

About

Designed and deployed a service booking platform for a Bangalore-based car wash company. Built dynamic features including online booking and customer service management.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors