/* Theme Name: Bizstrait Version: 0.0.4 Tested up to: 5.9.2 Requires PHP: 5.4 Description: Bizstrait is a clean and elegant WordPress theme. It is a perfect solution for any type of business, Bizstrait comes with a modern, sleek design and advanced functionalities. Author: Unibirdtech Author URI: http://unibirdtech.com/ Theme URI: License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bizstrait Tags: one-column, two-columns ,right-sidebar, flexible-header, custom-background, custom-header, custom-menu, editor-style, featured-images, footer-widgets, theme-options, threaded-comments, translation-ready, custom-logo, blog, e-commerce */ /* ---- ==== body ==== ----*/ body { padding: 0; margin: 0; font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, .h1 { font-size: 34px; } h2, .h2 { font-size: 32px; } h3, .h3 { font-size: 30px; } h4, .h4 { font-size: 28px; } h5, .h5 { font-size: 26px; } h6, .h6 { font-size: 22px; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: Josefin Sans; line-height: 1.25; } a{ text-decoration: none; } .alignright { text-align: right; } .alignleft { text-align: left; } .aligncenter { text-align: center; } .content { padding-top: 40px; padding-bottom: 30px; } ul { list-style: none; padding: 0; margin: 0; } label { width: 100%; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select, .form-control, input:not([type]), textarea { border-radius: 0; margin-bottom: 20px; box-shadow: inherit; padding: 6px 12px; line-height: 30px; border-width: 2px; border-style: solid; width: 100%; font-size: 1.6em; } button, html [type="button"], [type="reset"], [type="submit"], .btn, .more-link { padding: 10px 35px; line-height: 26px; overflow: hidden; position: relative; border-radius: 30px; font-size: 14px; font-weight: 600; display: inline-block; transition: all 0.1s ease 0s; border-width: 2px; border-style: solid; /*text-transform: uppercase;*/ } a.btn.btn-default { box-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color); } a.btn.btn-default:hover{ box-shadow: 0 0 20px #000; box-shadow: unset; } .btn:hover { transition: all 0.3s ease 0s; outline: none; box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.5); } .hover_eff { transition-duration: .3s; transition-property: transform; transition-timing-function: ease-out; transition: all 0.3s linear; } .hover_eff:hover { transform: translateY(-8px); } .hover_eff:hover .price{ box-shadow: 0px 0px 25px 8px rgba(255, 59, 43, 0.15); } .hover_ser{ transition-duration: .3s; transition-property: transform; transition-timing-function: ease-out; transition: all 0.3s linear; } .no-gutter>[class*=col-] { padding-right: 0; padding-left: 0; } .custom-shape-divider-bottom-1634886520 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .custom-shape-divider-bottom-1634886520 svg { position: relative; display: block; width: calc(141% + 1.3px); height: 150px; } blockquote { position: relative; width: 100%; border-width: 0 0 0 5px; border-style: solid; padding: 20px; } blockquote p { font-style: italic; width: 94%; display: table; font-weight: bold; line-height: 1.5; margin: 0; } table { width: 100%; } .container { max-width: 1320px; } /* =WordPress Core -------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { border-width: 1px; border-style: solid; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .owl-carousel .owl-nav div { width: 50px; height: 50px; display: block; font-size: 24px; line-height: 50px; opacity: 0; border-radius: 41% 59% 74% 26% / 74% 50% 50% 26%; text-align: center; border-width: 1px; border-style: solid; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); animation: bouble 3s linear infinite alternate-reverse; } @keyframes bouble { 0%{ border-radius: 41% 59% 74% 26% / 74% 50% 50% 26%; } 50%{ border-radius: 87% 13% 82% 18% / 17% 79% 21% 83%; } 100%{ border-radius: 71% 29% 79% 21% / 36% 58% 42% 64% ; } } .owl-carousel:hover .owl-nav div { opacity: 1; } .owl-carousel .owl-nav { opacity: 1; transition: all 0.3s ease 0s; display: unset; } .owl-carousel:hover .owl-nav { opacity: 1; } .owl-carousel:hover .owl-nav .owl-prev { left: 0; } .owl-carousel:hover .owl-nav .owl-next { right: 0; } .owl-nav .owl-prev, .owl-nav .owl-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; margin: -30px 0 0; transition: all 0.3s ease 0s; } .owl-nav .owl-prev { left: 8px; } .owl-nav .owl-prev i { margin-left: 0; transition: all 0.3s ease 0s; } .owl-nav .owl-prev:hover i { margin-left: 0; } .owl-nav .owl-next { right: 8px; } .owl-nav .owl-next i { margin-right: 0; transition: all 0.3s ease 0s; } .owl-nav .owl-next:hover i { margin-right: 0; } .owl-dots { display: inline-block; vertical-align: middle; padding: 0 5px; } .owl-dots span { display: block; width: 8px; height: 8px; border-radius: 50%; border-width: 2px; border-style: solid; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); transition: 0.5s; } .owl-dot.active span { width: 10px; } .owl-dots button.owl-dot { height: auto; width: auto; padding: 2px 10px; font-size: 12px; border-radius: 50%; margin: 0 3px; } .owl-dots { bottom: 0px; left: 50%; transform: translateX(-50%); position: relative; right: 0; text-align: center; } .sliderhome.two.owl-carousel:hover .owl-nav .owl-prev { left: 4%; } .sliderhome.two.owl-carousel:hover .owl-nav .owl-next { right: 4%; } .mapiframe { margin: 40px 0 -40px 0; } header.standard .social.right li a { border-radius: 50%; } ul.social.right li a { display: block; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; } /* ---- slider ----*/ .sliderhome .slide.two:before { content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; } .sliderhome .slide { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; } .sliderhome.two .slide { height: 750px; } .sliderhome .owl-slide-animated { transform: translateX(20px); transition: all 0.05s; } .sliderhome .owl-slide-title { transition-delay: 0.2s; font-size: 65px; font-weight: 800; line-height: 77px; } .sliderhome .owl-slide-subtitle.is-transitioned { transition-delay: 0.35s; font-size: 20px; } .owl-item.active .owl-slide-text a.btn.btn-white { padding: 10px 35px; } .owl-item.active .owl-slide-subtitle { font-size: 16px; } .sliderhome .owl-slide-cta.is-transitioned { transition-delay: 0.5s; } .sliderhome .btn:first-child { margin-right: 15px; } .sliderhome .owl-dots, .sliderhome .owl-nav div { position: absolute; } .sliderhome .owl-dots .owl-dot, .sliderhome .owl-nav [class*="owl-"]:focus { outline: none; } .sliderhome .owl-dots .owl-dot span { background: transparent; border: 1px solid var(--main-black-color); transition: all 0.2s ease; } .sliderhome .owl-dots .owl-dot:hover span, .sliderhome .owl-dots .owl-dot.active span { background: var(--main-black-color); } .sliderhome .owl-nav div { margin: 0; } .sliderhome .owl-nav .owl-prev { right: 30px; } .sliderhome .owl-nav .owl-next { right: 30px; } .sliderhome .owl-slide-text { overflow: hidden; margin-top: 10%; position: relative; margin-left: 10px; } .sliderhome .owl-slide-text::before { background-color: var(--primary-color); content: ''; height: 140%; width: 5px; position: absolute; left: 0; top: 50%; transform: translateY(-40%); } .owl-item.active .owl-slide-title{ animation-name: silder-right; animation-duration: 1.2s; animation-timing-function: ease; } @keyframes silder-right{ 0%{ transform: translateX(-500px); animation-timing-function: ease-in; opacity: 0; } 100%{ transform: translateX(0px); animation-timing-function: ease-out; opacity: 1; } } .owl-item.active .owl-slide-subtitle{ animation-name: slideUp; animation-duration: 1.2s; animation-timing-function: ease; } @keyframes slideUp{ 0% { opacity: 0; -webkit-transform: translateY(500px); -ms-transform: translateY(500px); transform: translateY(500px); animation-timing-function: ease-in; } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); animation-timing-function: ease-out; } } .owl-item.active .owl-slide-text a.btn{ animation-name: slideUp; animation-duration: 1.2s; animation-timing-function: ease; } /* ---- ==== Header ==== ----*/ header.standard { right: 0; left: 0; z-index: 50; } header.transparent{ right: 0; left: 0; z-index: 50; position: absolute; } header.transparent .topbar { padding: 20px 0; } header.transparent .navbar .container .nav-wap { border-radius: 0; } header.transparent .btn.btn-search { border-radius: 0px; } header.transparent .navbar { padding: 0; } header.transparent .navbar .container { padding: 0px 15px; border-radius: 5px; } .sliderhome.two.owl-carousel .owl-stage-outer { height: unset; } .sliderhome.two .slide{ padding-top: 90px ; } /* ------------header-3---------- */ header.header-3 { position: absolute; top: 0; width: 100%; z-index: 2; } /* ---- topbar ----*/ .topbar { padding: 10px 0; } .topbar ul { display: flex; margin: 0; padding: 0; } .topbar ul li { display: inline-block; margin-left: 5px; margin-right: 5px; } .topbar ul li a { font-size: 14px; line-height: 1; } .topbar ul.left li i { margin-right: 8px; } .topbar ul.left { justify-content: flex-start; } .topbar ul.right { justify-content: flex-end; } .topbar ul.right li i { margin-left: 0px; } .topbar .quote_btn { margin: -10px 0 -10px 10px; border-radius: 0; padding: 10px 20px; } .site-branding-text h1, .site-branding-text h1 a { font-size: 22px; margin: 0; } .site-description { margin: 0; } .btn-search{ /* border: 1px solid; */ margin-left: 20px; } .nav-wap { display: flex; width: 100%; padding: 20px 10px; border-radius: 8px; position: relative; } #navbarCollapse{ justify-content: center; font-style: normal; font-weight: 600; font-size: 16px; } /* .nav-link{ padding-right: 1.5rem !important; padding-left: 1.5rem !important; } */ .navbar{ padding: 2rem 0.5rem; } button.navbar-toggler { padding: 10px 13px; } .navbar-toggler-icon i{ font-size: 22px; } .navbar .dropdown-menu { padding: 0; left: 20%; box-shadow: 0px 3px 10px rgb(0 0 0 / 20%); } .navbar li .dropdown-item{ font-weight: 600; font-size: 16px; padding: 10px 10px; border-bottom-width: 1px; border-bottom-style: solid ; } .navbar .search i { font-size: 16px; } .navbar .search i:hover { color: var(--primary-color); } /* ---- ==== Home Sections ==== ----*/ .section.hero .owl-carousel .owl-stage { height: 499px; } .section.hero .owl-carousel.owl-drag .owl-item { padding: 20px; } /* ---- slider ----*/ /* .sliderhome .slide:before { content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; } .sliderhome .slide { position: relative; height: 750px; background-color: lightgray; background-size: cover; background-position: center; background-repeat: no-repeat; } .sliderhome .owl-slide-animated { transform: translateX(20px); transition: all 0.05s; } .sliderhome .owl-slide-title { transition-delay: 0.2s; font-size: 65px; font-weight: 800; line-height: 77px; } .sliderhome .owl-slide-subtitle.is-transitioned { transition-delay: 0.35s; font-size: 20px; } .sliderhome .owl-slide-cta.is-transitioned { transition-delay: 0.5s; } .sliderhome .btn:first-child { margin-right: 15px; } .sliderhome .owl-dots, .sliderhome .owl-nav div { position: absolute; } .sliderhome .owl-dots .owl-dot, .sliderhome .owl-nav [class*="owl-"]:focus { outline: none; } .sliderhome .owl-dots .owl-dot span { background: transparent; border: 1px solid var(--main-black-color); transition: all 0.2s ease; } .sliderhome .owl-dots .owl-dot:hover span, .sliderhome .owl-dots .owl-dot.active span { background: var(--main-black-color); } .sliderhome .owl-nav div { margin: 0; } .sliderhome .owl-nav .owl-prev { left: 30px; } .sliderhome .owl-nav .owl-next { right: 30px; } */ /* ---- hero section ----*/ .hero-left{ position: relative; margin-bottom: 6em; } .hero-left h2{ font-size: 65px; font-weight: 600; } .hero-left p{ font-size: 25px; } .hero-left::before{ content: ''; position: absolute; top: -100px; left: -208px; background-image: url(./assets/images/shape\ 1.png); background-repeat: no-repeat; background-position: top right; background-size: contain; width: 100%; height: 20%; max-width: 250px; } .hero-right{ position: relative; margin-bottom: 6em; } .hero-right img{ border-radius: 41% 59% 74% 26% / 74% 50% 50% 26% ; position: relative; } .hero-right::before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; border-radius: 41% 59% 74% 26% / 74% 50% 50% 26%; bottom: -12px; right: -19px; } .hero-right::after{ content: ''; position: absolute; top: 340px; left: -70px; background-image: url(./assets/images/Template.png); background-repeat: no-repeat; background-position: top right; background-size: contain; width: 100%; height: 40%; max-width: 250px; z-index: 1; animation: UpDown 5s infinite ; } @keyframes UpDown { 100%,0%{ transform: translateY(-50px); } 50%{ transform: translateY(30px); } } .hero-right .bg-dots{ background-image: url(images/Template1.png); background-repeat: no-repeat; background-position: top right; background-size: contain; width: 150px; height: 166px; position: absolute; right: 40px; top: -20px; z-index: -1; animation: UpDown 5s infinite ; } .box-area{ position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; overflow: hidden; } .box-area li{ position: absolute; display: block; width: 25px; height: 25px; animation: animate 20s linear infinite; } .box-area li:nth-child(1){ left: 50%; width: 80px; height: 80px; animation-delay: .5s; animation-duration: 14s; top: 400px; } .box-area li:nth-child(2){ left: 40%; width: 30px; height: 30px; animation-delay: 2s; animation-duration: 8s; bottom: -15px; } .box-area li:nth-child(3){ left: 90%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 9s; bottom: -15px; } .box-area li:nth-child(4){ left: 10%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 8s; bottom: -15px; } .box-area li:nth-child(5){ left: 80%; width: 40px; height: 40px; animation-delay: 3s; animation-duration: 8s; bottom: -15px; } .box-area li:nth-child(6){ left: 20%; width: 110px; height: 110px; animation-delay: 6s; bottom: -15px; } .about .box-area li:nth-child(1){ left: 0%; width: 80px; height: 80px; animation-delay: 0; animation-duration: 6s; bottom: -15px; } .about .box-area li:nth-child(2){ left: 40%; width: 30px; height: 30px; animation-delay: 2s; animation-duration: 6s; bottom: -15px; } .about .box-area li:nth-child(3){ left: 15%; width: 100px; height: 100px; animation-delay: 4s; animation-duration: 6s; bottom: -15px; } .funfacts .box-area li:nth-child(1){ left: 0%; width: 80px; height: 80px; animation-delay: .5s; animation-duration: 8s; bottom: -15px; } .funfacts .box-area li:nth-child(2){ left: 20%; width: 30px; height: 30px; animation-delay: 2s; animation-duration: 8s; bottom: -15px; } .funfacts .box-area li:nth-child(3){ left: 40%; width: 100px; height: 100px; animation-delay: 2s; animation-duration: 8s; bottom: -15px; } .funfacts .box-area li:nth-child(4){ left: 0%; width: 100px; height: 100px; animation-delay: 2.5s; animation-duration: 8s; bottom: -15px; } @keyframes animate{ 0%{ transform: translateY(0) rotate(0deg); } 100%{ transform: translateY(-800px) rotate(360deg); } } /* ---- section title ----*/ .section { padding-top: 80px; padding-bottom: 60px; position: relative; } .section .container { z-index: 1; position: relative; } .home .project-section { background: #f8f8f8; } .bg-dark:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .bg-dark:after { opacity: .9; } .cover-bg { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } .tp-80 { top: -80px; z-index: 1; } .tp-100 { top: -100px; z-index: 1; } .tp-130 { top: -130px; z-index: 1; } .tp-150 { top: -150px; z-index: 1; } .pdt0 { padding-top: 0; } .pdb0 { padding-bottom: 0; } .pdb-100 { padding-bottom: 100px; } .pdb-150 { padding-bottom: 150px; } .mb-40 { margin-bottom: -40px } .mb-100 { margin-bottom: -100px } .mb-130{ margin-bottom: -130px; } .mt-10{ margin-top: -10px; } .mt-50{ margin-top: 50px; } .section-heading { margin-bottom: 40px; } .section-heading h2.ititle { font-size: 45px; font-weight: 800; } .section-heading h3.sub-title { font-size: 20px; position: relative; display: inline-block; line-height: 1.5; } .section-heading .discription { font-size: 20px; font-weight: 700; margin-bottom: 8px; } /* ---- about ----*/ .about .left{ position: relative; } .about .left::after{ content: ''; position: absolute; right: 120px; background-image: url(./assets/images/Group\ 15.png); background-repeat: no-repeat; background-position: top right; background-size: contain; width: 114px; height: 34px; max-width: 250px; } .about img{ border-radius: 38% 62% 57% 43% / 67% 60% 40% 33% ; } .about .section-heading { padding-top: 2em; } /* ---- features ----*/ .section.features { transform: translateY(-129px); margin-bottom: -129px; z-index: 2; } .feature { padding: 30px 25px; border-radius: 5px; } .feature.two{ border-radius: 0; } .feature i { width: 50px; line-height: 50px; text-align: center; font-size: 50px; } .feature h5 { font-size: 22px; font-weight: 600; margin: 10px 0; } .feature p { margin: 0; font-size: 16px; } /* ---- service ----*/ .service { padding: 30px 25px; border-radius: 5px; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.12); margin-bottom: 2.4em; } .service i { width: 50px; line-height: 50px; text-align: center; font-size: 50px; } .service h5 { font-size: 22px; font-weight: 600; margin: 10px 0; } .service p { margin: 0; } .service .ser-img { display: none; } .service.two { flex-direction: column; align-items: center; text-align: center; box-shadow: unset; border: 2px dashed; border-radius: 0; } .service.two:hover{ border: none; } .service.two i { margin-bottom: 25px; height: 80px; border-radius: 50%; width: 80px; line-height: 80px; text-align: center; font-size: 50px; box-shadow: 0 6px 2px 0 rgb(203 191 190 / 45%); } .service.two:hover i { animation: icon-bounce 0.8s cubic-bezier(.24,.74,.58,1) both 1; } @keyframes icon-bounce { 100%, 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 80% { transform: translateY(10px); } } .service.three .ser-img { display: block; height: 200px; overflow: hidden; width: 100%; } .service.three .ser-img img { height: 100%; transform: scale(1); transition: 0.5s; width: 100%; } .service.three:hover .ser-img img { height: 100%; transform: scale(1.2); } .service.three { position: relative; flex-direction: column; align-items: flex-start; text-align: left; padding: 15px; border-radius: 7px; margin-bottom: 30px; -webkit-transition: 500ms all ease; transition: 500ms all ease; -webkit-box-shadow: 0px 0px 45px 0px rgb(87 87 87 / 20%); box-shadow: 0px 0px 45px 0px rgb(87 87 87 / 20%); } .service.three i{ margin-bottom: 20px; box-shadow: 0px 15px 30px 0px rgb(255 72 78 / 20%); font-size: 35px; display: none; } .service.three .media-body{ position: relative; padding: 15px 0 10px; } .service.three .media-body a.link{ padding: 0px 0 0 20px; border-width: 2px; border-style: solid; font-size: 15px; font-weight: 700; display: inline-block; border-radius: 5px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: 0.5s ; opacity: 0; } .service.three:hover .media-body a.link{ opacity: 1; bottom: -30%; } .service.three .media-body a.link i{ display: unset; font-size: 15px; margin-left: 10px; margin-bottom: 10px; width: 40px; height: 35px; line-height: 35px; display: inline-block; margin-bottom: 0; box-shadow: none; border-radius: 2px; transform: scale(1.1); } /* ---- teams ----*/ .team { margin-bottom: 30px; } .team .bottom_content { border-radius: 10px; box-shadow: 0px 8px 30px 5px rgb(0 0 0 / 15%); margin: -30px auto; width: 70%; height: auto; padding: 20px 0px 1px 0px; z-index: 1; position: relative; } .team .top_img { position: relative; overflow: hidden; height: 400px; } .team .top_img img { max-width: 100%; width: 100%; } .team .social { display: flex; flex-direction: column; align-items: flex-end; height: 100%; position: absolute; top: 0; right: 100%; width: 100%; transition: all .3s ease; } .team:hover .social { right: 0; } .team h2 { font-size: 22px; font-weight: 600; } .team .designation { font-weight: 600; margin-bottom: 10px; font-size: 16px; } .team .social a { width: 40px; height: 40px; line-height: 40px; margin: 15px 15px 0 0; font-size: 16px; } .team.two{ position: relative; border-radius: 0px; overflow: hidden; } .team.two .top_img { position: relative; overflow: hidden; } .team .top_img img { max-width: 100%; width: 100%; height: 100%; object-fit: cover; } .team.two .top_img::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; transition: all 0.5s; } .team.two:hover .top_img::before { opacity: 0.5; } .team.two .social { display: unset; flex-direction: row; align-items: flex-end; position: absolute; top: 100%; left: 0%; transition: all .8s ease; } .team.two:hover .social { top: 85%; } .team.two .social a { display: inline-block; line-height: 40px; margin: 10px 3px; text-align: center; border: none; border-radius: 0; } .team.two .bottom_content { border-radius: 10px; box-shadow:unset; margin: 0px; width: 100%; height: auto; padding: 20px 0px 1px 20px; z-index: 1; position: absolute; bottom: 0%; left: 0; transition: all 0.8s ease; } .team.two:hover .bottom_content{ bottom: 15%; } .team.three .social { display: unset; flex-direction: column; align-items: flex-end; height: 100%; position: absolute; top: 0%; left: 0%; width: 100%; transition: all .5s ease; } .team.three .social a { display: block; line-height: 40px; margin: 10px; margin-left: -45px; text-align: center; border-radius: 0; } .team.three .social a { border: none; border-radius: 4px; } .team.three .bottom_content { border-radius: 0px; box-shadow: 0px 8px 30px 5px rgb(0 0 0 / 15%); margin: 0; width: 100%; height: auto; padding: 20px 15px 20px 15px; z-index: 1; position: relative; text-align: center; } .team.three .social a:nth-child(1){ transition: all 0.3s ease 0s; } .team.three .social a:nth-child(2){ transition: all 0.6s ease 0s; } .team.three .social a:nth-child(3){ transition: all 0.9s ease 0s; } .team.three .social a:nth-child(4){ transition: all 1.2s ease 0s; } .team.three:hover .social a{ margin-left: 20px; } /* ---- benefits ----*/ .benefits .left img{ border-radius: 58% 42% 21% 79% / 50% 64% 36% 50% ; } .benefits .name{ margin: 30px 0 5px; font-size: 18px; font-weight: 600; } .benefits .progress{ height: 12px; border-radius: 2px; position: relative; width: 100%; overflow: visible; } .benefits .one .progress .percentage{ left: 0; top: 0; position: absolute; height: 12px; border-radius: 2px; } .benefits .progress .percentage .percent{ position: absolute; top: -25px; right: 0; font-size: 14px; font-weight: 600; } .benefits .two .progress .percentage{ left: 0; top: 0; position: absolute; height: 12px; border-radius: 2px; } .benefits .three .progress .percentage{ left: 0; top: 0; position: absolute; height: 12px; border-radius: 2px; } /* ---- portfolio ----*/ .portfolio .icon { border-radius: 8px; } .portfolio .icon a { border: 1px solid; border-radius: 50%; position: relative; } .portfolio-main { margin-bottom: 2em; border-radius: 8px; overflow: hidden; } .portfolio-main .icon a { width: 40px; height: 40px; line-height: 40px; margin-left: 5px; margin-right: 5px; font-size: 16px; } .portfolio-main .icon { display: flex; align-items: center; justify-content: center; height: 100%; position: absolute; top: 0; right: 100%; width: 100%; transition: all .3s ease; } .portfolio-main .top_img { position: relative; overflow: hidden; height: 300px; } .portfolio-main:hover .icon { right: 0; } .portfolio .top_img img{ border-radius: 8px; width: 100%; height: 100%; object-fit: cover; } .portfolio .bottom_content{ padding: 15px 0 0 0; text-align: start; } .portfolio .bottom_content h4{ font-size: 20px; font-weight: 600; } .portfolio .bottom_content h5{ font-size: 16px; } .portfolio:hover .inner { } .portfolio h2 { font-size: 22px; font-weight: 600; } .portfolio-main.two { position: relative; transition: 0.5s; border-radius: 0px; } .portfolio-main.two .icon { display: unset; align-items: center; justify-content: center; height: 0%; width: unset; position: absolute; top: 5%; right: 0%; opacity: 0; transition: all 0.5s ease-in-out; transition-delay: 0.4s; text-align: right; transform: scale(0); } .portfolio-main.two:hover .icon{ opacity: 1; transform: scale(1); } .portfolio-main.two .icon a { width: 50px; height: 50px; line-height: 50px; margin-left: 5px; margin-right: 5px; border-radius: 0%; border: none; display: inline-block; text-align: center; transition: 0.5s; transform: scale(0); } .portfolio-main.two:hover .icon a{ transform: scale(1); } .portfolio-main.two .top_img img { border-radius: 0; } .portfolio-main.two .bottom_content { padding: 15px 10px 15px 12px; text-align: start; position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; width: 100%; transform: translateY(110%); transition: 0.5s; } .portfolio-main.two:hover .bottom_content { animation-name: Bounce; animation-timing-function: ease; animation-duration: 900ms; animation-iteration-count: 1; transform: translateY(0%); } @keyframes Bounce{ 0% { transform: translateY(0); } 50% { transform: translateY(-40px); } 100% { transform: translateY(0); } } .portfolio-main.three{ position: relative; } .portfolio-main.three .inner{ position: relative; } .portfolio-main.three .inner::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; transition: 0.8s; } .portfolio-main.three:hover .inner::before{ opacity: 0.8; } .portfolio-main.three .bottom_content { position: absolute; bottom: 10%; left: 0; background-color: transparent; z-index: 5; } .portfolio-main.three .icon { display: flex; align-items: center; justify-content: center; height: unset; position: absolute; top: 5%; right: -15%; opacity: 0; z-index: 2; width: unset; background-color: transparent; text-align: center; transition: all .8s ease; } .portfolio-main.three:hover .icon{ opacity: 1; right: 5%; } .portfolio-main.three .top_img img { border-radius: 0px; transition: 0.5s; } .portfolio-main.three:hover .top_img img { transform: scale(1.2); } .portfolio-main.three .bottom_content h4 ,.portfolio-main.three .bottom_content h5 { transform: translateX(-50px); opacity: 0; transition: 0.5s; transition-delay: 0.3s; } .portfolio-main.three:hover .bottom_content h4,.portfolio-main.three:hover .bottom_content h5 { transform: translateX(10px); opacity: 1; } .portfolio-main.three .bottom_content h5 { transition-delay: 0.5s; } /* ---- funfacts ----*/ .funfacts{ overflow: hidden; /* background: url(images/fun01.jpg); background-size: cover; position: relative; */ } /* .funfacts::before{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #000; opacity: 0.7; } */ .funfacts .left{ position: relative; } .funfacts .right{ position: relative; padding: 80px 0; } .funfacts .left::after{ content: ''; position: absolute; background-image: url(./assets/images/funfact.png); background-repeat: no-repeat; background-position: top right; background-size: contain; width: 134px; height: 127px; max-width: 250px; top: 60px; left: -101px; } .funfacts .left img{ border-radius: 30% 70% 67% 33% / 56% 35% 65% 44% ; } .funfact{ border-width: 2px ; border-style: solid; box-sizing: border-box; border-radius: 30px 0px; padding: 30px 20px 20px; margin-bottom: 24px; } .funfact.v2{ border: none; border-radius: 5px; padding: 30px 20px 20px; box-shadow: 0px 5px 10px 4px rgb(4 9 14 / 55%); } .funfact.one{ box-shadow: 0px 5px 0px #d7fff4; } .funfact.two{ box-shadow: 0px 5px 0px #FFF9AE; } .funfact.three{ box-shadow: 0px 5px 0px #FFF2C6; } .funfact.four{ box-shadow: 0px 5px 0px #D7FFC2; } .funfact h5{ margin-bottom: 24px; font-weight: 600; } /* ---- testimonials ----*/ .testimonial_crowsel {} .testimonials{ position: relative; } .testimonials .owl-carousel .owl-nav { opacity: 1; transition: all 0.3s ease 0s; display: none; } .testimonials .left img{ border-width: 30px; border-style: solid; border-radius: 50%; box-shadow: 0 0 0 35px rgb(255 59 43 / 6%); } .testimonials .tooltip-box{ position: absolute; top: 4%; left: -3%; text-align: center; height: 90px; width: 160px; border-radius: 10px 10px 0 10px; padding: 10px 10px; box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.12); } .testimonials .tooltip-box h4{ font-weight: bold; font-size: 25px; } .testimonials .tooltip-box span{ font-weight: 600; font-size: 16px; } .testimonial .media-body h6 { line-height: 1; margin-bottom: 0; } .testimonial .details { font-size: 16px; } .testimonial i{ font-size: 100px; } .testimonial .bottom_text p{ font-size: 22px; font-weight: 600; line-height: 30px; } .testimonials .img-author { width: 90px !important; height: 90px; object-fit: cover; border-radius: 50%; } .testimonial.two { padding: 20px; margin-left: 22px; } .testimonial.two .avtar { text-align: right; } .testimonial.two .avtar i { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 22px; transform: translate(-12px,20px); text-align: center; box-shadow: 0 0 10px 2px rgb(255 225 222); } .testimonial.two .img-author { width: 90px !important; height: 90px; object-fit: cover; border-radius: 50%; border-width: 4px; border-style: double; } .testimonial.three { padding: 20px; } .testimonial.three .inner { background: url(assets/images/world.png); background-size: cover; display: flex; flex-direction: column-reverse; text-align: center; } .testimonial.three .media { flex-direction: column; } .testimonial.three .media-body { margin-top: 20px; } .testimonial.three .media-body h6 { line-height: 1; margin-bottom: 00; } .testimonial.three .avtar { position: relative; } .testimonial.three .avtar i { width: 40px; height: 40px; line-height: 40px; border-radius: 0%; font-size: 22px; transform: translate(-12px,20px); text-align: center; box-shadow: 0 0 10px 2px rgb(255 225 222 / 30%); position: absolute; top: -35%; right: -5%; border-radius: 50%; } /* ---- plans ----*/ .plans .section-heading h4{ font-size: 20px; position: relative; display: inline-block; line-height: 1.5; } .plans .section-heading h2{ font-size: 45px; font-weight: 800; } .plan { box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.12); margin-bottom: 30px; border-radius: 15px; } .plan h2 { padding: 40px 30px; margin: 0; } .plan .price { border-radius: 50%; margin: 10px auto; width: 150px; height: 150px; padding: 30px 10px; position: relative; z-index: 1; } .plan .price h5{ font-size: 60px; font-weight: 600; margin-bottom: 0px; } .plan-features { padding: 30px; } .plan-features li { padding: 5px 0; font-size: 16px; } .plan .plan-footer a{ border-radius: 25px; } .plan-footer { margin-top: 20px; } .plan.two { border-radius: 0px; position: relative; } .tags{ display: block; position: absolute; top: -10px; right: -10px; z-index: 1; width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .tags::before{ content: 'Popular'; position: absolute; width: 150%; height: 40px; display: flex; justify-content: center; align-items: center; font-weight: 700; letter-spacing: 2px; transform: rotate(45deg) translateY(-20px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); font-size: 16px; } .tags::after{ content: ''; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; z-index: -1; box-shadow: -140px -140px #c52b1f; } .tags.two{ display: block; position: absolute; top: 4%; right: -4%; z-index: 1; width: 200px; height: 40px; display: flex; justify-content: center; align-items: center; overflow: unset; border-radius: 25px; border-bottom-right-radius: 0px; font-size: 18px; font-weight: 600; letter-spacing: 4px; } .tags.two::before { content: ''; position: absolute; bottom: -100%; right: 0; width: 15px; height: 20px; display: flex; justify-content: center; align-items: center; font-weight: 700; letter-spacing: 2px; transform: rotate(0deg) translateY(-20px); box-shadow: 0 5px 10px rgb(0 0 0 / 10%); border-top-right-radius: 25px; border-bottom-right-radius: 25px; } .tags.two::after{ content: ''; position: absolute; bottom: -8px; right: 0; width: 14px; height: 14px; z-index: -2; box-shadow:unset; } .plan.two h2 { padding: 30px 0 10px 0px; margin: 0; font-size: 25px; font-weight: 600; line-height: 35px; letter-spacing: -.7px } .plan.two .price { border-radius: 0%; width: 100%; height: 150px; padding: 10px 10px; position: relative; z-index: 1; } .plan.two .price h5{ font-size: 24px; font-weight: 600; text-align: left; display: flex; justify-content: center; } .plan.two .price h5 span{ margin-bottom: 30px; font-weight: 300; font-size: 80px; line-height: .75; } .plan.two .price p{ display: inline-block; vertical-align: top; margin-bottom: 22px; padding: 5px 17px; border-radius: 35px; font-weight: 400; font-size: 15px; line-height: 28px; } .plan.two .plan-features{ padding: 15px 60px; } .plan.two .plan-features li { padding: 5px 0; border-bottom-width: 1px; border-bottom-style:solid ; padding-bottom: 12px; margin-bottom: 12px; } .plan.two .plan-features li.plan-footer { margin-top: 20px; border-bottom: none; } .plan.two .plan-footer a{ border-radius: 0px; } .plan.three{ border-radius: 8px; padding: 80px 30px; position: relative; } .plan.three h2{ position: relative; font-family: inherit; padding: 0px 40px; font-size: 25px; font-weight: 600; line-height: 35px; } .plan.three .amount.counter { font-size: 80px; font-weight: 600; transform: translateY(2px); } .plan.three .price { border-radius: 0%; margin: 0; width: 100%; height: 150px; padding: 30px 10px; position: relative; z-index: 1; display: flex; justify-content: center; align-items: end; } .plan.three .price h5 { padding: 0 10px; font-weight: 400; font-size: 22px; display: flex; justify-content: flex-start; } .plan.three .plan-features { padding: 0px; } .plan.three .plan-features li { padding: 10px 0; border-bottom: none; } .plan.three .plan-features li.plan-footer{ border: none; padding: 0; } .plan.three .plan-features li.plan-footer a { border-radius: 5px; } /* ---- callout ----*/ .callout { padding-top: 80px; padding-bottom: 80px; } .callout h2 { font-size: 54px; font-weight: 800; } /* ---- calltoaction ----*/ .calltoaction h2 { font-size: 45px; line-height: 1.25; font-weight: 700; } .calltoaction .inner{ border-radius: 15px; position: relative; } .calltoaction .btn { float: right; } .calltoaction .main-call{ padding: 70px 50px 70px; } .calltoaction .inner::before{ content: ''; width: 150px; height: 100px; border-radius: 99% 1% 100% 0% / 100% 0% 100% 0%; position: absolute; top: 0; left: 0; } /* ---- contact page ----*/ .content .feature{ border-radius: 0; box-shadow: 0px 0px 20px 10px rgba(223, 223, 223, 0.25); } .content .feature i{ font-size: 30px; border-radius: 50%; } .content .feature h5{ font-size: 20px; } .contact-right{ box-shadow: 0px 0px 20px 10px rgb(223 223 223 / 25%); padding: 40px; } /* ---- ==== Breadcrumb ==== ----*/ .breadcrumb { padding: unset; margin: unset; border-radius: 0; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; } .breadcrumb .inner { height: 100%; padding: 250px 0 250px 0; position: relative; width: 100%; } .breadcrumb h1 { font-size: 60px; font-weight: 600; } li.breadcrumb-item { font-size: 16px; } /* ---- ==== img-effect ==== ----*/ .img_eff { overflow: hidden; } .img_eff img { transition: transform .8s; } .img_eff img:hover { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1.5); } /* ---- ==== Blog ==== ----*/ .blog_post { box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1); } .post-thumbnail img, .post_img img { width: 100%; height: auto; } .hover_eff:hover span.right-btn{ box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.2); } .post_content span.right-btn{ width: 60px; height: 60px; line-height: 65px; text-align: center; border-radius: 50%; font-weight: 600; float: right; transform: translateY(-65px); } .post_content { padding: 30px; } .post_content .right-btn i{ font-size: 1.6em; } .post_content .categories { font-size: 16px; } .post_content h4, .post_content h1 { font-size: 25px; font-weight: 600; margin: 20px 0 40px; } .post_meta { font-size: 14px; font-weight: 500; letter-spacing: 0.5px; opacity: 0.8; border-top: 1px solid; text-transform: capitalize; padding-top: 10px; display: flex; justify-content: space-between; } .author{ margin-left: 6px; } .author i{ padding-right: 10px; } .date i{ padding-right: 10px; } .categories a{ margin-right: 5px; font-weight: 600; } .categories a:hover{ color: var(--primary-color); } .categories i{ padding-right: 10px; } .comment-area, .comments-area { padding: 20px; border-width: 1px ; border-style: solid; } /* ---- ==== Sidebar ==== ----*/ .sidebar .widget { padding: 20px; border-width: 1px; border-style: solid; margin-bottom: 30px; } .sidebar .widget h3 { font-size: 22px; font-weight: 700; margin-bottom: 15px; padding-left: 10px; border-left-width: 4px; border-left-style: solid; } /* ---- ==== widgets ==== ----*/ .widget ul { padding: 0; margin: 0; } .widget ul li { margin: 0; padding: 10px 0; border-bottom-width: 1px; border-bottom-style: solid; } .widget ul li:last-child { border-bottom: unset; padding-bottom: 0; } .widget .tagcloud a { display: inline-block; line-height: 20px; margin: 0 5px 9px 0; padding: 6px 12px; } .widget .input-group-btn .btn { border-radius: 0 4px 4px 0; } .widget .calendar_wrap table tbody td { line-height: 2.5em; transition: background 0.15s ease 0s; text-align: center; border-width: 1px; border-style: solid; padding: 0 8px; } .widget .textwidget img { width: 100%; height: auto; } .widget ul li .media-body h5 { font-size: 18px; } .widget ul li.media img { width: 70px; height: 70px; object-fit: cover; } .widget .social a { width: 30px; height: 30px; line-height: 30px; margin-left: 5px; margin-right: 5px; display: inline-block; } /* ---- ==== Footer ==== ----*/ footer .inner .top { padding-top: 80px; padding-bottom: 60px; } footer .widget { margin-bottom: 20px; } footer .widget h4 { position: relative; font-weight: 600; font-size: 22px; margin-bottom: 55px; } footer .widget h4::after{ content: ""; width: 72px; height: 2px; position: absolute; left: 0; bottom: -15px; } footer .widget ul { margin: 0; padding: 0; list-style: none; font-size: 16px; } footer .input-group input{ outline: none; border-radius: 4px; font-size: 16px; } footer .widget ul li { margin: 0; padding: 5px 0; border-bottom: unset; } footer .widget .social a{ width: 40px; height: 40px; line-height: 40px; margin-left: 5px; margin-right: 5px; text-align: center; border: 1px solid; } footer .inner .bottom { padding-top: 10px; padding-bottom: 10px; } footer .inner .bottom span{ padding-top: 10px; padding-bottom: 10px; /* font-size: 1.6em; */ } .inner.bg-trans { background-image: url(images/breadcrumb.jpg); background-size: cover; background-position: center; position: relative; } .inner.bg-trans::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; } /* ---- ==== Media ==== ----*/ @media (min-width: 992px) and (max-width: 1200px) { .container { max-width: 1200px; } .nav-link { padding-right: 1rem !important; padding-left: 1rem !important; } } @media (min-width: 768px) and (max-width: 991px){ .hero-left h2 { font-size: 5em; } .hero-left p { font-size: 1.6em; } .service.three .media-body a.link i { margin-left: 5px; } .team .top_img { height: 35em; } .portfolio-main .top_img { height: 25em; } } @media (min-width: 576px) and (max-width: 767px){ .portfolio-main .top_img { height: 20em; } .team .top_img { height: 55em; } } @media (min-width: 400px) and (max-width: 575px){ .team .top_img { height: 55em; } } @media (max-width: 400px){ .hero-left h2 { font-size: 5em; } } @media (max-width: 767.98px) { .topbar ul.left, .topbar ul.right { justify-content: center; } .topbar ul.right { padding: 10px 0; align-items: center; } .topbar .quote_btn { margin: unset; padding: 0 4px; } .site-branding-text { width: 78%; } .calltoaction { text-align: center; } .calltoaction .btn { float: unset; } .callout h2 { font-size: 26px; } .callout h3.sub-title { font-size: 20px; } .sliderhome .owl-slide-title { font-size: 32px !important; line-height: 1.25; } .sliderhome .owl-slide-animated { transform: translateX(0); transition: all 0.05s; } .sliderhome .btn { padding: 0 10px !important; } .sliderhome.two{ padding-top: 2em; } .team { margin-bottom: 60px; } .funfact { padding: 30px 20px 30px; } .testimonial.two { margin-top: 3.9em; } .tags.two { right: -3%; } footer .inner .bottom { text-align: center; } footer .inner .bottom .justify-content-end { -ms-flex-pack: center !important; justify-content: center !important; } } @media (max-width: 991.98px) { .navbar .dropdown-menu { padding: 0; left: 20%; box-shadow: unset; } .nav-wap { justify-content: space-between; } header.transparent #navbarCollapse{ position: absolute; top: 110%; right: 0; width: 100%; background: #fff; border-radius: 8px; } header.header-3 #navbarCollapse { background-color: #000; } header.header-3 .navbar .dropdown-menu { padding: 0; left: 20%; box-shadow: unset; background: #0a0a0a; } header.header-3 .navbar li .dropdown-menu a { color: #fff; } .navbar .navbar-nav { align-items: center; } .navbar a#navbardrop { position: relative; } .navbar .dropdown-toggle::after { position: absolute; top: 50%; transform: translateY(-50%); } .owl-carousel .owl-nav { display: none; } .section.hero .owl-carousel .owl-stage { height: auto; } .sliderhome .owl-slide-title { font-size: 45px; line-height: 1.25; } .feature { margin-bottom: 1.8em; } .testimonials .tooltip-box { left: 0%; } } /* ---- ==== WordPress Core ==== ----*/ img.alignnone { max-width: 100%; height: auto; } img.size-large { width: 100%; height: auto; } select { width: 100%; } /******* Caption Classes *******/ .bypostauthor {} .gallery:after { content: ""; display: table; clear: both; } .gallery-caption { display: block; font-size: 16px; line-height: 1.6; margin: 0; padding: 0.5rem; } img.aligncenter, div.aligncenter, figure.aligncenter, img.wp-post-image { display: block; margin: 1em auto; } img.alignright, div.alignright, figure.alignright { float: right; margin: 1em 0 1em 2em; } img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb { float: left; margin: 1em 1em 2em 0; } figure { max-width: 100%; height: auto; margin: 1em 0; } p img.alignright, p img.alignleft { margin-top: 0; } .gallery figure img { max-width: 100%; height: auto; margin: 0 auto; display: block; } .gallery figure { float: left; margin: 0 2% 1em 0; } .gallery.gallery-columns-1 figure { width: 100%; margin: 0 0 1em 0; float: none; } .gallery.gallery-columns-3 figure { width: 32%; } .gallery.gallery-columns-3 figure:nth-of-type(3n+3) { margin-right: 0; } .gallery.gallery-columns-3 figure:nth-of-type(3n+4) { clear: left; } .gallery.gallery-columns-2 figure { width: 49%; } .gallery.gallery-columns-2 figure:nth-of-type(even) { margin-right: 0; } .gallery.gallery-columns-2 figure:nth-of-type(odd) { clear: left; } .gallery.gallery-columns-4 figure { width: 23.25%; } .gallery.gallery-columns-4 figure:nth-of-type(4n+4) { margin-right: 0; } .gallery.gallery-columns-4 figure:nth-of-type(4n+5) { clear: left; } .gallery.gallery-columns-5 figure { width: 18%; } .gallery.gallery-columns-5 figure:nth-of-type(5n+5) { margin-right: 0; } .gallery.gallery-columns-5 figure:nth-of-type(5n+6) { clear: left; } .gallery.gallery-columns-6 figure { width: 14.2%; } .gallery.gallery-columns-6 figure:nth-of-type(6n+6) { margin-right: 0; } .gallery.gallery-columns-6 figure:nth-of-type(6n+7) { clear: left; } .gallery.gallery-columns-7 figure { width: 12%; } .gallery.gallery-columns-7 figure:nth-of-type(7n+7) { margin-right: 0; } .gallery.gallery-columns-7 figure:nth-of-type(7n+8) { clear: left; } .gallery.gallery-columns-8 figure { width: 10.2%; } .gallery.gallery-columns-8 figure:nth-of-type(8n+8) { margin-right: 0; } .gallery.gallery-columns-8 figure:nth-of-type(8n+9) { clear: left; } .gallery.gallery-columns-9 figure { width: 8.85%; } .gallery.gallery-columns-9 figure:nth-of-type(9n+9) { margin-right: 0; } .gallery.gallery-columns-9 figure:nth-of-type(9n+10) { clear: left; } @media (max-width:767px) { img.alignright, div.alignright, figure.alignright, img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb { display: block; margin: 1em auto; float: none; } .gallery.gallery-columns-4 figure, .gallery.gallery-columns-5 figure, .gallery.gallery-columns-6 figure, .gallery.gallery-columns-7 figure, .gallery.gallery-columns-8 figure, .gallery.gallery-columns-9 figure { width: 100%; margin: 0 0 1em 0; float: none; } } /* Text meant only for screen readers. */ /*todo*/ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* ---- ==== woocomerce ==== ----*/ .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { max-width: 100%; padding-left: 0; padding-right: 0; } .woocommerce form .form-row .woocommerce-input-wrapper { width: 100%; } /* ---- ==== navigation ==== ----*/ .navigation.pagination .nav-links .page-numbers, .navigation.pagination .nav-links a { vertical-align: baseline; white-space: nowrap; width: 40px; height: 40px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); transition: all 0.3s ease 0s; font-size: 18px; line-height: 40px; margin: 0 6px 10px; text-decoration: none; position: relative; border-radius: 4px; padding: 0px; float: left; cursor: pointer; display: inline-block; } .navigation.pagination>li:first-child>a, .navigation.pagination>li:first-child>span { border-radius: 30px; } .post-navigation .nav-previous { float: right; } .post-navigation { overflow: visible; padding: 10px 0; } .navigation.pagination .nav-links .page-numbers, .navigation.pagination .nav-links a { text-align: center; margin-top: 30px; } /*BLOG*/ .nav-links { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .nav-previous, .nav-next { width: 50%; padding: 25px 0; font-size: 16px; font-weight: 600; } .nav-next { text-align: right; } /*For Section BLog*/ .section.blogs img.wp-post-image { margin: 0px; } body.page-template.page-template-homepage-template { background-image: none; } /* CF7 */ .wpcf7 input, .wpcf7 textarea{ padding:10px; color:#8e8e8e; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height: 20px; border: solid 1px #9f9f9f; box-shadow: inset 1px 1px 1px #bababa; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .wpcf7 .wpcf7-list-item{ padding-left: 0; margin-left: 0; margin-right: 25px; } .wpcf7 .wpcf7-list-item input{ border: none; padding-left: 0; margin-left: 0; } .wpcf7 select{ outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; } .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active { background: var(--box-shadow); outline: none; } .wpcf7 input.wpcf7-submit{ padding: 10px 35px; border-radius: 0px; color: #fff !important; box-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color); background: var(--primary-color); border: none; } /* On hover */ .wpcf7 input.wpcf7-submit:hover{ transition: all 0.3s ease 0s; outline: none; box-shadow: 0 4px 20px -5px rgb(0 0 0 / 50%); border-radius: 0px; cursor: pointer; background-color: var(--secondary-color); } /* On click */ .wpcf7 input.wpcf7-submit:active{ top: 1px; color: #d8c6e2; background-color: #000000; background: -webkit-gradient(linear, left top, left bottom, from(#4d1b5c), to(#4d1b5c)); background: -moz-linear-gradient(top, #4d1b5c, #4d1b5c); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* CF7 Messages */ .wpcf7 .wpcf7-validation-errors{ border:none; background-color:#f4ae46; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ok{ border:none; background-color:#7ad33f; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .wpcf7 .wpcf7-mail-sent-ng{ border:none; background-color:#cf2d38; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white; } .wpcf7 span.wpcf7-not-valid-tip{ border:none; background-color:#cf2d38; padding-left: 15px; padding-right: 15px; border-radius:10px; width: 180px; color: white; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); } .wpcf7-form .fleft{ float: left; } .wpcf7-form .mright20{ margin-right: 20px; } .wpcf7-form .mright40{ margin-right: 40px; } .wpcf7-form .clear{ clear: both; } /*woocommerce*/ .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2, .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 { max-width: 48%; } #customer_details input, #customer_details label, #customer_details .woocommerce-input-wrapper { width: 100%; } /* Mobile Menu item width */ @media (max-width: 991.98px){ .navbar .menu-item { width: 100%; } } .navbar .dropdown-menu li a:hover, .navbar .dropdown-menu li a:focus{ color: #fff !important; } .navbar-toggler-icon i{ padding-right: inherit; } /* underline anchor link */ .post_content p a{ text-decoration: underline; } footer p a, #comments a, footer ul li a{ text-decoration: underline; }