/*================== Template Name: blogbit Author : PxelCode Author URI : https://themeturn.com/ Description: Version : 1.0 ================================*/ /*------------------------------------------------------------------ [Table of contents] 1. Common 2. Typography 3. Navigation / #navbar 4. Banner 5. About 6. Service 7. Testimonials 8. Blog 9. Contact 10. Footer / #footer -------------------------------------------------------------------*/ :root { --theme-primary-color:#F96703; --theme-secondary-color:#0d43b6; --theme-primary-font:'Urbanist', sans-serif; --theme-secondary-font:'DM Sans', sans-serif; --theme-white-color:#fff; --theme-heading-color:#14133b; --theme-font-color:#5b6674; } body, html { width: 100%; max-width: 100%; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(238, 122, 122, 0); overflow-x: hidden; } body { font-family: var(--theme-secondary-font); font-size: 16px; line-height:1.6; margin: 0; text-align: left; background-color: #fff; font-weight: 400; color: var(--theme-font-color); } p { color: var(--theme-font-color); font-family: var(--theme-secondary-font); font-size: 16px; line-height: 1.6em; margin-bottom: 0px; } /*-------------------- TYPOGRAPHY -----------------*/ .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: var(--theme-primary-font); font-weight: 700; line-height: 1.3; color: var(--theme-heading-color); margin-bottom: 0px; transition: all 0.3s ease-in-out; } .h1, h1 { font-size: 46px; line-height: 56px; } .h2, h2 { font-size: 32px; } .h3, h3 { font-size: 28px; } .h4, h4 { font-size: 22px; } .h5, h5 { font-size: 18px; } .h6, h6 { font-size: 16px; } .text-sm { font-size: 14px; } .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; transition: all 0.3s ease-in-out; text-decoration: none; } .h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover, .h6 a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: var(--theme-primary-color); } a { color: var(--theme-primary-color); outline: none; transition: all 0.3s ease-in-out; } a:hover { color: var(--theme-secondary-color); outline: none; text-decoration: none; } /* a:focus, a:visited { outline: none; } button:focus, input:focus { outline: none; } */ .form-control { transition: all 0.3s ease-in-out; } .form-control:focus { box-shadow: none; } button{ transition: all .4s ease; } img{ max-width:100%; height:auto; } /*===================================== Spacing ===================================*/ .section-padding { padding: 100px 0px; } .section-padding-top { padding-top: 100px; } .section-padding-btm { padding-bottom: 100px; } .pb-70 { padding-bottom: 70px; } .mb-10 { margin-bottom: 10px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-25 { margin-bottom: 25px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-50 { margin-bottom: 50px !important; } .mb-60 { margin-bottom: 60px !important; } .mb-70 { margin-bottom: 70px !important; } .mb-80 { margin-bottom: 80px !important; } .mb-100 { margin-bottom: 100px; } .mb-120 { margin-bottom: 120px; } .mb--120 { margin-bottom: -120px; } .mb--200 { margin-bottom: -200px; } .mt--200 { margin-top: -200px; } .mt--300 { margin-top: -300px; } .pt-60 { padding-top: 60px; } .pt-80 { padding-top: 80px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pt-110 { padding-top: 210px; } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .pb-20 { padding-bottom: 20px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pt-150 { padding-top: 150px; } .pt-250 { padding-top: 250px !important; } .pt-200 { padding-top: 200px !important; } .mb--120 { margin-bottom: -120px; } /*===================================== Utitlies ===================================*/ .container-padding { padding: 0px 80px; } .letter-spacing-2 { letter-spacing: 2px; } .font-sm-14 { font-size: 14px; } .bg-gray { background: #F4F7FC; } .font-lg { font-size: 42px; line-height: 52px; } .page-wrapper { padding: 100px 0px; } textarea.form-control { height: auto; } .heading .subheading { display: inline-block; margin-bottom: 15px; } .heading h2 { text-transform: capitalize; } .subheading { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 600; font-family: var(--theme-primary-font); display: inline-block; color: #777; } .subheading i { margin-right: 10px; } .section-heading { position: relative; } .section-heading .big-title { font-size: 150px; color: #222; opacity: .04; position: absolute; bottom: -87px; text-transform: uppercase; left: 0px; right: 0px; text-align: center; } .section-heading h2 { text-transform: capitalize; } .font-primary { font-family: var(--theme-primary-font); } .font-secondary { font-family: var(--theme-secondary-font); } .bg-magenta { background: #1B202F; } .mb--100 { margin-bottom: -100px; } /*------------------- BUTTONS STYLE ----------------=----*/ .btn { font-weight: 700; position: relative; padding: 14px 35px; border-radius: 0px; font-size: 16px; text-transform: capitalize; font-family: var(--theme-primary-font); border: 2px solid transparent; z-index: 1; overflow: hidden; transition: all 0.6s ease; } .btn:before { position: absolute; content: ""; left: 0px; top: 0px; width: 40%; height: 100%; background: rgba(255, 255, 255, 0.06); transition: all 0.6s ease; } .btn:hover:before { width: 100%; } .btn:focus { box-shadow: none !important; } .rounded-radius { border-radius: 35px; } .btn-theme { background: var(--theme-primary-color); color: #fff; border-color: var(--theme-primary-color); } .btn-theme:hover { border-color: var(--theme-secondary-color); color: #fff; background: var(--theme-secondary-color); } .btn-theme-outline { background: transparent; color: var(--theme-primary-color); border-color: var(--theme-primary-color); } .btn-theme-outline:hover { background: var(--theme-primary-color); color: #fff; border-color: var(--theme-primary-color); } .btn-theme-2 { border-color: var(--theme-secondary-color); color: #fff; background: var(--theme-secondary-color); } .btn-theme-2:hover { background: var(--theme-primary-color); color: #fff; border-color: var(--theme-primary-color); } .btn-white { background: #fff; border-color: #fff; color: #000; } .btn-white:hover { border-color: var(--theme-primary-color); color: #fff; background: var(--theme-primary-color); } .btn-white-outline { background: transparent; border-color: #fff; color: #fff; } .btn-white-outline:hover { border-color: var(--theme-primary-color); color: #fff; background: var(--theme-primary-color); } .btn-black { background: #000; color: #fff; } .btn-black:hover { background: var(--theme-primary-color); border-color: var(--theme-primary-color); color: #fff; } .btn-dark-outline { color: #333; background: transparent; border-color: #333; } .btn-dark-outline:hover { border-color: #000; background: #000; color: #fff; } .btn-grey { border-color: #ddd; color: #222; background: #ddd; } .btn-grey:hover { border-color: var(--theme-primary-color); color: #fff; background: var(--theme-primary-color); } .btn-grey-outline { border-color: #ddd; background: transparent; } .btn-grey-outline:hover { border-color: var(--theme-primary-color); color: #fff; background: var(--theme-primary-color); } .btn-sm { padding: 8px 22px; } .btn-sm-2 { padding: 6px 22px; } .btn-radius { border-radius: 45px; } /*------------------------- Main Menu header -------------------------*/ .header-navbar .site-logo { width: 15%; } .header-navbar .site-logo a { max-width: 140px; } .mobile-logo { width: 50%; margin-left: 20px; margin-bottom: 30px; } .header-style-1 .site-logo h2 { color: #222; } .header-navbar .primary-menu li { position: relative; display: inline-block; } .header-navbar .primary-menu li a { font-size: 16px; font-weight: 600; color: #222; line-height: 1.4; text-transform: capitalize; font-family: var(--theme-primary-font); padding: 25px 0px; display: block; } .header-navbar .primary-menu li a:hover { opacity: 1; } .header-navbar .primary-menu li .menu-trigger { font-size: 12px; font-weight: 500; position: absolute; right: -10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1; transition: all 0.3s ease-out 0s; } .header-navbar .primary-menu li:not(:last-child) { margin-right: 40px; } @media (max-width: 1199px) { .header-navbar .primary-menu li:not(:last-child) { margin-right: 40px; } } .header-navbar .primary-menu li .sub-menu { position: absolute; left: 0; min-width: 250px; z-index: 99; height: auto; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; background: #fff; transition: 0.3s; top: 100%; border-top: 5px solid var(--theme-primary-color); } .header-navbar .primary-menu li .sub-menu li:hover .sub-menu { visibility: visible; opacity: 1; } .header-navbar .primary-menu li .sub-menu li .menu-trigger { right: 20px; } .header-navbar .primary-menu li .sub-menu li a { padding: 12px 20px 12px 10px; margin: 0px 20px; display: block; color: #000; border-radius: 3px; } .header-navbar .primary-menu li .sub-menu li a:hover { color: var(--theme-primary-color); } .header-navbar .primary-menu li .sub-menu li { line-height: 1; margin: 0; display: block; } .header-navbar .primary-menu li .sub-menu li:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .header-navbar .primary-menu li:hover > .sub-menu { visibility: visible; top: 100%; opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); } .header-navbar .primary-menu li .sub-menu li .sub-menu { left: 100%; top: 20%; } .header-navbar .primary-menu li .sub-menu li:hover > .sub-menu { top: 0; } .header-navbar .primary-menu li .sub-menu li .menu-trigger { color: #222; } .header-navbar .nav-toggler { width: 53px; height: 53px; background: #fff; display: inline-block; text-align: center; line-height: 53px; font-size: 20px; text-align: center; } .header-navbar .nav-toggler:hover { background: #d90429; color: #fff; } .header-navbar.mobile-menu .site-navbar { position: fixed; right: 0; top: 0; width: 280px; margin-right: -280px; height: 100vh; background-color: #00000a; z-index: 999; display: block; padding: 80px 0 40px; overflow-x: hidden; overflow-y: scroll; transition: all 0.3s ease-out 0s; } .header-navbar.mobile-menu .site-navbar.menu-on { margin-right: 0; } @media (max-width: 991px) { .header-navbar.mobile-menu .primary-menu li:not(:last-child) { margin-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } } .header-navbar.mobile-menu .primary-menu { display: block; } .header-navbar.mobile-menu .primary-menu li .sub-menu { position: unset; width: 100%; opacity: 1; visibility: visible; background-color: #00000a; border: none; transition: none; box-shadow: none; display: none; } .header-navbar a.nav-close { display: none; } .header-navbar.mobile-menu .site-navbar a.nav-close { position: absolute; top: 20px; right: 10px; font-size: 18px; line-height: 1; padding: 5px; color: #fff; z-index: 2; display: block; } .header-navbar.mobile-menu .primary-menu li .menu-trigger { position: absolute; right: 0; top: 0; height: 45px; width: 45px; display: flex; align-items: center; justify-content: center; -webkit-transform: translate(0); transform: translate(0); border-left: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; z-index: 2; } .header-navbar.mobile-menu .primary-menu li { display: block; } .header-navbar.mobile-menu .primary-menu li a { display: block; color: rgba(255, 255, 255, 0.8); padding: 12px 20px; font-size: 15px; } .header-navbar.mobile-menu .primary-menu li .sub-menu li { border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); transition: all .4s; display: block; } .header-navbar.mobile-menu .primary-menu li .sub-menu li:hover { background: #232323; } .nav-logo { left: 20px; position: absolute; top: 20px; } .header-navbar.mobile-menu .site-navbar.menu-on .sub-menu li a { color: #fff; } .header-navbar.mobile-menu .site-navbar.menu-on .sub-menu li a:hover { border-color: transparent; } .header-navbar.mobile-menu .site-navbar.menu-on .sub-menu li a:hover { color: #fff; } .offcanvas-icon .nav-toggler { background: #000; color: #fff; display: inline-block; width: 50px; height: 50px; text-align: center; line-height: 50px; } .offcanvas-icon .nav-toggler:hover { background: #d90429; } .menu_fixed { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999; background: #0E41AD; } /*-------------------------- Header style 2 -----------------------*/ .header-style-2 .header-navbar { border: 0px; } .header-style-2 .header-navbar .primary-menu li a { color: #000; } .header-style-2 .header-navbar .primary-menu li .menu-trigger { color: #000; } .header-style-2 .header-navbar .site-logo h2 { color: #000; } .header-style-2 .menu_fixed { background: #fff; box-shadow: 0px 16px 32px 0px rgba(196, 203, 255, 0.3); } .topbar-style-1 { background: var(--theme-primary-color); padding: 5px 0px; } .topbar-style-1 .header-info { color: #fff; font-family: var(--theme-primary-font); } .header-socials-2 li { padding: 0px 7px; } .header-socials-2 a { color: #fff; background: transparent; display: inline-block; text-align: center; font-size: 14px; } .banner-style-1 { background-size: cover; position: relative; z-index: 1; background: #f8f8f8; padding: 120px 0px; } .banner-style-1 .banner-content h1 { font-size: 60px; line-height: 70px; margin-bottom: 30px; font-weight: 700; text-transform: capitalize; } .banner-style-1 .banner-content p { margin-bottom: 35px; } .banner-style-1 .banner-img { position: relative; } .banner-style-1 .banner-img:before { position: absolute; content: ""; left: 0px; top: 0px; background: #e8e8e8; width: 100%; height: 100%; z-index: -1; right: 0px; text-align: center; } .banner-style-1 .banner-img-text { position: absolute; content: ""; bottom: 0px; left: 0px; background: #212223; padding: 30px; width: 80%; margin-left: -55px; margin-bottom: -55px; box-shadow: rgba(0, 0, 0, 0.04) 0px 6px 15px 0px; border-radius: 5px; } .banner-style-1 .banner-img-text h3 { color: #fff; margin-bottom: 20px; text-transform: capitalize; } .banner-style-1 .banner-img-text p { margin-bottom: 10px; color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 10px; } .banner-style-1 .banner-img-text .banner-socials li { color: var(--theme-primary-color); text-transform: capitalize; } .banner-style-1 .banner-img-text .banner-socials a { color: #fff; opacity: .8; } .banner-style-1 .banner-img-text .banner-socials a:hover { opacity: 1; color: #fff; } /*------------------- Banner style2 -------------------------*/ .banner-style-2 { padding: 80px 0px; background: rgba(180, 1, 1, 0.05); } .banner-style-2 .banner-content h1 { margin-bottom: 25px; font-weight: 600; font-size: 70px; line-height: 80px; } .banner-style-2 .banner-content .subheading { margin-bottom: 15px; } .banner-style-2 .banner-content .about-features li i { background: #fff; } /*----------------- Intro Feature section ---------------------*/ .intro-section { padding-top: 120px; padding-bottom: 80px; } .intro-box { border: 1px solid transparent; padding: 50px 25px; transition: all .4s ease; background: transparent; position: relative; } .intro-box:before { position: absolute; content: ""; left: 0px; top: 0px; width: 100%; height: 0; background: #F8F8F8; transition: all .4s ease; z-index: -1; } .intro-box:hover:before { height: 100%; } .intro-box .intro-icon { font-size: 40px; margin-bottom: 30px; color: var(--theme-primary-color); } .intro-box h4 { font-size: 20px; margin-bottom: 20px; text-transform: capitalize; } /*----------------- About section ---------------------*/ .about-section { position: relative; } .about-section:before { position: absolute; content: ""; left: 0px; top: 0px; width: 30%; height: 100%; background: #F8F8F8; transition: all .4s ease; z-index: -1; } .about-img { position: relative; } .about-img img { border: 15px solid var(--theme-primary-color); } .icon-box { cursor: pointer; clear: both; margin-bottom: 30px; } .icon-box:hover .icon i { background: #000; color: #fff; } .icon-box .icon { float: left; margin-right: 40px; margin-top: 8px; } .icon-box .icon i { width: 60px; height: 60px; background: #F8F8F8; border-radius: 100%; text-align: center; line-height: 60px; font-size: 30px; transition: all .4s; } .icon-box .content { overflow: hidden; } .icon-box .content span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--theme-primary-color); } .about-features { margin-top: 30px; } .about-features li { padding: 10px 0px; margin-bottom: 10px; } .about-features li i { float: left; margin-right: 10px; margin-top: 5px; } .about-features li h5 { overflow: hidden; } /*----------------------- Service Section -----------------------*/ .service-item { padding: 60px 40px 50px 40px; border: 2px solid rgba(0, 0, 0, 0.05); border: 10px solid #F8F8F8; background: #F8F8F8; transition: all .4s ease; position: relative; } .service-item:hover { background: #fff; box-shadow: rgba(0, 0, 0, 0.04) 0px 6px 15px 0px; border-color: var(--theme-primary-color); } .service-item:hover h3 span { color: var(--theme-primary-color); } .service-item .service-icon { font-size: 50px; margin-bottom: 40px; } .service-item h3 { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; transition: all .4s ease; font-size: 26px; text-transform: capitalize; } .service-item h3 span { font-size: 16px; color: #ddd; transition: all .4s ease; margin-right: 1px; } .service-item p { margin-bottom: 20px; } .service-features li { padding: 6px 0px; color: #111; } .service-features li i { margin-right: 8px; color: var(--theme-primary-color); } /*----------------------- Portfolio -----------------------*/ .portfolio { border-top: 1px solid #eee; } .portfolio-text h2 { font-size: 190px; line-height: 1; color: var(--theme-primary-color); } .main-grid { margin-right: -50px; } .portfolio-item .portfolio-img { position: relative; z-index: 1; } .portfolio-item .portfolio-img:before { position: absolute; content: ""; left: 0px; top: 0px; width: 0%; height: 100%; background: var(--theme-primary-color); opacity: 0; visibility: hidden; transition: all .4s; } .portfolio-item .portfolio-img:hover:before { opacity: .93; visibility: visible; width: 100%; } .portfolio-item .portfolio-img:hover .overlay-content { opacity: 1; visibility: visible; bottom: 0px; } .portfolio-item .portfolio-img:hover .overlay-icon { opacity: 1; visibility: visible; right: 20px; } .portfolio-item .overlay-content { position: absolute; content: ""; left: 0px; right: 0px; bottom: -20px; padding: 30px; opacity: 0; visibility: hidden; transition: all .4s; } .portfolio-item .overlay-content h4 { color: #fff; text-transform: capitalize; } .portfolio-item .overlay-content a:hover { color: #fff; } .portfolio-item .overlay-content p { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; } .portfolio-item .overlay-icon { position: absolute; content: ""; right: 0px; top: 20px; opacity: 0; visibility: hidden; transition: all .4s; } .portfolio-item .overlay-icon a { width: 45px; height: 45px; line-height: 45px; background: #fff; text-align: center; border-radius: 100%; display: block; border: 1px solid #fff; } .portfolio-item .overlay-icon a:hover { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.6); } /*----------------------- Counter Section -----------------------*/ .counter-item { margin-bottom: 40px; } .counter-item .counter-number { float: left; margin-right: 40px; margin-top: 10px; color: var(--theme-primary-color); font-weight: 700; } .counter-item .counter { font-size: 50px; } .counter-item .counter-text { overflow: hidden; } .counter-item .counter-text h4 { margin-bottom: 10px; } /*----------------------- Work Process -----------------------*/ .bg-black { background: #000; } .process .section-heading { position: relative; margin-bottom: 120px; } .process .section-heading h2 { color: #fff; } .process .section-heading .big-title { color: #fff; } .process-item { padding: 60px 40px; border: 1px solid rgba(255, 255, 255, 0.06); text-align: center; } .process-item .number { font-size: 70px; line-height: 1; font-weight: 700; display: block; margin-bottom: 20px; font-family: var(--theme-primary-font); color: var(--theme-primary-color); } .process-text h3 { color: #fff; margin-bottom: 15px; text-transform: capitalize; font-size: 24px; } .process-text p { color: #eee; font-size: 14px; } /*----------------------- Resume -----------------------*/ .resume-single { padding: 40px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .resume-single:last-child { border-bottom: 0px; } .resume-single .resume-heading h4 { color: #fff; text-transform: capitalize; margin-bottom: 15px; } .resume-single p { color: #fff; font-size: 14px; } .text-white { position: relative; margin-bottom: 60px; } .text-white h2 { color: #fff; } .text-white .big-title { color: #fff; } /*----------------------- Feature box -----------------------*/ .feature-intro { transition: all .4s; padding: 30px; border-radius: 3px; } .feature-intro:hover { background: rgba(180, 1, 1, 0.05); } .feature-intro:hover i { background: var(--theme-primary-color); color: #fff; border-color: var(--theme-primary-color); } .feature-intro i { margin-bottom: 20px; font-size: 30px; padding: 20px; border-radius: 100%; float: left; margin-right: 40px; background: rgba(180, 1, 1, 0.05); transition: all .4s; color: #000; } .feature-intro h4 { margin-bottom: 20px; } .feature-intro p { margin-bottom: 0px; } .feature-intro .feature-text { overflow: hidden; } /*--------------------- CTA Section -----------------------*/ .cta { padding: 80px 80px; margin: 0px 50px; border-radius: 5px; position: relative; z-index: 1; background: #1B202F; } .cta .cta-content h2 { color: #fff; margin: 20px 0px 40px; } .cta .subheading { color: #e5e5e5; } .subcribe-form .form-control { height: 60px; border-radius: 0px; } .cta-2 { background: url("../images/bg/hero_area_image.png"); background-size: cover; background-repeat: no-repeat; position: relative; z-index: 1; } .cta-2.cta-bg-2:before { background: var(--theme-primary-color); } .cta-2.cta-bg-2 .btn-white { color: var(--theme-primary-color); } .cta-2.cta-bg-2 .btn-white:hover { background: #000; color: #fff; } .cta-2.cta-bg-2 .btn-black:hover { background: #fff; color: var(--theme-primary-color); } .cta-2:before { position: absolute; content: ""; left: 0px; top: 0px; width: 100%; height: 100%; background: var(--theme-secondary-color); opacity: .95; z-index: -1; } .cta-2 .cta-content h2 { color: #fff; } .cta-2 .subheading { color: #e5e5e5; } .cta-2 .sub-style-2 { border-color: rgba(255, 255, 255, 0.06); } .cta-2 .download-btn p { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; } .cta-2 .btn-black:hover { background: #fff; color: var(--theme-primary-color); } .cta-3 { padding: 80px 80px; background: url("../images/bg/cta-bg.jpg") fixed 50% 50%; background-size: cover; position: relative; z-index: 1; overflow: hidden; } .cta-3:before { position: absolute; content: ""; left: 0px; top: 0px; width: 100%; height: 100%; background: #000; opacity: .9; z-index: -1; } .cta-3 .cta-content h2 { color: #fff; margin: 20px 0px 40px; } .cta-3 .subheading { color: #e5e5e5; } .cta-3 .list-item { color: #fff; margin-top: 20px; } .cta-3 .list-item li { margin: 0px 20px; font-family: var(--theme-primary-font); text-transform: capitalize; } .cta-3 .list-item li i { margin-right: 10px; } .subcribe-form .form-control { height: 60px; border-radius: 0px; } .form-main { position: relative; } .form-main .form-control { border-radius: 35px; padding-left: 30px; } .form-main .form-control:focus { border-color: var(--theme-primary-color); } .form-main .btn { position: absolute; right: 4px; top: 4px; } /*--------------------- Testimonial -----------------------*/ .testimonial { position: relative; } .testimonial:before { position: absolute; content: ""; left: 0px; top: 0px; background: #F4F7FA; width: 100%; height: 56%; } .testimonials-slides .testimonial-item { padding: 30px 40px; background: #fff; margin: 0px 10px; border-radius: 5px; } .testimonials-slides .testimonial-text { color: #000; opacity: .5; } .testimonials-slides .rating { color: var(--theme-primary-color); margin-bottom: 10px; } .testimonials-slides h4 { margin-bottom: 20px; text-transform: capitalize; font-size: 26px; } .testimonials-slides .client-info { display: flex; align-items: center; margin-top: 20px; } .testimonials-slides .client-img { width: 70px; height: 70px; border-radius: 100%; overflow: hidden; margin-right: 10px; border: 5px solid #fff; } .testimonials-slides .testimonial-author h5 { font-size: 16px; color: #666; text-transform: uppercase; letter-spacing: 1px; } .testimonials-slides .owl-item.active.center .testimonial-text { opacity: 1; } .testimonials-slides .owl-item.active.center .testimonial-text p { color: #444; } .testimonials-slides .owl-item.active.center i { color: var(--theme-secondary-color); } .testimonials-slides i { font-size: 70px; color: #ddd; } /*------------------ FAQ ----------------------*/ .faq-single { margin-bottom: 40px; } .faq-single h4 { margin-bottom: 20px; } /*-------------------- Pricing ---------------------------*/ .pricing-item { padding: 40px; border: 1px solid transparent; border-radius: 5px; transition: all .4s ease; background: #F6F5FA; } .pricing-item .badge { color: #555; margin-bottom: 15px; background: #ddd; transition: all .4s ease; } .pricing-item .price { margin-bottom: 30px; } .pricing-item .price h2 { margin-bottom: 20px; font-size: 50px; } .pricing-item .price .currency { font-size: 16px; } .pricing-item .price small { font-size: 14px; } .pricing-item .pricing-features { margin-top: 30px; border-top: 1px solid #ddd; padding-top: 25px; } .pricing-item .pricing-features li { color: #000; text-transform: capitalize; } .pricing-item .pricing-features li i { margin-right: 10px; } .pricing-item .pricing-features li:not(:last-child) { margin-bottom: 10px; } .pricing-item .pricing-features .not-included { color: #888; text-decoration: line-through; } .pricing-item .btn { width: 100%; } .pricing-item:hover { background: #fff; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.05); border-color: #ddd; } .pricing-item:hover .badge { background: var(--theme-primary-color); color: #fff; } /*----------------- Author Section ---------------------*/ .author-section { background: #F6F6F8; } .author-socials { padding: 10px 40px; background: #fff; background: var(--theme-primary-color); display: inline-block; position: absolute; bottom: 30px; right: 47px; } .author-socials span { color: #fff; font-family: var(--theme-primary-font); font-weight: 600; } .author-socials a { margin: 0px 7px; color: #fff; font-size: 14px; opacity: .9; -webkit-transform: scale(1); transform: scale(1); display: inline-block; } .author-socials a:hover { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } /*----------------- Counter section ---------------------*/ /*-------------------- About Section 2 -----------------------*/ .about-img3 { background: #F6F5FA; padding: 40px; } .count-div { border-right: 1px solid #ddd; } .count-div h4 { font-size: 50px; font-weight: 400; letter-spacing: -1px; } .count-div p { text-transform: capitalize; margin-bottom: 0px; } /*----------------------- CTA-2 -------------------------*/ .cta-inner-section-2 { padding: 40px 40px 0px; border-radius: 15px; background: url("../images/bg/cta-bg.jpg") fixed center center; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 1; } .cta-inner-section-2:before { position: absolute; content: ""; left: 0px; top: 0px; width: 100%; height: 100%; background: #F6FF5C; opacity: .97; z-index: -1; border-radius: 15px; } .cta-inner-section-2 .cta-content .subheading { color: #444; } .cta-inner-section-2 .cta-content h2 { color: #000; margin-top: 10px; } .cta-inner-section-2 .cta-content p { color: #000; } /*------------------------ Feature Style 2 ------------------------------*/ .feature-style-2 { padding: 25px 35px; transition: all .4s; border: 1px solid #F6F5FA; margin-bottom: 30px; background: #F6F5FA; } .feature-style-2 i { margin-right: 30px; font-size: 30px; color: var(--theme-secondary-color); float: left; transition: all .4s; } .feature-style-2 h4 { overflow: hidden; font-size: 20px; transition: all .4s; } .feature-style-2:hover { background: var(--theme-primary-color); } .feature-style-2:hover h4 { color: #fff; } .feature-style-2:hover i { color: #fff; } /*------------------------ Gallery --------------------------*/ .gallery { background: #000; } .gallery .heading .subheading { color: #fff; } .gallery .heading h2 { color: #fff; } .gallery-screenshot .owl-dots { text-align: center; margin-top: 40px; } .gallery-screenshot button.owl-dot { width: 10px; height: 10px; background: #fff; margin: 0px 5px; border-radius: 100%; opacity: .6; } .gallery-screenshot .owl-dot.active { opacity: 1; background: var(--theme-primary-color); } .about-dark-bg:before { background: var(--theme-secondary-color); } /*---------------------- Blog Posts -----------------------------*/ .post-title, .banner-title { -ms-word-wrap: break-word; word-wrap: break-word; } .blog-post-item { transition: all .4s ease; overflow: hidden; } .blog-post-item .post-thumb img { border-radius: 5px; transition: all .4s ease; } .blog-post-item:hover .post-thumb img { -webkit-transform: scale(0.95); transform: scale(0.95); } .blog-post-item .post-meta { margin-bottom: 10px; text-transform: capitalize; font-size: 15px; } .blog-post-item .post-meta span { margin-right: 15px; color: #7a7a7a; } .blog-post-item .post-meta i { margin-right: 5px; } .blog-post-item .post-content { padding-left: 20px; margin-top: 20px; } .blog-post-item .post-title { font-size: 26px; text-transform: capitalize; } .mb--100 { margin-bottom: -100px; } /* ==================== Footer Section ======================*/ .footer { padding: 0px 20px; position: relative; background: #000000; } .footer-top{ padding-top: 100px; } .footer .footer-widget .widget-title { text-transform: capitalize; font-size: 18px; color: #fff; margin-bottom: 20px; font-weight: 600; } .footer .footer-widget p { color: rgba(255, 255, 255, 0.7); } .footer .footer-links li { padding: 5px 0px; } .footer .footer-links a { color: #fff; position: relative; padding-bottom: 5px; transition: all .4s ease; font-family: var(--theme-primary-font); } .footer .footer-links a:before { position: absolute; content: ""; left: 0px; bottom: 0px; width: 0%; height: 2px; background: #fff; opacity: 0; transition: all .4s ease; } .footer .footer-links a:hover { color: #fff; } .footer .footer-links a:hover:before { width: 100%; opacity: 1; } .footer .footer-socials a { font-size: 16px; text-align: center; margin-right: 10px; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.09); display: inline-block; border-radius: 100%; line-height: 40px; background: #222; color: #fff; } .footer .footer-socials a:hover { color: #fff; background: var(--theme-primary-color); border-color: var(--theme-primary-color); } .footer-mid { padding-bottom: 80px; } .footer-btm { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.04); } .footer-logo h2 { color: #fff; } .copyright { color: #e5e5e5; } .copyright a { color: #fff; } .copyright a:hover { color: var(--theme-primary-color); } /* ==================== Footer Section ======================*/ .footer { position: relative; background: #000000; } .footer .footer-widget .widget-title { text-transform: capitalize; font-size: 18px; color: #fff; margin-bottom: 20px; font-weight: 600; } .footer .footer-widget p { color: rgba(255, 255, 255, 0.7); } .footer .footer-links li { padding: 5px 0px; } .footer .footer-links a { color: #fff; position: relative; padding-bottom: 5px; transition: all .4s ease; font-family: var(--theme-primary-font); } .footer .footer-links a:before { position: absolute; content: ""; left: 0px; bottom: 0px; width: 0%; height: 2px; background: #fff; opacity: 0; transition: all .4s ease; } .footer .footer-links a:hover { color: #fff; } .footer .footer-links a:hover:before { width: 100%; opacity: 1; } .footer .footer-socials a { font-size: 16px; text-align: center; margin-right: 10px; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.09); display: inline-block; border-radius: 100%; line-height: 40px; background: #222; color: #fff; } .footer .footer-socials a:hover { color: #fff; background: var(--theme-primary-color); border-color: var(--theme-primary-color); } .footer-mid { padding-bottom: 80px; } .footer-btm { padding-top: 20px; padding-bottom: 20px; border-top: 1px solid rgba(255, 255, 255, 0.04); } .footer-logo h2 { color: #fff; } .copyright { color: #e5e5e5; } .copyright a { color: #fff; } .copyright a:hover { color: var(--theme-primary-color); } /*---------------------- Fixed top top bottom --------------------*/ .fixed-btm-top a { width: 50px; height: 50px; position: fixed; right: 20px; bottom: 50px; text-align: center; padding-top: 10px; width: 50px; background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); z-index: 3; opacity: 0; visibility: hidden; } .fixed-btm-top a:hover { background: var(--theme-primary-color); color: #fff; } .fixed-btm-top.reveal a { opacity: 1; visibility: visible; } /*# sourceMappingURL=maps/style.css.map */ /* ============= Header style ============*/ /* header top */ .header-top{ background: #000; padding: 5px 0px; } .header-contact { color: #fff; font-size: 14px; margin-bottom: 0px; } .header-contact li{ display: inline-block; margin-right: 25px; } .header-contact li i{ color: var(--theme-primary-color); margin-right: 10px; } .header-contact li a{ color: #fff; } .header-socials{ border-left: 1px solid rgba(255, 255, 255, 0.3); padding-left: 40px; } .header-socials ul{ margin-bottom: 0px; } .header-socials li{ display: inline-block; margin-left: 5px; color: #fff; } .header-socials a { color: #fff; width: 30px; height: 30px; line-height: 30px; display: inline-block; text-align: center; border-radius:100%; font-size: 13px; } .header-socials a:hover { border-color: var(--theme-primary-color); background: var(--theme-primary-color); color: #fff; } .header-btn{ margin-left: 40px; } .header-navbar .primary-menu li a:hover{ color: var(--theme-primary-color); } /* Page Banner style */ .main-page-header{ padding: 90px 40px; } .banner-solid{ background: #EDF7FF; } .banner-title { margin-top: 15px; font-size: 36px; } .banner-bg{ position: relative; background: url("../images/bg/bg-2.jpg"); background-size: cover; background-position: center center; z-index: 1; padding: 70px 0px; overflow: hidden; } .banner-bg:after{ position: absolute; content: ""; left: 0px; top: 0px; width: 100%; height: 100%; background: #000; opacity: .8; z-index: -1; } .banner-bg .page-banner-content ul li{ color: #fff; } .banner-bg .page-banner-content .banner-title{ color: #fff; } /* Blog banener section style */ .blog-layout-2 .post-thumb img{ border-radius: 0px; } .blog-layout-2 .post-thumb{ position: relative; z-index: 1; } .blog-layout-2 .post-thumb:after{ position: absolute; width: 100%; height: 100%; content: ""; z-index: -1; bottom: -30px; left: 30px; background: #f2f3f3; } .blog-layout-2 .post-content{ padding-left: 40px; } /* Blog banner layout 3 */ .blog-layout-3{ padding: 90px 0px 60px; } .blog-layout-3 .post-thumb{ position: relative; z-index: 1; } .blog-layout-3 .post-thumb:after{ position: absolute; width: 100%; height: 100%; content: ""; z-index: -1; bottom: -30px; left: 30px; background: #f2f3f3; } .blog-layout-3 .subtitle{ color: var(--theme-primary-color); } .blog-layout-3 .post-content h1{ margin-top: 10px; font-size: 60px; line-height: 1; } .blog-layout-3 .post-content{ padding-left: 50px; } .blog-layout-3 .post-content p{ margin: 20px 0px 25px 0px; } /* blog layout grid banner */ .blog-top-padding { padding-top: 60px; } .blog-layout-1 .post-title{ font-size: 26px; } /* Footer style */ .footer-top{ padding-bottom: 80px; } .copyright p{ color: #fff; } .footer-widget .textwidget{ color: rgba(255,255,255,.8); } .footer-widget img{ margin-bottom: 20px; } .widget_nav_menu li { margin-bottom: 10px; } .widget_nav_menu li a{ color: rgba(255,255,255,.8); text-transform: capitalize; } .widget_nav_menu li a:hover{ color: var(--theme-primary-color); padding-left: 10px; } /* sidebar Padding */ .sidebar-left-padding{ padding-left: 0px; padding-right: 15px; } /* single blog post style */ .single-post-header .post-cat{ text-transform: capitalize; } .single-post-header .post-title{ margin: 15px 0px; font-size: 45px; } .single-post-meta ul{ padding-left: 0px; list-style-type: none; } .single-post-meta ul li{ display: inline-block; margin-right: 20px; text-transform:capitalize; } .single-post-meta ul li a{ color: rgb(62, 60, 60); } .single-post-meta ul li a:hover{ color: var(--theme-primary-color); } .single-post-meta ul li i{ margin-right: 10px; color: rgb(62, 60, 60); } .post-single ul li{ position: relative; padding-left: 0; margin-bottom: 7px; line-height: 2; font-size: 1em; letter-spacing: .1px; } .post-single p{ margin-bottom: 25px; } .wp-block-table thead tr{ background: #eee; color: #000; } .post-single h1, .post-single h2, .post-single h3, .post-single h4, .post-single h5, .post-single h6 { margin-bottom: 20px; } .post-single img { margin-bottom: 20px; } /* Related POst ========= */ .related-post{ border-top: 1px solid #eee; padding-top: 60px; } .related-post .post-cat{ text-transform: capitalize; } .related-post .post-title{ margin-top: 10px; font-size: 22px; margin-bottom: 10px; } /* Post Navigation ========= */ .post-navigation-area a,.comment-form a{ text-decoration: none; } .post-navigation-area { padding: 40px; background: #EDF7FF; margin: 20px 0px; clear: both; } .post-navigation-area span{ color: var(--theme-secondary-color); } .post-navigation-area h5{ transition: all .4s ease; } .post-navigation-area h5:hover{ color: var(--theme-primary-color); } .post-navigation-area .next-post{ border-left: 5px solid #fff; padding-left: 30px; text-align: right; } .post-navigation-area h5{ margin-top: 15px; font-size: 24px; margin-bottom: 0px; } /*===================== Author Info ==========================*/ .single-post-author { margin: 40px 0px; padding: 40px; position: relative; } .single-author-wrapper{ display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; align-items: flex-start; } .single-author-wrapper .author-name{ text-transform: capitalize; } .single-author-wrapper .author-img img { width: 100px; height: 100xp; -webkit-border-radius: 50%; border-radius: 50%; object-fit: cover; min-height: unset; min-width: unset; vertical-align: top; } .single-author-wrapper .author-meta { width: calc(100% - 130px); width: -webkit-calc(100% - 130px); width: -moz-calc(100% - 130px); padding-left: 35px; padding-right: 0; } .single-author-wrapper .view-all-auth { font-size: .88889em; font-weight: 400; color: var(--theme-secondary-color); text-decoration: none; margin-top: 15px; text-transform: capitalize; } .single-author-wrapper .view-all-auth:hover{ color: var(--theme-primary-color); } /* .author .author-img { width: 100px; height: 100px; margin: 0 auto 25px; float: left; margin-right: 30px; } .author .author-img img { border-radius: 100%; border: 5px solid #fff; } .author .author-info { overflow: hidden; } .author .author-info h4 { margin-bottom: 0px; } .author .author-info ul { margin: 25px 0px 0px; } .author .author-info ul li a { color: #333; padding: 0px 6px; } .author .author-info ul li a:hover { color: #d90429; } */ /* Navigation Toggle ------------------------- */ .site-header{ position: relative; padding: 20px 10px; } .site-logo{ max-width: 200px; } .nav-toggle { position: absolute; bottom: 0; right: 0; top: 0; width: 6.6rem; } /* .nav-toggle .toggle-icon, .nav-toggle svg { height: 0.8rem; width: 2.6rem; } */ .nav-toggle .toggle-inner { padding-top: 0.8rem; } /*------------------------- Main Menu header -------------------------*/ .header-navbar .site-logo { /* width: 10%; */ /* margin-right: 40px; */ } .header-navbar .site-logo a { max-width: 140px; } .header-navbar .primary-menu { display: flex; align-items: center; justify-content: end; } .header-navbar .primary-menu li { position: relative; } .header-navbar .primary-menu li a { font-size: 16px; font-weight: 600; color: #222; line-height: 1.4; text-transform: capitalize; font-family: var(--theme-heading-font); } .header-navbar .primary-menu li a:hover { color: var(--theme-primary-color); } .header-navbar .primary-menu li .menu-trigger { font-size: 12px; font-weight: 500; color: #222; position: absolute; right: -10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); line-height: 1; transition: all 0.3s ease-out 0s; } .header-navbar .primary-menu li:not(:last-child) { margin-right: 40px; } @media (max-width: 1199px) { .header-navbar .primary-menu li:not(:last-child) { margin-right: 40px; } } .header-navbar .primary-menu li .submenu { position: absolute; left: 0; top: 120%; min-width: 250px; transition: all 0.3s ease-out 0s; z-index: 99; height: auto; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; background: #fff; padding-left: 5px; padding-top: 10px; padding-bottom: 10px; } .header-navbar .primary-menu li .submenu li:hover .submenu { visibility: visible; top: 100%; opacity: 1; } .header-navbar .primary-menu li .submenu li .menu-trigger { right: 20px; } .header-navbar .primary-menu li .submenu li a { padding: 10px 20px; display: block; color: #000; opacity: .6; } .header-navbar .primary-menu li .submenu li a:hover { color: var(--theme-primary-color); opacity: 1; } .header-navbar .primary-menu li .submenu li { line-height: 1; margin: 0; } .header-navbar .primary-menu li:hover > .submenu { visibility: visible; top: 100%; opacity: 1; } .header-navbar .primary-menu li .submenu li .submenu { left: 100%; top: 20%; } .header-navbar .primary-menu li .submenu li:hover > .submenu { top: 0; } .header-navbar .primary-menu li .submenu li .menu-trigger { color: #222; } .header-navbar .nav-toggler { width: 53px; height: 53px; background: #fff; display: inline-block; text-align: center; line-height: 53px; font-size: 20px; text-align: center; } .header-navbar .nav-toggler:hover { background: var(--theme-primary-color); color: #fff; } .header-navbar.mobile-menu .site-navbar { position: fixed; right: 0; top: 0; width: 280px; margin-right: -280px; height: 100vh; background-color: #00000a; z-index: 999; display: block; padding: 80px 0 40px; overflow-x: hidden; overflow-y: scroll; transition: all 0.3s ease-out 0s; } .header-navbar.mobile-menu .site-navbar.menu-on { margin-right: 0; } @media (max-width: 991px) { .header-navbar.mobile-menu .primary-menu li:not(:last-child) { margin-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } } .header-navbar.mobile-menu .primary-menu { display: block; } .header-navbar.mobile-menu .primary-menu li .submenu { position: unset; width: 100%; opacity: 1; visibility: visible; background-color: #00000a; border: none; transition: none; box-shadow: none; display: none; } .header-navbar a.nav-close { display: none; } .header-navbar.mobile-menu .site-navbar a.nav-close { position: absolute; top: 20px; right: 10px; font-size: 18px; line-height: 1; padding: 5px; color: #fff; z-index: 2; display: block; } .header-navbar.mobile-menu .primary-menu { display: block; } .header-navbar.mobile-menu .primary-menu li a { display: block; color: rgba(255, 255, 255, 0.8); padding: 12px 20px; font-size: 15px; } .header-navbar.mobile-menu .primary-menu li .menu-trigger { position: absolute; right: 0; top: 0; height: 45px; width: 45px; display: flex; align-items: center; justify-content: center; -webkit-transform: translate(0); transform: translate(0); border-left: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; z-index: 2; } .header-navbar.mobile-menu .primary-menu li a { display: block; color: rgba(255, 255, 255, 0.8); padding: 12px 20px; font-size: 15px; } .header-navbar.mobile-menu .primary-menu li .submenu li { border: none; border-top: 1px solid rgba(255, 255, 255, 0.2); } .nav-logo { left: 20px; position: absolute; top: 20px; } .header-navbar.mobile-menu .site-navbar.menu-on .submenu li a { color: #fff; } .header-navbar.mobile-menu .site-navbar.menu-on .submenu li a:hover { border-color: transparent; } /*--------------------- Header menu contact ---------------------*/ .header-search { font-size: 14px; } .header-search a { color: #647589; } .header-search a:hover { color: var(--theme-primary-color); } .header-socials { font-size: 14px; } .header-socials a { margin-left: 5px; color: #647589; } .header-socials a:hover { color: var(--theme-primary-color); } /*------------------------------- Menu center bottom -----------------------------*/ .header-style-2 .header-mid { padding-bottom: 30px; } .menu-center { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; line-height: 70px; } .menu-center .primary-menu { justify-content: center; } .menu-center.style-1 .primary-menu li:hover > .submenu a:before { display: none; } .menu-center.style-1 .primary-menu li:hover > .submenu a:hover { color: #000; } .menu-center.style-1 .primary-menu a { position: relative; padding-top: 30px; } .menu-center.style-1 .primary-menu a:before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; background: #f41f1c; width: 100%; height: 2px; opacity: 0; visibility: hidden; transition: all .4s ease; } .menu-center.style-1 .primary-menu a:hover:before { opacity: 1; visibility: visible; } /*---------------------- Menu top ---------------------*/ .bg-color1 { background: #F7EEE9; } .menu-top { margin-bottom: 50px; padding: 12px 0px; } .menu-top .header-socials a { color: #000; } .menu-top .header-socials a:hover { color: var(--theme-primary-color); } .menu-top .header-search a:hover { color: #fff; background: #000; } .header-topbar { background: #031F42; padding: 5px 0px; } .border-top-bottom { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .header-contact a { color: #fff; } .header-cart a { color: #000; } .header-cart a i { margin-right: 5px; } .topbar-style-1 .header-socials a { color: #fff; margin-left: 15px; } .topbar-style-1 .header-socials a:hover { color: var(--theme-primary-color); } .bg-icon a { width: 40px; height: 40px; background-color: #fff; display: inline-block; text-align: center; line-height: 40px; border-radius: 100%; background: #FF5369; color: #fff; } .bg-icon a:hover { background: #f3f3f3; color: var(--theme-primary-color); } .header-info-style1 .header-cart a, .header-info-style1 .header-search a { color: #444; width: 40px; height: 40px; display: inline-block; text-align: center; line-height: 40px; border-radius: 100%; border: 1px solid var(--theme-fourth-color); font-size: 13px; } .header-info-style1 .header-cart a:hover, .header-info-style1 .header-search a:hover { background: var(--theme-primary-color); color: #fff; border-color: var(--theme-primary-color); } .header-navbar { box-shadow: rgba(0, 0, 0, 0.04) 0px 6px 15px 0px; padding: 15px 0px; } .header-btn { margin-left: 40px; border-left: 1px solid #e1e1e1; padding-left: 20px; } .header-btn .login { color: #000; margin-right: 15px; } .header-btn .login:hover { color: var(--theme-primary-color); } .header-search-bar { position: relative; } .header-search-bar .form-control { background: #f5f5f5; border-color: transparent; padding: 10px 20px; border-radius: 4px; } .header-search-bar .form-control:focus, .header-search-bar .form-control:hover { border-color: #ddd; background: #fff; } .header-search-bar .search-submit { position: absolute; right: 20px; top: 10px; color: #000; } .header-search-bar .search-submit:hover { color: var(--theme-primary-color); } .menu-2 { padding: 20px 0px; } .topbar-noticebar { background: #031F42; } .header-notice { color: #fff; font-size: 14px; } .mini-cart { margin-right: 15px; position: relative; width: 40px; height: 40px; display: inline-block; font-size: 18px; color: #000; } .mini-cart:hover { color: var(--theme-primary-color); } .mini-cart .cart-count { position: absolute; content: ""; top: -8px; right: 4px; width: 20px; background: var(--theme-primary-color); color: #fff; height: 20px; text-align: center; line-height: 20px; border-radius: 100%; font-size: 11px; } .border-left-0 { border-left: 0px; } /*--------------------- Header Style 3 -----------------------*/ .header-style-3 .header-mid { padding: 20px 0px; } .header-style-3 .© { box-shadow: none; padding: 0px 0px; } .header-style-3 .header-cart a, .header-style-3 .header-search a, .header-style-3 .header-socials a { color: #647589; } .header-style-3 .header-cart a:hover, .header-style-3 .header-search a:hover, .header-style-3 .header-socials a:hover { color: var(--theme-primary-color); } .header-style-3 .cart-icon { position: relative; } .header-style-3 .cart-icon .count-no { position: absolute; content: ""; top: -16px; right: -9px; width: 20px; height: 20px; background: #333; color: #fff; font-size: 12px; text-align: center; line-height: 21px; border-radius: 100%; } .header-style-3 .header-user { width: 40px; height: 40px; text-align: center; border: 1px solid #ddd; line-height: 40px; border-radius: 100%; transition: all .4s; } .header-style-3 .header-user a { color: #647589; } .header-style-3 .header-user:hover { background: var(--theme-primary-color); border-color: var(--theme-primary-color); } .header-style-3 .header-user:hover a { color: #fff; } .page_search_box { position: fixed; width: 100%; height: 0; background: #ffffff; z-index: 999; left: 0; top: 0; transition: 0.3s; display: flex; align-items: center; opacity: 0; visibility: hidden; } .search_close { position: absolute; top: 50px; right: 100px; } .search_close i { color: var(--theme-primary-color); } .page_search_box form { width: 70%; margin: 0 auto; position: relative; } .border-bottom { border-bottom: 1px solid #dee2e6 !important; } .page_search_box form input { width: 100%; background: none; height: 50px; font-size: 24px; color: #373737; font-weight: 400; padding: 0 50px 0 0; } .page_search_box form button { position: absolute; bottom: 11px; right: 0; border: 0; padding: 0; background: none; font-size: 20px; } .page_search_box.active { height: 100%; opacity: 1; visibility: visible; } .header-navbar.mobile-menu .site-navbar.menu-on .submenu li a:hover { color: #fff; } .offcanvas-icon .nav-toggler { background: #000; color: #fff; display: inline-block; width: 50px; height: 50px; text-align: center; line-height: 50px; } .offcanvas-icon .nav-toggler:hover { background: var(--theme-primary-color); } .menu_fixed { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999; background: #fff; box-shadow: 0px 16px 32px 0px rgba(196, 203, 255, 0.3); } .header-category-menu li.has-submenu { position: relative; } .header-category-menu li.has-submenu a { font-size: 16px; font-weight: 600; color: #333; line-height: 1.4; text-transform: capitalize; font-family: var(--theme-heading-font); } .header-category-menu li.has-submenu .submenu a { padding: 10px 20px; display: block; color: #000; opacity: .6; } .header-category-menu li.has-submenu .submenu a:hover { opacity: 1; color: var(--theme-primary-color); } .header-category-menu .submenu { position: absolute; left: 0; top: 120%; min-width: 250px; transition: all 0.3s ease-out 0s; z-index: 99; height: auto; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; background: #fff; padding-left: 5px; padding-top: 10px; padding-bottom: 10px; } .header-category-menu li.has-submenu:hover > .submenu { visibility: visible; top: 100%; opacity: 1; } .topbar-style-2 { padding: 10px 0px; } .topbar-style-2 .header-btn { border-color: rgba(255, 255, 255, 0.2); font-size: 15px; } .topbar-style-2 .header-btn a { color: #fff; } .topbar-style-2 .header-btn i { margin-right: 10px; color: var(--theme-secondary-color); } .topbar-style-2 .header-socials a:hover { color: #fff; } .header-contact ul li { margin-right: 25px !important; color: #fff; opacity: .9; transition: all .4s; font-size: 15px; } .header-contact ul li:hover { opacity: 1; } .header-navbar .primary-menu{ padding-left:0px; margin-bottom:0px; } .header-navbar .primary-menu a{ text-decoration: none; } .header-navbar .primary-menu li .sub-menu{ padding-left:0px; } .header-navbar .primary-menu li .sub-menu{ min-width:200px; right:0px; left:auto; } .header-navbar .primary-menu ul li.menu-item-has-children:hover > ul, .header-navbar .primary-menu ul li.menu-item-has-children:focus > ul, .header-navbar .primary-menu ul li.menu-item-has-children.focus > ul { right: calc(100% + 2rem); } .header-navbar .primary-menu li.menu-item-has-children:hover > ul, .header-navbar .primary-menu li.menu-item-has-children:focus > ul, .header-navbar .primary-menu li.menu-item-has-children.focus > ul { right: 0; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; }