:root { --wpdevart-box-radius: 7px 0 7px 0; scroll-behavior: smooth; } html { line-height: 1.15; } body { color: #333333; overflow-x: hidden; margin: 0; font-family: Open Sans, sans-serif; background: #ffffff; } img { max-width: 100%; height: auto; } a { color: #000000; } a:hover { text-decoration: none; } p, #FFFFFF li { line-height: 1.5; #FFFFFF } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; } pre { white-space: pre-wrap; word-break: break-word; } button, input, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; } /* -------------------------------------------Wpdevart Top Header------------------------------------------- */ .wpdevart-top-header { padding: 5px 0 5px 0; } .wpdevart-top-header-bg-color { background:#fff; } .wpdevart-top-header-gradient-color { background: linear-gradient(to right, #fff, #fff); } .wpdevart-top-header-border { border-bottom: 1px solid #f7f7f7; } @media (min-width: 960px) { .wpdevart-top-header-section { max-width: 1300px; min-height: 35px; display: flex; margin: auto; padding: 0 20px 0 20px; justify-content: center; align-items: center; } } @media (max-width: 960px) { .wpdevart-top-header-section { padding: 20px; } } .wpdevart-top-header-left { color:#000000; font-size: 13px; } .wpdevart-top-header-left-content, .wpdevart-top-header-right-content { font-size: 13px; } @media (min-width: 960px) { .wpdevart-top-header-left { flex: 50%; } } @media (min-width: 960px) { .wpdevart-top-header-right { flex: 50%; #FFFFFF } } @media (min-width: 960px) { .wpdevart-top-header-right-content { display: block; float: right; } } @media (min-width: 960px) { .wpdevart-top-header-left-icons { flex: 50%; } } @media (min-width: 960px) { .wpdevart-top-header-left-icons-content { display: block; float: left; } } @media screen and (max-width:960px) { .wpdevart-top-header-left { width: 100%; text-align: center; } .wpdevart-top-header-left-content { text-align: center; width: 100%; color:#000000; } .wpdevart-top-header-right { width: 100%; } .wpdevart-top-header-right-content { display: flex; align-items: center; justify-content: center; margin-top: 10px; color:#000000; } .wpdevart-top-header-left-icons { width: 100%; } .wpdevart-top-header-left-icons-content { display: flex; align-items: center; justify-content: center; margin-top: 10px; } .wpdevart-top-header { padding: 10px 0 10px 0; } } @media (max-width: 550px) { .wpdevart-top-header-phone { text-align: center; display: block; } } @media (max-width: 550px) { .wpdevart-top-header-email { text-align: center; display: block; } } .wpdevart-phone-email-text { padding-right:7px; vertical-align:middle; display:inline-block; max-width:250px; word-break: break-word; } .wpdevart-phone-email-icon { padding-right:7px; vertical-align:middle; } .top-header-icons { font-size:20px!important; } .wpdevart-social-icons { margin-left: 10px; float: left; padding: 2px; border-radius: 2px; width: 19px; height: 19px; text-align: center; font-size: 17px; background-color: #fff; border: 1px solid #000000; } .wpdevart-social-icons:hover { transform: scale(1.05); transition-duration: 300ms; box-shadow: 0px 0px 5px #000000; } span.wpdevart-social-icons a { text-decoration: none; } span.wpdevart-social-icons a::before { content: ""; font-family: 'fontawesome'; color: #000000; } span.wpdevart-social-icons a[href*='twitter.com']::before { content: "\e61b"; } span.wpdevart-social-icons a[href*='facebook.com']::before { content: "\f09a"; } span.wpdevart-social-icons a[href*='linkedin.com']::before { content: "\f0e1"; } span.wpdevart-social-icons a[href*='youtube.com']::before { content: "\f16a"; } span.wpdevart-social-icons a[href*='instagram.com']::before { content: "\f16d"; } span.wpdevart-social-icons a[href*='tiktok.com']::before { content: "\e07b"; } span.wpdevart-social-icons a[href*='pinterest.com']::before { content: "\f231"; } @media (max-width:960px) { .wpdevart-phone-email-text { padding:0 3px!important; } .wpdevart-phone-email-icon { padding:0 3px!important; } .wpdevart-social-icons { margin: 0 5px!important; } } /* ------------------------------------------Wpdevart Header------------------------------------------ */ .wpdevart-main-header-bg { background: #ffffff; position: relative; } .wpdevart-main-header-bg-gradient { background: linear-gradient(to right, #ffffff, #ffffff); position: relative; } .wpdevart-main-header-border { border-bottom: 2px solid #3A519C !important; } ul#menu-category { height: 50px; } .wpdevart-sticky-header, .wpdevart-sticky-header-for-mobile { position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .wpdevart-header-container { max-width: 1300px; margin: 0 auto; padding: 16px 0 0 0; } @media (min-width:960px) { .wpdevart-header-container { padding: 25px 16px; } } .wpdevart-main-header-section { width: 100%; text-align: center; } @media(min-width:960px) { .wpdevart-main-header-section { display: flex; align-items: center; justify-content: center; text-align: left; } } .wpdevart-logo-area { width: 33%; } @media(max-width:960px) { .wpdevart-logo-area { width: 100%; } } .wpdevart-logo-area img { width: auto; max-height: 70px; } @media(min-width:960px) { .wpdevart-logo-area img { width: auto; max-height: 60px; } } @media(max-width:960px) { .wpdevart-main-header-section-mobile-logo{ display: flex; align-items: center; justify-content: center; margin: 15px 0; text-align: left; } } /* ------------------------------------------Mobile toolbar logo------------------------------------------ */ @media (max-width: 960px) { .wpdevart-logo-area, .wpdevart-logo-area-layouttwo { display: none; } #wpdevartmobilemenu #head-mobile { display: flex !important; align-items: center; justify-content: space-between; padding: 10px 16px !important; min-height: 56px; } .wpdevart-mobile-toolbar-logo { display: flex; align-items: center; flex: 1; } .wpdevart-mobile-toolbar-logo a { display: flex; align-items: center; text-decoration: none; } .wpdevart-mobile-toolbar-logo img { max-height: 40px; width: auto; } .wpdevart-mobile-logo-text { font-size: 18px; font-weight: 700; color: #3A519C; text-decoration: none; } } @media (min-width: 960px) { .wpdevart-mobile-toolbar-logo { display: none; } } .wpdevart-logo-area-layouttwo img { width: auto; max-height: 120px; } @media(min-width:960px) { .wpdevart-logo-area-layouttwo img { width: auto; max-height: 100px; } } .wpdevart-header-logo-spaces { line-height:0!important; margin: 0!important; } @media(max-width:960px) { .mobile-image-logo-resizing { padding: 0 30px; } } .wpdevart-logo-text { margin: 0; font-size: 30px; word-break: break-word; text-align: left; max-width: 100%; font-weight: 600; text-transform: uppercase; } @media (max-width: 960px) { .wpdevart-logo-text { text-align: center; max-width: 80%; } } .wpdevart-logo-text a { text-decoration: none; } .wpdevart-logo-text-simple { color: #3A519C; } .wpdevart-logo-text-gradient { margin: 0; font-size: 30px; word-break: break-word; text-align: left; max-width: 100%; font-weight: 600; text-transform: uppercase; } @media (max-width: 960px) { .wpdevart-logo-text-gradient { text-align: center; max-width: 80%; } } .wpdevart-logo-text-gradient a { background: linear-gradient(to right,#3A519C,#3A519C); #FFFFFF text-decoration: none!important; } #FFFFFF .header-action-button-mobile-area { width: 80%; padding: 10px 0 30px 0; margin: 0 auto; } @media (min-width: 960px) { .header-action-button-mobile-area { display: none; } } .wpdevart-header-action-button { word-break: break-word; max-width: 200px; } @media (min-width: 960px) and (max-width: 1200px) { .wpdevart-header-action-button { font-size: 14px!important; padding: 8px 6px!important; } } .wpdevart-menu-and-buttons-area { width: 100%; } @media(min-width:960px) { .wpdevart-menu-and-buttons-area { flex: 67%; } } .wpdevart-menu-and-buttons-container { width: 100%; } @media (min-width: 960px) { .wpdevart-menu-and-buttons-container { display: flex; align-items: center; justify-content: flex-end; } } @media (max-width: 960px) { .header-action-button-area { display: none; } } .header-action-button-area { margin-left: 10px; } /* ------------------------------------------Layout: logo in center------------------------------------------ */ .wpdevart-main-header-section-layouttwo { width: 100%; padding: 10px 0 20px 0; } .wpdevart-header-logo-spaces-layouttwo { width: 400px; margin: 0 auto!important; line-height:0!important; text-align: center; } @media (min-width: 960px) { .wpdevart-header-logo-spaces-layouttwo { width: 450px; } } @media (max-width: 600px) { .wpdevart-header-logo-spaces-layouttwo { width: 280px; } } .wpdevart-header-logo-spaces-layouttwo img { max-width: 400px; max-height: 300px; } @media (min-width: 960px) { .wpdevart-header-logo-spaces-layouttwo img { max-width: 450px; max-height: 280px; } } @media (max-width: 600px) { .wpdevart-header-logo-spaces-layouttwo img { max-width: 280px; max-height: 180px; } } .wpdevart-logo-text-layouttwo { margin: 0 auto!important; word-break: break-word; max-width: 450px; text-align: center; font-size: 30px; font-weight: 600; text-transform: uppercase; } @media (max-width: 960px) { .wpdevart-logo-text-layouttwo { text-align: center; max-width: 80%; } } .wpdevart-logo-text-layouttwo a { text-decoration: none; } .wpdevart-logo-text-layouttwo-simple { color: #3A519C; } .wpdevart-logo-text-layouttwo-gradient { margin: 0 auto!important; word-break: break-word; max-width: 650px; text-align: center; font-size: 30px; font-weight: 600; text-transform: uppercase; } @media (max-width: 960px) { .wpdevart-logo-text-layouttwo-gradient { text-align: center; max-width: 80%; } } .wpdevart-logo-text-layouttwo-gradient a { background: linear-gradient(to right,#3A519C,#3A519C); text-decoration: none!important; } .header-action-button-mobile-area-layouttwo { width: 80%; padding: 10px 0 30px 0; text-align: center; margin: 0 auto; } @media (min-width: 960px) { .header-action-button-mobile-area-layouttwo { display: none; } } @media (min-width: 960px) { .wpdevart-menu-and-buttons-container-layouttwo { display: flex; align-items: center; } } .wpdevart-search-and-button-container-layouttwo { width: 30%; display: flex; justify-content: flex-end; align-items: center; } @media (max-width: 960px) { .wpdevart-search-and-button-container-layouttwo { width: 100%; } } @media (max-width: 960px) { .header-action-button-area-layouttwo { display: none; } } .header-action-button-area-layouttwo { margin-left: 10px; } /* ------------------------------------------Wpdevart Menu------------------------------------------ */ .nav-container { width: 100%; } @media screen and (min-width:960px) { .nav-container-layout-one { max-width: 65%; } .nav-container-without-action-button { max-width: 90%; } .simple-navbar-wpdevart a { color: #ffffff; } .simple-navbar-wpdevart { padding: 0 10px 0 10px; } .simple-navbar-wpdevart>ul>li { position: relative; margin-left: 10px; } .simple-navbar-wpdevart>ul, .simple-navbar-wpdevart>ul>li { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: baseline; } .navbar-wpdevart { padding: 0 10px 0 10px; } .navbar-wpdevart-float { float:left!important; } .navbar-wpdevart>ul>li { position: relative; margin-left: 10px; } .navbar-wpdevart-layout-two { padding: 0 10px 0 0; } .navbar-wpdevart-layout-two>ul>li:first-of-type { margin-left: 0px; } .navbar-wpdevart>ul, .navbar-wpdevart>ul>li { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: baseline; } .wpdevart-menu-items-color { color: #000000; } .wpdevart-menu-button-icon { background: none; padding: 0px; border: none; cursor: pointer; color: #000000; } .navbar-wpdevart .dropdown-menu, .navbar-wpdevart .sub-menu { position: absolute; top: 100%; min-width: 220px; visibility: hidden; opacity: 0; background: #ffffff; border: 1px solid rgba(0,0,0,.085); border-top-width: 2px; border-top-style: solid; padding: 10px 0; line-height: 1.5; text-align: left; transform: translateY(10px); transition: all .25s; z-index: 998; border-radius: 0 0 3px 3px; box-shadow: 0 10px 35px -3px rgba(0,0,0,.12); pointer-events: none; font-size: 1em; border-top: 2px solid #3A519C; } .wpdevart-sub-menu-link-color { color: #000000; } .wpdevart-sub-menu-button-icon { background: none; padding: 0px 5px; border: none; color: #000000; cursor: pointer; } .navbar-wpdevart .menu-item-has-children:hover>.dropdown-menu, .navbar-wpdevart .menu-item-has-children:hover>.sub-menu, .navbar-wpdevart .menu-item-has-children:focus-within>.dropdown-menu, .navbar-wpdevart .menu-item-has-children:focus-within>.sub-menu { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 999; } .navbar-wpdevart li:hover .dropdown-menu, .navbar-wpdevart li:hover .sub-menu { transition: all .2s; } .navbar-wpdevart .dropdown-menu li, .navbar-wpdevart .sub-menu li { position: relative; padding-left: 5px; padding-right: 5px; } .navbar-wpdevart .dropdown-menu li, .navbar-wpdevart .sub-menu li, .navbar-wpdevart>ul { padding: 0; margin: 0; list-style: none; } .navbar-wpdevart .dropdown-menu li, .navbar-wpdevart .sub-menu li, .navbar-wpdevart>ul { display: flex; line-height: 1.75; align-items: baseline; } .navbar-wpdevart .dropdown-menu .dropdown-menu, .navbar-wpdevart .dropdown-menu .sub-menu { border-radius: 3px; right: 100%; top: -12px; } .navbar-wpdevart .depth_2, .navbar-wpdevart .depth_4, .navbar-wpdevart .depth_6, .navbar-wpdevart .depth_8 { border-radius: 3px; left: 100%; top: -12px; } .navbar-wpdevart .dropdown-menu li { padding:3px 0px; } .navbar-wpdevart li.active a { opacity:0.8; } .navbar-wpdevart ul li a { padding: 0 5px; text-decoration: none !important; background: none; font-weight: 600; max-width: 400px; word-break: break-word; text-transform: uppercase; } .navbar-wpdevart li a:hover, .navbar-wpdevart li a:focus, .navbar-wpdevart li a:visited { opacity:0.7; } .navbar-wpdevart li a::after { content: ''; display:block; width: 100%; transform: scaleX(0); border-radius: 5px; height: 1px; bottom: 0; left: 0; background: currentcolor; transform-origin: bottom center; transition: transform 0.25s ease-out; } .navbar-wpdevart li a:hover::after, .navbar-wpdevart li a:focus::after { transform: scaleX(1); transform-origin: bottom center; } } @media (min-width: 1200px) { .navbar-wpdevart ul li a { font-size: 16px; } } @media (min-width: 960px) and (max-width: 1200px) { .navbar-wpdevart ul li a { font-size: 14px; } } @media (min-width: 960px) and (max-width: 1300px) { .navbar-wpdevart ul li a { display: inline-block; max-width: 200px; } } @media (min-width: 960px) and (max-width: 1300px) { .navbar-wpdevart .dropdown-menu, .navbar-wpdevart .sub-menu { min-width: 170px; } } /* ------------------------------------------Wpdevart Mobile Menu------------------------------------------ */ .wpdevart-mobile-icon-button { background: none; border: none; cursor: pointer; } @media (min-width: 960px) { .wpdevart-mobile-icon-button { display: none; } } @media screen and (max-width:960px) { #wpdevartmobilemenu, #wpdevartmobilemenu ul, #wpdevartmobilemenu ul li, #wpdevartmobilemenu ul li a,#wpdevartmobilemenu #head-mobile { border:0; list-style:none; line-height:1; display:block; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #wpdevartmobilemenu #head-mobile { padding:23px; font-size:17px; font-weight:700; } .head-mobile-toolbar { background: #fff; } .head-mobile-toolbar-gradient { background: linear-gradient(to right, #fff, #fff); } .wpdevart-hide-on-mobile { display: none; } #wpdevartmobilemenu { width:100%; background:#ffffff; word-break: break-word; } #wpdevartmobilemenu ul ul li a { color:#000000; padding:11px 15px 11px 15px; font-size: 14px; text-decoration:none; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; } #wpdevartmobilemenu > ul > li > a { padding:17px; letter-spacing:1px; text-decoration:none; color:#000000; font-size: 14px; font-weight: 600; text-transform: uppercase; } #wpdevartmobilemenu ul { width:100%; display:none; margin:0; padding:0; text-decoration:none; } #wpdevartmobilemenu ul li { text-align: left; width:100%; border-top: 1px solid #dddddd; } #wpdevartmobilemenu ul li:last-of-type { border-bottom: 1px solid #dddddd; } #wpdevartmobilemenu ul li ul { border-top: 1px solid #dddddd; } #wpdevartmobilemenu ul li a,#wpdevartmobilemenu ul ul li a { width:100%; margin: 2px 0; } #wpdevartmobilemenu ul ul ul li a { padding-left:30px; } #wpdevartmobilemenu ul ul ul ul li a { padding-left:35px; } #wpdevartmobilemenu ul ul ul ul ul li a { padding-left:40px; } #wpdevartmobilemenu ul ul ul ul ul ul li a { padding-left:45px; } #wpdevartmobilemenu ul ul ul ul ul ul ul li a { padding-left:50px; } #wpdevartmobilemenu ul ul ul ul ul ul ul ul li a { padding-left:55px; } #wpdevartmobilemenu ul ul ul ul ul ul ul ul ul li a { padding-left:65px; } #wpdevartmobilemenu ul ul ul ul ul ul ul ul ul ul li a { padding-left:75px; } #wpdevartmobilemenu ul ul ul ul ul ul ul ul ul ul ul li a { padding-left:85px; } #wpdevartmobilemenu ul ul, #wpdevartmobilemenu ul ul ul { position:relative; left:0; width:100%; margin:0; text-align:left; } .wpdevartmobilemenubutton { width:55px; height:46px; position:absolute; right:0; top:0; cursor:pointer; z-index: 123; } .wpdevartmobilemenubutton:after { position:absolute; top:22px; right:20px; display:block; height:4px; width:20px; border-top:2px solid #000000; border-bottom:2px solid #000000; content:''; } .wpdevartmobilemenubutton:before { -webkit-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease; position:absolute; top:16px; right:20px; display:block; height:2px; width:20px; background:#000000; content:''; } .wpdevartmobilemenubutton.menu-opened:after { -webkit-transition:all .3s ease; -ms-transition:all .3s ease; transition:all .3s ease; top:23px; border:0!important; height:2px; width:19px; background:#000000; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .wpdevartmobilemenubutton.menu-opened:before { top:23px; background:#000000; width:19px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } #wpdevartmobilemenu .wpdevart-submenu-button { position:absolute; z-index:99; right:0; top:0; display:block; height:52px; width:46px; cursor:pointer; background: #000000; } #wpdevartmobilemenu .wpdevart-submenu-button.submenu-opened { background:#000000; } #wpdevartmobilemenu ul ul .wpdevart-submenu-button { height:42px; width:34px; } #wpdevartmobilemenu .wpdevart-submenu-button:after { #FFFFFF position:absolute; top:27px; right:19px; width:8px; height:2px; display:block; background:#ffffff; content:''; } #wpdevartmobilemenu ul ul .wpdevart-submenu-button:after { top:19px; right:13px; } #wpdevartmobilemenu .wpdevart-submenu-button.submenu-opened:after { background:#ffffff; } #wpdevartmobilemenu .wpdevart-submenu-button.submenu-opened:before { display:none } #wpdevartmobilemenu .wpdevart-submenu-button:before { position:absolute; top:24px; right:22px; display:block; width:2px; height:8px; background:#ffffff; content:''; } #wpdevartmobilemenu ul ul .wpdevart-submenu-button:before { top:16px; right:16px; } } /* ------------------------------------------Search button------------------------------------------ */ .wpdevart-search-button-icon-mobile { float: left; margin-top: 9px; margin-left: 9px; position: absolute; z-index: 100; } .wpdevart-search-button-icon { text-align: center; width: 40px; } @media (min-width: 960px) and (max-width: 1200px) { .wpdevart-search-button-icon { width: 30px; } } .search-menu-buttons { background: none; border: none; } @media (min-width: 960px) { .site-header__search-trigger { display: none; color: #3A519C; } } .site-header-font-cursor { font-size: 23px!important; cursor:pointer!important; } .search-trigger { display: none; position: relative; cursor: pointer; margin-left: 20px; float: right; font-size: 26px; color: #3A519C; transition: 0.5s all; } @media (min-width: 960px) and (max-width: 1200px) { .search-trigger { font-size: 20px; } } @media (min-width: 960px) { .search-trigger { display: inline-block; } } .search-trigger:hover { opacity: 0.65; } .search-trigger-layout-two { display: none; position: relative; cursor: pointer; font-size: 26px; color: #3A519C; transition: 0.5s all; } @media (min-width: 960px) and (max-width: 1200px) { .search-trigger-layout-two { font-size: 20px; } } @media (min-width: 960px) { .search-trigger-layout-two { display: inline-block; } } .search-trigger-layout-two:hover { opacity: 0.65; } /* ------------------------------------------Page Banner------------------------------------------ */ .page-banner { padding: 12px 0 12px 0; position: relative; } @media (min-width: 530px) { .page-banner { padding: 20px 0 20px 0; } } .wpdevart-page-banner__bg, .wpdevart-page-banner__bg-gradient, .wpdevart-post-banner__bg, .wpdevart-post-banner__bg-gradient, .wpdevart-archive-banner__bg, .wpdevart-archive-banner__bg-gradient, .wpdevart-search-banner__bg, .wpdevart-search-banner__bg-gradient { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .wpdevart-page-banner__bg { background: #fcfeff; } .wpdevart-page-banner__bg-gradient { background: linear-gradient(to right, #fcfeff, #fcfeff); } .wpdevart-post-banner__bg { background: #fcfeff; } .wpdevart-post-banner__bg-gradient { background: linear-gradient(to right, #fcfeff, #fcfeff); } .wpdevart-archive-banner__bg { background: #fcfeff; } .wpdevart-archive-banner__bg-gradient { background: linear-gradient(to right, #fcfeff, #fcfeff); } .wpdevart-search-banner__bg { background: #fcfeff; } .wpdevart-search-banner__bg-gradient { background: linear-gradient(to right, #fcfeff, #fcfeff); } .page-banner__title, .post-banner__title, .archive-banner__title, .search-banner__title { font-size: 25px; margin: 0; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } @media (min-width: 960px) { .page-banner__title, .post-banner__title, .archive-banner__title, #FFFFFF .search-banner__title { font-size: 40px; } } @media (min-width: 560px) and (max-width: 960px) { .page-banner__title, .post-banner__title, .archive-banner__title, .search-banner__title { font-size: 35px; } } .post-banner__title { color: #000000; } .post-banner-content { text-align: left; } .page-banner__title { color: #000000; } .page-banner-content { text-align: left; } .archive-banner__title { color: #000000; text-align: left; } .search-banner__title { color: #000000; text-align: left; } .wpdevart-banner-entry-text { color: #333333; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: 13px; } .wpdevart-banner-entry-date { font-style: italic; } .wpdevart-banner-entry-meta a { text-decoration: none; font-size: 13px; transition: 0.5s all; font-weight: 600; } .wpdevart-banner-entry-meta a { text-decoration: none!important; transition: 0.5s all!important; background-position: 50% 100%!important; } .wpdevart-banner-entry-meta a { color: #3A519C; background: linear-gradient(90deg, #333333, #333333); background-size: 0 2px!important; background-repeat: no-repeat!important; background-position: 50% 100%!important; } .wpdevart-banner-entry-meta a:hover { color: #333333; background-size: 100% 2px!important; } .wpdevart-banner-page-entry-text { color: #333333; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: 13px; } .wpdevart-banner-page-entry-meta a { text-decoration: none; font-size: 13px; transition: 0.5s all; font-weight: 600; } .wpdevart-banner-page-entry-meta a { text-decoration: none!important; transition: 0.5s all!important; background-position: 50% 100%!important; } .wpdevart-banner-page-entry-meta a { color: #3A519C; background: linear-gradient(90deg, #333333, #333333); background-size: 0 2px!important; background-repeat: no-repeat!important; background-position: 50% 100%!important; } .wpdevart-banner-page-entry-meta a:hover { color: #333333; background-size: 100% 2px!important; } /* ------------------------------------------Breadcrumbs------------------------------------------ */ .wpdevart-breadcrumbs-single-post, .wpdevart-breadcrumbs-single-page { margin-bottom: 0; padding: 0; list-style: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .wpdevart-breadcrumbs-single-post li + li, .wpdevart-breadcrumbs-single-page li + li { margin-left: 3px; } .wpdevart-breadcrumbs-single-post li, .wpdevart-breadcrumbs-single-page li { display: inline-block; font-size: 12px; } .wpdevart-breadcrumbs-single-post li:after { content: ''; display: inline-block; margin-left: 3px; } .wpdevart-breadcrumbs-single-post li:first-child:after { content: '/'; display: inline-block; margin-left: 3px; } .wpdevart-breadcrumbs-single-page li:after { content: '/'; display: inline-block; margin-left: 3px; } .wpdevart-breadcrumbs-single-post li + li:last-child { margin-left: 0px; } .wpdevart-breadcrumbs-single-post li:last-child:after, .wpdevart-breadcrumbs-single-page li:last-child:after { content: ''; } .wpdevart-breadcrumbs-single-post li a, .wpdevart-breadcrumbs-single-page li a { position: relative; text-decoration: none!important; transition: 0.5s all!important; background-size: 0 2px!important; background-repeat: no-repeat!important; background-position: 50% 100%!important; } .wpdevart-breadcrumbs-single-post li a:hover, .wpdevart-breadcrumbs-single-page li a:hover { background-size: 100% 2px!important; } .wpdevart-breadcrumbs-single-post li, .wpdevart-breadcrumbs-single-post li:after { color: #333333; } .wpdevart-breadcrumbs-single-post li a { color: #3A519C; background: linear-gradient(90deg, #333333, #333333); } .wpdevart-breadcrumbs-single-post li a:hover { color: #333333; } .wpdevart-breadcrumbs-single-page li, .wpdevart-breadcrumbs-single-page li:after { color: #333333; } .wpdevart-breadcrumbs-single-page li a { color: #3A519C; background: linear-gradient(90deg, #333333, #333333); } .wpdevart-breadcrumbs-single-page li a:hover { color: #333333; } /* ------------------------------------------WpDevArt Animations------------------------------------------ */ .wpdevart-element-animation-from-left { animation:wpdevart-fade-in-left; animation-duration:1.5s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:.1s; opacity:0; } @keyframes wpdevart-fade-in-left { from { transform: translateX(-20px); opacity:0; } to { transform: translateX(0); opacity:1.0; } } @-webkit-keyframes wpdevart-fade-in-left { from { -webkit-transform: translateX(-20px); opacity:0; } to { -webkit-transform: translateX(0); opacity:1.0; } } .wpdevart-element-animation-from-right { animation:wpdevart-fade-in-right; animation-duration:1.5s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:.1s; opacity:0; } @keyframes wpdevart-fade-in-right { from { transform: translateX(20px); opacity:0; } to { transform: translateX(0); opacity:1.0; } } @-webkit-keyframes wpdevart-fade-in-right { from { -webkit-transform: translateX(20px); opacity:0; } to { -webkit-transform: translateX(0); opacity:1.0; } } .wpdevart-element-animation-to-up { animation:wpdevart-fade-in-up; animation-duration:1.5s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:.1s; opacity:0; } @keyframes wpdevart-fade-in-up { from { transform: translateY(20px); opacity:0; } to { transform: translateY(0); opacity:1.0; } } @-webkit-keyframes wpdevart-fade-in-up { from { -webkit-transform: translateY(20px); opacity:0; } to { -webkit-transform: translateY(0); opacity:1.0; } } .wpdevart-element-animation-to-down { animation:wpdevart-fade-in-down; animation-duration:1.5s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:.1s; opacity:0; } @keyframes wpdevart-fade-in-down { from { transform: translateY(-20px); opacity:0; } to { transform: translateY(0); opacity:1.0; } } @-webkit-keyframes wpdevart-fade-in-down { from { -webkit-transform: translateY(-20px); opacity:0; } to { -webkit-transform: translateY(0); opacity:1.0; } } .wpdevart-element-animation-scale { animation:wpdevart-scale-within; animation-duration:1.5s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:.1s; opacity:0; } @keyframes wpdevart-scale-within { from { scale:0.5; opacity:0; } to { scale:1.0; opacity:1.0; } } @-webkit-keyframes wpdevart-scale-within { from { scale:0.5; opacity:0; } to { scale:1.0; opacity:1.0; } } .wpdevart-element-animation-opacity { animation:wpdevart-opacity-within; animation-duration:3s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:.1s; opacity:0; } @keyframes wpdevart-opacity-within { from { opacity:0; } to { opacity:1.0; } } @-webkit-keyframes wpdevart-opacity-within { from { opacity:0; } to { opacity:1.0; } } .wpdevart-element-animation-wobble { animation: wpdevart-wobble 1s infinite ease-in-out alternate; animation-duration:3s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:.1s; } @keyframes wpdevart-wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-5%) rotate(-5deg); } 30% { transform: translateX(4%) rotate(3deg); } 45% { transform: translateX(-3%) rotate(-3deg); } 60% { transform: translateX(2%) rotate(2deg); } 75% { transform: translateX(-1%) rotate(-1deg); } 100% { transform: translateX(0%); } } @-webkit-keyframes wpdevart-wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-5%) rotate(-5deg); } 30% { -webkit-transform: translateX(4%) rotate(3deg); } 45% { -webkit-transform: translateX(-3%) rotate(-3deg); } 60% { -webkit-transform: translateX(2%) rotate(2deg); } 75% { -webkit-transform: translateX(-1%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } .wpdevart-element-animation-expand-up { animation: wpdevart-expand-up 1s infinite ease-in-out alternate; animation-duration:3s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:.1s; } @keyframes wpdevart-expand-up { 0% { transform: translateY(100%) scaleX(0.8); } 30% { transform: translateY(-8%) scaleX(0.8); } 40% { transform: translateY(2%) scaleX(0.8); } 50% { transform: translateY(0%) scaleX(1.1); } 60% { transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80% { transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100% { transform: translateY(0%) scaleX(1); } } @-webkit-keyframes wpdevart-expand-up { 0% { -webkit-transform: translateY(100%) scaleX(0.8); } 30% { -webkit-transform: translateY(-8%) scaleX(0.8); } 40% { -webkit-transform: translateY(2%) scaleX(0.8); } 50% { -webkit-transform: translateY(0%) scaleX(1.1); } 60% { -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80% { -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100% { -webkit-transform: translateY(0%) scaleX(1); } } .wpdevart-element-animation-fade-in { animation: wpdevart-fadeIn; animation-duration:3s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:.1s; } @keyframes wpdevart-fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes wpdevart-fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } .wpdevart-element-animation-zoom-in-out-rotate { animation: wpdevart-zoom-in-out-rotate 1s ease infinite; animation-duration:3s; animation-iteration-count:1; animation-fill-mode:forwards; animation-delay:.1s; } @keyframes wpdevart-zoom-in-out-rotate { 30% { transform: scale(1.1); } 40%, 60% { transform: rotate(-5deg) scale(1.1); } 50% { transform: rotate(5deg) scale(1.1); } 70% { transform: rotate(0deg) scale(1.1); } 100% { transform: scale(1); } } @-webkit-keyframes wpdevart-zoom-in-out-rotate { 30% { -webkit-transform: scale(1.1); } 40%, 60% { -webkit-transform: rotate(-5deg) scale(1.1); } 50% { -webkit-transform: rotate(5deg) scale(1.1); } 70% { -webkit-transform: rotate(0deg) scale(1.1); } 100% { -webkit-transform: scale(1); } } /* ------------------------------------------Main Container------------------------------------------ */ .wpdevart-main-container { background: #ffffff; } .wpdevart-main-container:not(.wpdevart-post-text-content, .comment-body, .sidebar-widget-area), .wpdevart-main-container p:not(.wpdevart-post-text-content p, .comment-body p, .sidebar-widget-area p), .wpdevart-main-container li:not(.wpdevart-post-text-content li, .comment-body li, .sidebar-widget-area li) { color: #333333; } .wpdevart-main-container:not(.wpdevart-post-text-content, .sidebar-widget-area), .wpdevart-main-container p:not(.wpdevart-post-text-content p, .sidebar-widget-area p), .wpdevart-main-container li:not(.wpdevart-post-text-content li, .sidebar-widget-area li) { font-size: 17px; font-weight: 400; font-style: normal; } .wpdevart-main-container a:not(.shop-by-category-text-pattern a, .post-tags a, .wpdevart-comment-respond a, .comment-author a, .comment-body .comment-meta a, .wp-block-comment-reply-link a, .wpdevart-posts-list-title a, .wpdevart-post-text-content a, .wpdevart-entry-meta a, .wpdevart-entry-meta-category a, .wp-block-file a, .wp-block-cover-text a, .sidebar-widget-area a, .wp-block-button__link, .comment-body a, .comment-reply-link, .page-numbers, .wp-caption, p.wp-caption-text, .page-numbers li a) { color: #000000; text-decoration: underline; transition: 0.5s all; } .wpdevart-main-container a:hover:not(.shop-by-category-text-pattern a, .post-tags a, .wpdevart-comment-respond a, .comment-author a, .comment-body .comment-meta a, .wp-block-comment-reply-link a, .wpdevart-posts-list-title a, .wpdevart-entry-meta a, .wpdevart-entry-meta-category a, .wp-block-file a, .wp-block-cover-text a, .sidebar-widget-area a, .wp-block-button__link, .comment-body a, .comment-reply-link, .page-numbers, .wp-caption, p.wp-caption-text) { color: #ff5952; text-decoration: none; } .wpdevart-main-container a:not(.reply a, .wpdevart-posts-list-title a, .comment-author a, .comment-body .comment-meta a, .wpdevart-entry-meta, .wpdevart-entry-meta a, .wpdevart-entry-meta-category a, .wp-block-file a, .wp-block-cover-text a, .sidebar-widget-area a, .wp-caption-text a, .page-numbers li a) { font-size: 17px; font-weight: 400; font-style: normal; } .wpdevart-main-container h1:not(.sidebar-widget-area h1), .wpdevart-main-container h2:not(.wpdevart-posts-list-title h2, .sidebar-widget-area h2), .wpdevart-main-container h3:not(.sidebar-widget-area h3), .wpdevart-main-container h4:not(.sidebar-widget-area h4), .wpdevart-main-container h5:not(.sidebar-widget-area h5), .wpdevart-main-container h6:not(.sidebar-widget-area h6) { color: #000000; } .wpdevart-main-container h1 { font-size: 40px; font-weight: 400; font-style: normal; text-transform: uppercase; text-decoration: none; } .wpdevart-main-container h2:not(.wpdevart-posts-list-title h2) { font-size: 28px; font-weight: 400; font-style: normal; text-transform: uppercase; text-decoration: none; } .wpdevart-main-container h3 { font-size: 24px; font-weight: 400; font-style: normal; text-transform: uppercase; text-decoration: none; } .wpdevart-main-container h4 { font-size: 23px; font-weight: 400; font-style: normal; text-transform: uppercase; text-decoration: none; } .wpdevart-main-container h5 { font-size: 22px; font-weight: 400; font-style: normal; text-transform: uppercase; text-decoration: none; } .wpdevart-main-container h6 { font-size: 20px; font-weight: 400; font-style: normal; text-transform: uppercase; text-decoration: none; } .container { max-width: 1300px; margin: 0 auto; padding: 16px; position: relative; word-break: break-word; } .container:before, .container:after, .group:before, .group:after { content: " "; display: table; } .container:after, .group:after { clear: both; } .wpdevart-banner-narrow-container { max-width: 960px!important; } .wpdevart-main-content { padding-top: 32px; padding-bottom: 32px; } @media (min-width: 600px) { .wpdevart-main-content { padding-top: 40px; padding-bottom: 10px; } } .wpdevart-main-content-sidebarleft { flex-direction: row-reverse; } /* ------------------------------------------Wpdevart Blog, Archive, Search------------------------------------------ */ @media (min-width: 800px) { .container-with-sidebar { display:flex; justify-content: center; } } .wpdevart-post-summary-content { width: 90%; text-align: center; margin-bottom: 40px; padding: 10px; overflow: hidden; box-shadow: 0 7px 16px rgba(0,0,0,0.1), 0 7px 7px rgba(0,0,0,0.1); background: #ffffff; transition: ease-out 0.3s; } @media (min-width: 600px) and (max-width: 800px) { .wpdevart-post-summary-content { width: 40%; margin: 10px; } } .wpdevart-post-summary-content:hover { box-shadow: 0 0 3px rgba(0, 0, 0, 0.25), 0 0 3px rgba(0, 0, 0, 0.22); } @media (min-width: 1100px) { .wpdevart-post-summary-content { width: 44%; margin: 10px; } } .wpdevart-posts-list-with-pagination-inner { flex-direction: row; flex-wrap: wrap; display: flex; justify-content: center; } /* ------------------------------------------Wpdevart Blog, Archive, Search left sidebar layout------------------------------------------ */ .wpdevart-posts-list-with-pagination { padding-bottom: 1.7rem; margin-bottom: 1.7rem; } @media (min-width: 1100px) { .wpdevart-posts-list-with-pagination { -ms-flex: 0 0 65%; flex: 0 0 65%; max-width: 65%; } } @media (min-width: 800px) and (max-width: 1100px) { .wpdevart-posts-list-with-pagination { -ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; } } /* ------------------------------------------Wpdevart Blog, Archive, Search full width layout------------------------------------------ */ .wpdevart-posts-list-with-pagination-full-width { margin-bottom: 1.7rem; } @media (min-width: 800px) { .wpdevart-posts-list-with-pagination-full-width { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .wpdevart-post-summary-content-full-width { background: #faf8ff; width: 90%; padding: 10px; text-align: center; margin-bottom: 40px; overflow: hidden; box-shadow: 0 7px 16px rgba(0,0,0,0.25), 0 7px 7px rgba(0,0,0,0.22); transition: ease-out 0.3s; } .wpdevart-post-summary-content-full-width:hover { box-shadow: 0 0 3px rgba(0, 0, 0, 0.25), 0 0 3px rgba(0, 0, 0, 0.22); } @media (min-width: 600px) and (max-width: 1100px) { .wpdevart-post-summary-content-full-width { width: 40%; margin: 10px; } } @media (min-width: 1100px) { .wpdevart-post-summary-content-full-width { width: 30%; margin: 10px; max-width: 400px; } } /* ------------------------------------------Wpdevart Blog, Archive, Search elements------------------------------------------ */ .wpdevart-posts-list-title { width: 100%; display: inline-block; text-align: left; word-break: break-word; } .wpdevart-posts-list-title a { #FFFFFF font-size: 22px; text-transform: uppercase; letter-spacing: 2px; } @media (max-width: 1200px) { .wpdevart-posts-list-title a { font-size: 18px!important; } } .post-list-title { padding: 0 5px; } .post-list-title a { border-bottom: 1px solid #dddddd; } .post-list-title a { font-size: 20px; text-decoration: none; color: #000000; line-height: 1.4; transition: 0.5s all; font-weight: 400!important; } .post-list-title a:hover { color: #ff5952; } @media (max-width: 1200px) { .post-list-title a { font-size: 18px; } } .wpdevart-posts-list-title h2 { line-height: 1.1; font-size: 13px; } .wpdevart-entry-meta { color: #717171; margin: 10px; font-weight: 500; word-break: break-word; text-align: left; width: 95%; letter-spacing: .1em; text-transform: uppercase; } .wpdevart-entry-meta a { transition: 0.5s all; text-decoration: none!important; } .wpdevart-entry-meta a:hover { color: #000000; } .wpdevart-entry-meta, .wpdevart-entry-meta a { color: #ff5952; font-size: 12px; } @media (max-width: 1200px) { .wpdevart-entry-meta, .wpdevart-entry-meta a { font-size: 11px!important; } } .wpdevart-entry-meta a:hover { text-decoration: underline; } .wpdevart-entry-meta-category { margin: 0 10px; font-weight: 500; word-break: break-word; text-align: left; width: 95%; line-height: 2; } @media (max-width: 1100px) { .wpdevart-entry-meta-category { margin: 0 10px 8px 10px; } } .wpdevart-entry-meta-category a { background: #333333; font-size: 13px; padding: 0px 5px; margin: 2px 0; color: #ffffff; transition: 0.5s all; text-decoration: none!important; display: inline-block; text-transform: uppercase; letter-spacing: 1px; } .wpdevart-entry-meta-category a:hover { background: #fff; color: #000000; } .wpdevart-icon-padding { padding-right: 4px; color: #000000; } .wpdevart-post-text-content { text-align: left; padding: 0 10px 5px 10px; word-break: break-word; } .wpdevart-post-text-content, .wpdevart-post-text-content p, .wpdevart-post-text-content a, .wpdevart-post-text-content li { color: #333333; font-size: 15px; } @media (max-width: 1200px) { .wpdevart-post-text-content, .wpdevart-post-text-content p, .wpdevart-post-text-content a, .wpdevart-post-text-content li { font-size: 14px!important; } } /* ------------------------------------------Generic Content------------------------------------------ */ .generic-content { margin-bottom: 1.7rem; word-break: break-word; } @media (min-width: 1100px) { .generic-content { -ms-flex: 0 0 67%; flex: 0 0 67%; max-width: 67%; padding: 0 8px; margin: 0 8px; } } @media (min-width: 800px) and (max-width: 1100px) { .generic-content { -ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; } } @media (min-width: 800px){ .generic-content-full-width { -ms-flex: 0 0 100%!important; flex: 0 0 100%!important; max-width: 100%!important; } } @media (max-width: 800px) { .generic-content { padding: 0 15px 0 15px; } } .generic-content blockquote, .generic-content blockquote p { font-size: 19px; font-style: italic; } .generic-content h1, .generic-content h2, .generic-content h3, .generic-content h4, .generic-content h5, .generic-content h6 { margin: 1rem 0; line-height: 1.1; } /* ------------------------------------------WpDevArt Image Styles------------------------------------------ */ .figureblogimage { width: 100%; aspect-ratio: 16/11; margin: 0; padding: 0; overflow: hidden; border-radius: 7px; } .figureblogimage img { width: 100%; aspect-ratio: 16/11; margin: 0; padding: 0; overflow: hidden; border-radius: 7px; height: 100%; object-fit: cover; } .wpdevart-images-hover-effect .figureblogimage img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .wpdevart-images-hover-effect .figureblogimage:hover img { -webkit-transform: scale(1.3); transform: scale(1.3); } .figureblogimage-second-effect { width: 100%; aspect-ratio: 16/11; margin: 0; padding: 0; overflow: hidden; border-radius: 7px; background: #ffcbc5; } .figureblogimage-second-effect img { width: 100%; aspect-ratio: 16/11; margin: 0; padding: 0; background: #fff; overflow: hidden; border-radius: 7px; height: 100%; object-fit: cover; } .wpdevart-images-hover-effect .figureblogimage-second-effect img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .wpdevart-images-hover-effect .figureblogimage-second-effect:hover img { opacity: .8; } .figureblogimage-third-effect { width: 100%; aspect-ratio: 16/11; margin: 0; padding: 0; overflow: hidden; border-radius: 7px; } .figureblogimage-third-effect img { width: 100%; aspect-ratio: 16/11; margin: 0; padding: 0; background: #fff; overflow: hidden; border-radius: 7px; height: 100%; object-fit: cover; } .wpdevart-images-hover-effect .figureblogimage-third-effect img { -webkit-filter: grayscale(0) blur(0); filter: grayscale(0) blur(0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .wpdevart-images-hover-effect .figureblogimage-third-effect:hover img { -webkit-filter: grayscale(50%) blur(1px); filter: grayscale(50%) blur(1px); } .figureblogimage-fourth-effect { width: 100%; aspect-ratio: 16/11; margin: 0; padding: 0; overflow: hidden; border-radius: 7px; position: relative; } .figureblogimage-fourth-effect img { width: 100%; aspect-ratio: 16/11; margin: 0; padding: 0; background: #fff; overflow: hidden; border-radius: 7px; height: 100%; object-fit: cover; } .figureblogimage-fourth-effect::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } .wpdevart-images-hover-effect .figureblogimage-fourth-effect:hover::before { -webkit-animation: wpdevartimageshine .75s; animation: wpdevartimageshine .75s; } @-webkit-keyframes wpdevartimageshine { 100% { left: 125%; } } @keyframes wpdevartimageshine { 100% { left: 125%; } } .figureblogimage-fifth-effect { width: 100%; aspect-ratio: 16/11; margin: 0; padding: 0; overflow: hidden; border-radius: 7px; position: relative; } .figureblogimage-fifth-effect img { width: 100%; aspect-ratio: 16/11; margin: 0; padding: 0; background: #fff; overflow: hidden; border-radius: 7px; height: 100%; object-fit: cover; } .figureblogimage-fifth-effect::before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(255, 255, 255, 0.2); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0.5; } .wpdevart-images-hover-effect .figureblogimage-fifth-effect:hover::before { -webkit-animation: wpdevartimagesquare .75s; animation: wpdevartimagesquare .75s; } @-webkit-keyframes wpdevartimagesquare { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 150%; height: 150%; opacity: 0; } } @keyframes wpdevartimagesquare { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 150%; height: 150%; opacity: 0; } } .wpdevart-wp-link-pages { width: 100%; display: flex; overflow: overlay; margin-top: 30px; } /* ------------------------------------------WpDevArt Post Tag Styles------------------------------------------ */ .post-tags { width: 100%; margin-top: 30px; font-size: 17px; word-break: break-word; } .post-tags a { display: inline-block; vertical-align: middle; position: relative; font-weight: 500!important; color: #000000; border: 1px solid #000000; text-decoration: none!important; font-size: 13px!important; margin: 0 5px 10px 0; padding: 5px 10px; text-transform: uppercase; transition: 0.5s all; } .post-tags a:hover { color: #ff5952; border: 1px solid #ff5952; } /* ------------------------------------------Wpdevart Pagination------------------------------------------ */ .wpdevart-pagination { display: flex; } .wpdevart-pagination-container { margin: 0 auto; padding: 16px; text-align: center; word-break: break-word; } .page-numbers { color: #a8a8a8; font-size: 18px; } .page-numbers:hover { color: #a8a8a8; } ul.page-numbers { padding: 0px; } .page-numbers li a { color: #ffffff; text-decoration: none; padding: 14px 20px 14px 20px; background: none; font-size: 18px; } .page-numbers li a:hover { color: #000000; } .page-numbers li { display: inline-block; min-height: 50px; min-width: 50px; font-size: 20px; background: #333333; margin: 10px 2px 0 2px; transition: all .3s ease-in-out; line-height: 50px; } .page-numbers li:hover { background: #fff; } /* ------------------------------------------Wpdevart Comments------------------------------------------ */ .wpdevart-comment-respond { border-top: 1px dotted #c2c1c5; margin-top: 15px; padding-top: 15px; word-break: break-word; } .wpdevart-comment-respond, .wpdevart-comment-respond p, .wpdevart-comment-respond li { color: #333333; } .wpdevart-comment-respond, .wpdevart-comment-respond p, .wpdevart-comment-respond li { font-size: 17px; } .wpdevart-comment-respond a:not(.reply a) { color: #000000; font-size: 17px; transition: 0.5s all; } .wpdevart-comment-respond a:hover:not(.reply a) { color: #ff5952; } .comment-form-comment { display: flex; flex-direction: column; } .comment-form-comment { max-width: 600px; line-height: normal; } .comment-form-author, .comment-form-email, .comment-form-url { max-width: 250px; line-height: normal; } .comment-notes, .comment-form-cookies-consent { line-height: normal; } .wpdevart-comment-navigation-title { color: #4b5593; text-align: center; } .wpdevart-comment-navigation-links { display: flex; align-items: center; padding: 20px 0; } .wpdevart-comment-navigation-links .nav-previous{ flex: 45%; overflow: hidden; text-align: left; } .wpdevart-comment-navigation-links .nav-next { flex: 45%; overflow: hidden; text-align: right; } /* ------------------------------------------Sidebar and Widget------------------------------------------ */ .wpdevart-sidebar-container { padding-bottom: 1.7rem; margin-bottom: 1.7rem; } @media (min-width: 1400px) { .wpdevart-sidebar-container { width: 430px; #3A519C margin-top: 10px; } } @media (min-width: 1100px) and (max-width:1400px) { .wpdevart-sidebar-container { -ms-flex: 0 0 33%; #3A519C flex: 0 0 33%; max-width: 33%; margin-top: 10px; } } @media (min-width: 800px) and (max-width: 1100px) { .wpdevart-sidebar-container { -ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; } } @media (max-width: 800px) { .wpdevart-sidebar-container { max-width: 600px; margin: 0 auto; } } .wpdevart-sidebar-container-inside { padding: 0 8px; margin: 0 8px; word-break: break-word; } @media (max-width: 800px) { .wpdevart-sidebar-container-inside { padding: 0 10px; margin: 0 5px; } } .wpdevart-sidebar-container-inside { background: #ffffff; padding#3A519C28px; box-shadow: 0 0 2px 0 #c9c9c9, 0 5px 20px 0 #c9c9c9; } .wpdevart-sidebar-container-inside .widget { padding: 5px 0; } .sidebar-widget-area { padding: 10px 0; #3A519C } #3A519C .sidebar-widget-area, .sidebar-widget-area p, .sidebar-widget-area li { #3A519C color: #333333; font-size: 16px; } #3A519C .sidebar-widget-area a { font-size: 16px; text-decoration: none; transition: 0.5s all; } .sidebar-widget-area h1, .sidebar-widget-area h2, .sidebar-widget-area h3, .sidebar-widget-area h4, .sidebar-widget-area h5, .sidebar-widget-area h6 { #3A519C color: #000000; margin: 5px 0 0 0; #3A519C font-weight: 600; font-style: normal; text-transform: none; text-decoration: none; } .sidebar-widget-area-default-title { padding: 0 0 10px 0; } .sidebar-widget-area h1, .sidebar-widget-area h2, .sidebar-widget-area h3 { font-size: 26px; } .sidebar-widget-area h4, .sidebar-widget-area h5, .sidebar-widget-area h6 { font-size: 20px; } .sidebar-widget-area a:not(.wp-block-button__link, .wp-block-comment-reply-link a ) { color: #000000; } .sidebar-widget-area a:hover:not(.wp-block-button__link, .wp-block-comment-reply-link a ) { color: #ff5952; } .sidebar-widget-area p a:not(.wp-block-button__link, .wp-block-comment-reply-link a, .button ) { color: #000000; text-decoration: underline; } .sidebar-widget-area p a:hover:not(.wp-block-button__link, .wp-block-comment-reply-link a ) { color: #ff5952; #3A519C text-decoration: none; } .sidebar-widget-area .tag-cloud-link { display: inline-block; vertical-align: middle; position: relative; font-weight: 500; color: #000000; border: 1px solid #000000; text-decoration: none!important; font-size: 13px!important; margin: 0 5px 10px 0; padding: 5px 10px; text-transform: uppercase; } .sidebar-widget-area .tag-cloud-link:hover { color: #ff5952; border: 1px solid #ff5952; } /* ------------------------------------------Wpdevart buttons------------------------------------------ */ .wpdevart_ecommerce_modern_store_hover_button { color: #fff; padding: 21px 58px; display: inline-block; border-radius: 2px; font-size: 14px; text-transform: uppercase; font-weight: 500; cursor: pointer; -webkit-transition: ease-out 0.5s; -moz-transition: ease-out 0.5s; transition: ease-out 0.5s; letter-spacing: 1px; } .wpdevart_ecommerce_modern_store_hover_button a { color: #fff; text-decoration: none; } .wpdevart_ecommerce_modern_store_hover_button_small { color: #fff; padding: 10px 20px; display: inline-block; border-radius: 2px; font-size: 14px; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; cursor: pointer; -webkit-transition: ease-out 0.7s; -moz-transition: ease-out 0.7s; transition: ease-out 0.7s; } .wpdevart_ecommerce_modern_store_hover_button_small a { color: #fff; text-decoration: none; } .wpdevart_ecommerce_modern_store_first_button_slide { box-shadow: inset 0 0 0 0 #8224e3; background-color: #8224e3; border: 2px solid #8224e3; } .first_btn_slide_right:hover { box-shadow: inset 400px 0 0 0 #fff; color: #8224e3; border: 2px solid #8224e3; } .first_btn_slide_right:hover a { color: #8224e3; } .wpdevart_ecommerce_modern_store_second_button_slide { box-shadow: inset 0 0 0 0 #ff5952; background-color: #ff5952; border: 2px solid #ff5952; } .second_btn_slide_right:hover { box-shadow: inset 400px 0 0 0 #fff; color: #ff5952; border: 2px solid #ff5952; } .second_btn_slide_right:hover a { color: #ff5952; } .wpdevart_ecommerce_modern_store_third_button_slide { box-shadow: inset 0 0 0 0 #7a5bfb; background-color: #7a5bfb; border: 2px solid #7a5bfb; } .third_btn_slide_right:hover { box-shadow: inset 400px 0 0 0 #fff; color: #7a5bfb; border: 2px solid #7a5bfb; } .third_btn_slide_right:hover a { color: #7a5bfb; } .wpdevart_ecommerce_modern_store_fourth_button_slide { box-shadow: inset 0 0 0 0 #000000; background-color: #000000; border: 2px solid #000000; } .fourth_btn_slide_right:hover { box-shadow: inset 400px 0 0 0 #fff; color: #000000; border: 2px solid #000000; } .fourth_btn_slide_right:hover a { color: #000000; } .wpdevart_ecommerce_modern_store_fifth_button_slide { box-shadow: inset 0 0 0 0 #2fb32d; background-color: #2fb32d; border: 2px solid #2fb32d; } .fifth_btn_slide_right:hover { box-shadow: inset 400px 0 0 0 #fff; color: #2fb32d; border: 2px solid #2fb32d; } .fifth_btn_slide_right:hover a { color: #2fb32d; } .wpdevart_ecommerce_modern_store_sixth_button_slide { box-shadow: inset 0 0 0 0 #ffba01; background-color: #ffba01; border: 2px solid #ffba01; } .sixth_btn_slide_right:hover { box-shadow: inset 400px 0 0 0 #fff; color: #ffba01; border: 2px solid #ffba01; } .sixth_btn_slide_right:hover a { color: #ffba01; } .wpdevart_ecommerce_modern_store_seventh_button_slide { box-shadow: inset 0 0 0 0 #000000; background-color: #000000; border: 2px solid #000000; } .seventh_btn_slide_right:hover { box-shadow: inset 400px 0 0 0 #fff; color: #000000; border: 2px solid #000000; } .seventh_btn_slide_right:hover a { color: #000000; } .wpdevart_ecommerce_modern_store_eighth_button_slide a { color: #000000; } .wpdevart_ecommerce_modern_store_eighth_button_slide { box-shadow: inset 0 0 0 0 #fff; background-color: #fff; border: 2px solid #000000; color: #000000; } .eighth_btn_slide_right:hover { box-shadow: inset 400px 0 0 0 #000000; color: #fff; border: 2px solid #000000; } .eighth_btn_slide_right:hover a { color: #fff; } .wpdevart_ecommerce_modern_store_ninth_button_slide a { color: #3A519C; } .wpdevart_ecommerce_modern_store_ninth_button_slide { box-shadow: inset 0 0 0 0 #ffffff; background-color: #ffffff; border: 2px solid #3A519C; color: #3A519C; } .ninth_btn_slide_right:hover { box-shadow: inset 400px 0 0 0 #3A519C; color: #ffffff; border: 2px solid #3A519C; } .ninth_btn_slide_right:hover a { color: #ffffff; } .wpdevart_ecommerce_modern_store_tenth_button_slide a { color: #000000; } .wpdevart_ecommerce_modern_store_tenth_button_slide { box-shadow: inset 0 0 0 0 #ceecff; background-color: #ceecff; border: 2px solid #ceecff; } .tenth_btn_slide_right:hover { box-shadow: inset 400px 0 0 0 #000000; color: #ffffff; border: 2px solid #000000; } .tenth_btn_slide_right:hover a { color: #ffffff; } /* ------------------------------------------Wpdevart Custom HomePage------------------------------------------ */ .wpdevart-homepage-container { max-width: 1300px; margin: 0 auto; padding: 16px; position: relative; word-break: break-word; } .wpdevart-homepage-page-banner { padding: 0 0 20px 0; position: relative; } @media (min-width: 530px) { .wpdevart-homepage-page-banner { padding: 0 0 30px 0; } } .wpdevart-homepage-bg-color { background: #ffffff; } .wpdevart-homepage-bg-gradient-color { background: linear-gradient(to right, #ffffff, #ffffff); } @media (min-width: 1200px) { .wpdevart-home-banner { display: flex; align-items: center; justify-content: space-between; } } @media (max-width: 1200px) { .wpdevart-home-banner { text-align: center; } } .wpdevart-home-banner-one { padding: 1.6rem 16px; word-break: break-word; } .wpdevart-home-banner-two { padding: 1.6rem 16px; display: flex; justify-content: center; } @media (min-width: 1200px) { .wpdevart-home-banner-one { padding: 20px 0; } .wpdevart-home-banner-two { padding: 20px 0; } } @media (min-width: 1200px) and (max-width: 1400px) { .wpdevart-home-banner-inner { width: 520px; } } @media (min-width: 1400px) { .wpdevart-home-banner-inner { width: 610px; } } .wpdevart-home-banner, .wpdevart-home-banner-inner, .wpdevart-home-banner-one, .wpdevart-home-banner-two { word-break: break-word; } .wpdevart-banner-short-text { font-style: italic; font-weight: bold; color: #333333; font-size: 17px; } .wpdevart-banner-title { font-size: 43px; color: #000000; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; } @media (max-width: 600px) { .wpdevart-banner-title { font-size: 33px!important; } } .wpdevart-banner-content { color: #717171; font-size: 17px; } #outer { margin: 20px 0; } .wpdevart-banner-button-one { position: relative; margin-top: 20px; max-width: 350px; } .wpdevart-banner-button-two { position: relative; margin-left: 10px; margin-top: 20px; max-width: 350px; } @media (min-width: 1200px) and (max-width: 1400px) { .wpdevart-home-banner { display: flex; align-items: center; justify-content: center; } .wpdevart-home-banner-two { padding: 40px 0px 40px 40px; } .wpdevart-home-banner-two { margin: 0; } } /* ------------------------------------------Wpdevart homepage sliding text------------------------------------------ */ .sliding-text-container { position: relative; } .sliding-text { height: 50px; overflow: hidden; display: inline-block; position: relative; width:90%; } .sliding-text ul { list-style:none; position: absolute; top:0; transition: all 0.5s ease; width: 100%; padding: 0; margin: 0 0 1.65em 0; } .sliding-text li { text-align: center; font-weight: 600; line-height: 1.3; font-size: 37px; color:#3A519C; } @media (max-width: 600px) { .sliding-text li { line-height: 1.8; font-size: 28px; } } @media (min-width: 1200px) { .sliding-text li { text-align: left; } } .sliding-text li { display: none; } .sliding-text li.text-in { display: block; animation: slidingTextIn .8s ease; } .sliding-text li.text-out{ animation: slidingTextOut 1s ease; } @keyframes slidingTextIn { 0%{ transform: translateY(100%); } 100%{ transform: translateY(0%); } } @keyframes slidingTextOut { 0%{ transform: translateY(0%); } 100%{ transform: translateY(-100%); } } /* ------------------------------------------Wpdevart homepage banner image------------------------------------------ */ .wpdevart-banner-content-main-image, .wpdevart-banner-content-main-image-first-theme, .wpdevart-banner-content-second-image, .wpdevart-banner-content-third-image, .wpdevart-banner-content-fourth-image { background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; } .wpdevart-banner-content-main-image, .wpdevart-banner-content-main-image-first-theme { top: 15%; left: 17.5%; } .wpdevart-banner-content-main-image img, .wpdevart-banner-content-main-image-first-theme img { height: 435px; width: 435px; } .wpdevart-banner-content-main-image-first-theme img { border-radius: 50%; } @media (min-width: 800px) and (max-width: 1400px) { .wpdevart-banner-content-main-image, .wpdevart-banner-content-main-image-first-theme { top: 14%; left: 17%; } .wpdevart-banner-content-main-image img, .wpdevart-banner-content-main-image-first-theme img { height: 360px; width: 360px; } } @media (min-width: 600px) and (max-width: 800px) { .wpdevart-banner-content-main-image, .wpdevart-banner-content-main-image-first-theme { top: 16%; left: 19%; } .wpdevart-banner-content-main-image img, .wpdevart-banner-content-main-image-first-theme img { height: 330px; width: 330px; } } @media (max-width: 600px) { .wpdevart-banner-content-main-image, .wpdevart-banner-content-main-image-first-theme { top: 16%; left: 19%; } .wpdevart-banner-content-main-image img, .wpdevart-banner-content-main-image-first-theme img { height: 220px; width: 220px; } } .wpdevart-banner-content-second-image { top: 12%; left: 10%; } .wpdevart-banner-content-third-image { bottom: 0; left: 0; } .wpdevart-banner-content-fourth-image { top: 0; right: 0; } .wpdevart-banner-content-second-image img { height: 480px; width: 480px; } .wpdevart-banner-content-third-image img, .wpdevart-banner-content-fourth-image img { height: 240px; width: 150px; object-fit: cover; } @media (min-width: 600px) and (max-width: 1400px) { .wpdevart-banner-content-second-image img { height: 380px; width: 380px; } .wpdevart-banner-content-third-image img, .wpdevart-banner-content-fourth-image img { height: 209px; width: 130px; } } @media (max-width: 600px) { .wpdevart-banner-content-second-image img { height: 250px; width: 250px; } .wpdevart-banner-content-third-image img, .wpdevart-banner-content-fourth-image img { height: 129px; width: 80px; } } .wpdevart-banner-image-wrapper { position: relative; width: 610px; height: 610px; } @media (max-width: 600px) { .wpdevart-banner-image-wrapper { width: 320px; height: 320px; } } @media (min-width: 600px) and (max-width: 800px) { .wpdevart-banner-image-wrapper { width: 500px; height: 500px; } } @media (min-width: 800px) and (max-width: 1400px) { .wpdevart-banner-image-wrapper { width: 520px; height: 520px; } } /* ------------------------------------------Wpdevart homepage banner second theme------------------------------------------ */ .wpdevart-home-banner-one-second-theme { padding: 1.6rem 16px; word-break: break-word; } @media (min-width: 1200px) { .wpdevart-home-banner-one-second-theme { padding: 20px 0; } } .wpdevart-home-banner-one-second-theme { word-break: break-word; } .wpdevart-banner-second-theme-image { background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0 auto; } @media (min-width: 1200px) { .wpdevart-banner-second-theme-image { position: absolute; } } .wpdevart-banner-second-theme-image img { height: 580px; width: 580px; animation: border-transform 12s linear infinite alternate forwards; box-shadow: 0 7px 16px rgba(0,0,0,0.25), 0 7px 7px rgba(0,0,0,0.22); } @media (max-width: 600px) { .wpdevart-banner-second-theme-image img { height: 297px; width: 297px; } } @media (min-width: 600px) and (max-width: 800px) { .wpdevart-banner-second-theme-image img { height: 464px; width: 464px; } } @media (min-width: 800px) and (max-width: 1400px) { .wpdevart-banner-second-theme-image img { height: 480px; width: 480px; } } @-webkit-keyframes border-transform { 0%, to { border-radius: 73% 37% 54% 46%/55% 48% 52% 73%} 14% { border-radius: 73% 60% 54% 46%/49% 60% 40% 73%} 28% { border-radius: 73% 46% 38% 62%/49% 70% 40% 73%} 42% { border-radius: 73% 39% 55% 45%/61% 38% 62% 73%} 56% { border-radius: 73% 39% 67% 33%/70% 50% 50% 73%} 70% { border-radius: 73% 50% 34% 66%/56% 68% 42% 73%} 84% { border-radius: 73% 54% 50% 50%/35% 61% 39% 73%} } @keyframes border-transform { 0%, to { border-radius: 73% 37% 54% 46%/55% 48% 52% 73%} 14% { border-radius: 73% 60% 54% 46%/49% 60% 40% 73%} 28% { border-radius: 73% 46% 38% 62%/49% 70% 40% 73%} 42% { border-radius: 73% 39% 55% 45%/61% 38% 62% 73%} 56% { border-radius: 73% 39% 67% 33%/70% 50% 50% 73%} 70% { border-radius: 73% 50% 34% 66%/56% 68% 42% 73%} 84% { border-radius: 73% 54% 50% 50%/35% 61% 39% 73%} } /* ------------------------------------------Wpdevart homepage banner third theme------------------------------------------ */ .wpdevart-homepage-page-banner-third-theme { padding: 0 0 20px 0; position: relative; } .banner-third-theme-container { margin: 0 auto; word-break: break-word; } @media (min-width: 960px) { .banner-third-theme-container { display: flex; align-items: center; } .wpdevart-banner-third-theme-content { flex: 40%; } .wpdevart-banner-third-theme-image-container { flex: 30%; } } .wpdevart-banner-third-theme-content { width: 100%; } .wpdevart-banner-third-theme-image-container { width: 100%; } .wpdevart-banner-third-theme-image { max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } .wpdevart-banner-third-theme-image img { max-width: 100%; aspect-ratio: 1 / 1; height: 100%; object-fit: cover; } @media (min-width: 2400px) { .wpdevart-banner-third-theme-image { aspect-ratio: 2 / 1; } .wpdevart-banner-third-theme-image img { aspect-ratio: 2 / 1; } .wpdevart-banner-third-theme-content { flex: 26%; } .wpdevart-banner-third-theme-image-container { flex: 37%; } } @media (min-width: 960px) and (max-width: 1300px) { .wpdevart-banner-third-theme-image { aspect-ratio: 3 / 5; } .wpdevart-banner-third-theme-image img { aspect-ratio: 3 / 5; } } @media (min-width: 600px) and (max-width: 960px) { .wpdevart-banner-third-theme-image { aspect-ratio: 7 / 3; } .wpdevart-banner-third-theme-image img { aspect-ratio: 7 / 3; } } @media (max-width: 600px) { .wpdevart-banner-third-theme-image { aspect-ratio: 8 / 3; } .wpdevart-banner-third-theme-image img { aspect-ratio: 8 / 3; } } .wpdevart-home-banner-third-theme { word-break: break-word; padding: 30px 0; } .wpdevart-home-banner-third-theme-inner { width: 90%; text-align: center; margin: 0 auto; } .sliding-text-third-theme li { text-align: center!important; } /* ------------------------------------------Wpdevart homepage sections------------------------------------------ */ .wpdevart-homepage-title-description { max-width: 1300px; margin: 0 auto; padding: 40px 10px 20px 10px; } .wpdevart-custom-desctiption { text-align: center; color: #3A519C; font-size: 16px; font-weight: 400; word-break: break-word; text-transform: uppercase; letter-spacing: 1px; } @media (max-width: 800px) { .wpdevart-custom-desctiption { font-size: 14px; } } .wpdevart-custom-title { display: flex; margin: 10px auto; } .wpdevart-custom-title-content { display: inline-block; margin: 0px auto; text-align: center; color: #000000; font-size: 37px; word-break: break-word; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; } @media (max-width: 800px) { .wpdevart-custom-title-content { font-size: 35px; } } @media (min-width: 1200px) { .wpdevart-custom-title-content:before { content: ""; display: inline-block; width: 100px; height: 15px; background: linear-gradient(to left, #f7f7f7, #ffffff); margin-right: 40px; margin-bottom: 5px; } } @media (min-width: 1200px) { .wpdevart-custom-title-content:after { content: ""; display: inline-block; width: 100px; height: 15px; background: linear-gradient(to right, #f7f7f7, #ffffff); margin-left: 40px; margin-bottom: 5px; } } .wpdevart-action-section-bg { background: #ffffff; } .wpdevart-action-section-bg-gradient { background: linear-gradient(to right, #ffffff, #f9f9f9); } .wpdevart-action-section { word-break: break-word; } @media (min-width: 960px) { .wpdevart-action-section { display: flex; align-items: center; } } .wpdevart-action-image-section { flex: 1; line-height: 0!important; } .wpdevart-action-image-section img { height: auto; width: 100%; } .wpdevart-action-text-button-section { flex: 1; } .wpdevart-action-text-content { width: 80%; margin: 0 40px; } @media (min-width: 960px) { .wpdevart-action-text-content { margin: 0 80px; } } .wpdevart-action-text-content-font { font-size: 30px; color: #717171; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; } .wpdevart-action-text-content p { font-size: 16px; color: #717171; } .wpdevart-action-button-content { width: 80%; text-align: left; margin: 0 40px; padding: 20px 0; } @media (min-width: 960px) { .wpdevart-action-button-content { margin: 0 80px; } } @media (min-width: 1700px) { .wpdevart-action-text-content, .wpdevart-action-button-content { width: 630px; } } .wpdevart-homepage-posts-section { max-width: 1500px; margin: 0 auto; padding-bottom: 20px; } @media (min-width: 600px) { .wpdevart-homepage-post-container { flex-wrap: wrap; display: flex; justify-content: center; } } .wpdevart-homepage-posts-content { background: #ffffff; color: #717171; padding: 10px 10px; width: 60%; margin: 30px auto; box-shadow: 0 7px 16px rgba(0,0,0,0.1), 0 7px 7px rgba(0,0,0,0.1); word-break: break-word; transition: ease-out 0.3s; } .wpdevart-homepage-posts-content:hover { box-shadow: 0 3px 3px rgba(0,0,0,0.25), 0 3px 3px rgba(0,0,0,0.22); } @media (min-width: 1300px) { .wpdevart-homepage-posts-content { width: 23%; margin: 20px 20px; } } @media (min-width: 600px) and (max-width: 1300px) { .wpdevart-homepage-posts-content { width: 40%; margin: 10px 10px; } } .wpdevart-home-latest-post-date { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: #717171; } .wpdevart-home-latest-posts-list-title { width: 100%; display: inline-block; text-align: center; word-break: break-word; } .wpdevart-home-latest-posts-list-title h5 { font-size: 20px; letter-spacing: 2px; } .wpdevart-home-latest-post-title { line-height: 1.1; margin: 20px 0 0 0; text-align: left; font-weight: 400; text-transform: uppercase; } .wpdevart-home-latest-post-title a { text-decoration: none; color: #3A519C; } .wpdevart-home-latest-post-text { text-align: left; font-size: 15px; font-weight: 300; } .wpdevart-home-latest-post-read-more a { color: #717171; text-decoration: none; font-weight: 400; font-size: 11px; text-transform: uppercase; } .wpdevart-home-arrow-right { margin-left: 6px; transition: ease-out 0.4s; } .wpdevart-homepage-posts-content:hover .wpdevart-home-arrow-right { margin-left: 10px; } /* ------------------------------------------404 Page------------------------------------------ */ .wpdevart-not-found-page-content { padding: 32px 0; background: #ffffff; } @media (min-width: 600px) { .wpdevart-not-found-page-content { padding: 40px 0; } } .wpdevart-not-found-page-image-container { display: flex; margin: 0 auto; align-items: center; justify-content: center; max-width: 70%; } @media (min-width: 960px) { .wpdevart-not-found-page-image-container { max-width: 40%; } } .wpdevart-not-found-page-image { background-size: cover; background-position: center; } @media (min-width: 1300px) { .wpdevart-not-found-content-elements { max-width: 60%!important; } } .wpdevart-not-found-content-elements { margin: 0 auto; margin-top: 30px; max-width: 80%; word-break: break-word; text-align: center; } .wpdevart-not-found-titile { color: #000000; font-size: 45px; font-weight: 500; margin: 0!important; padding: 0px 10px; text-align: center; } .wpdevart-not-found-desc { font-size: 20px; padding: 0px 10px; text-align: center; line-height: 1.3; margin: 0px!important; } @media (min-width: 560px) and (max-width: 960px) { .wpdevart-not-found-titile { font-size: 35px; } } @media (max-width: 560px) { .wpdevart-not-found-titile { font-size: 30px; } } @media (max-width: 960px) { .wpdevart-not-found-desc { font-size: 16px; } } /* ------------------------------------------Search Overlay/Popup------------------------------------------ */ .wpdevart-search-overlay { overflow-y: auto; overflow-x: hidden; background-color: rgba(0,0,0,0.75); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 134; position: fixed; top: 0; left: 0; right: 0; bottom: 0; transition: opacity 0.3s ease, visibility 0.3s ease; box-sizing: border-box; visibility: hidden; opacity: 0; } .wpdevart-search-overlay-show-on-click { visibility: visible !important; opacity: 1 !important; } .wpdevart-search-overlay-layout { display: flex; justify-content: center; align-items: center; min-height: 100%; padding: 20px; box-sizing: border-box; } .wpdevart-search-container { position: relative; background: #ffffff; border-radius: 12px; padding: 50px 36px 40px; width: 100%; max-width: 680px; box-shadow: 0 24px 64px rgba(0,0,0,0.35); box-sizing: border-box; } @media (min-width: 960px) { .wpdevart-search-container { padding: 56px 48px 48px; } } .wpdevart-search-popup-title { font-size: 20px; font-weight: 600; color: #333333; margin: 0 0 22px 0; text-align: center; letter-spacing: 0.3px; } @media (min-width: 960px) { .wpdevart-search-popup-title { font-size: 24px; margin-bottom: 28px; } } /* AWS search wrapper inside popup */ .wpdevart-aws-search-wrapper { width: 100%; } .wpdevart-aws-search-wrapper .aws-container { width: 100%; } .wpdevart-aws-search-wrapper .aws-search-form { display: flex; width: 100%; border: 2px solid #e0e0e0; border-radius: 8px; overflow: visible; transition: border-color 0.2s; } .wpdevart-aws-search-wrapper .aws-search-form:focus-within { border-color: #3A519C; } .wpdevart-aws-search-wrapper .aws-search-field { flex: 1; font-size: 16px; padding: 14px 18px; border: none; outline: none; background: transparent; color: #333333; min-width: 0; } @media (min-width: 960px) { .wpdevart-aws-search-wrapper .aws-search-field { font-size: 18px; padding: 16px 20px; } } .wpdevart-aws-search-wrapper .aws-search-field::placeholder { color: #aaaaaa; } .wpdevart-aws-search-wrapper .aws-search-submit { padding: 14px 20px; background: #3A519C; color: #ffffff; border: none; cursor: pointer; font-size: 16px; border-radius: 0 6px 6px 0; transition: background 0.2s; white-space: nowrap; } .wpdevart-aws-search-wrapper .aws-search-submit:hover { background: #2d47d0; } /* Autocomplete dropdown z-index fix */ .wpdevart-aws-search-wrapper .aws-popup-holder { z-index: 200 !important; } /* Close button */ .search-overlay-close-button, .search-overlay-close-wide-button { cursor: pointer; background: transparent; border: none; position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s; padding: 0; } .search-overlay-close-button:hover, .search-overlay-close-button:focus, .search-overlay-close-wide-button:hover, .search-overlay-close-wide-button:focus { background: rgba(0,0,0,0.08); } .search-overlay-close-icon { font-size: 18px; color: #555555; } /* Kept for backwards compat with native search form */ .wpdevart-search-overlay-icon { font-size: 16px; color: #d3d3d3; } .search-overlay-submit-button { cursor: pointer; background: transparent; border: none; } .search-overlay-fs { font-size: 14px; } /* ------------------------------------------Search Page------------------------------------------ */ .wpdevart-search-page-subtitle { font-weight: bold; color: #000000; font-size: 32px; line-height: 1; word-break: break-word; width: 100%; text-align: center; } .wpdevart-search-sbtxt { color: #5a5757; height: 35px; width: 200px; margin-right: 3px; font-size: 17px; } .widget_search .wpdevart-search-sbtxt { width: 100%; } .perform-new-search { width: 100%; text-align: center; } @media (min-width: 960px) { .perform-new-search { display: flex; align-items: center; justify-content: center; } } .perform-new-search-text { font-weight: bold; color: #000000; font-size: 26px; } @media (max-width: 960px) { .wpdevart-search-page-form { margin-top: 30px; } } @media (min-width: 960px) { .wpdevart-search-page-form { margin-left: 10px; } } .wpdevart-search-form { display: inline-flex; } .wpdevart-sidebar-container-inside .wpdevart-search-form { width: 100%; } /* ------------------------------------------Wpdevart Footer------------------------------------------ */ .footer-one-pre { height: 100px; background: #ffffff; background-position: bottom; background-repeat: no-repeat; background-size: contain; } .footer-one-pre { background-image: url(images/footer-style1.png)!important; } .wpdevart-footer-one { background: linear-gradient(to right, #ffffff, #fff); } .wpdevart-footer-two { background: linear-gradient(to right, #f9f8ff, #dedafa); } .wpdevart-footer-three { background: #232524; } .wpdevart-footer-four { background: #fffef9; } .wpdevart-footer-five { background: linear-gradient(to right, #01093a, #2d0b00); } .wpdevart-footer-one a, .wpdevart-footer-two a, .wpdevart-footer-three a, .wpdevart-footer-four a, .wpdevart-footer-five a { text-decoration: none; font-size: 17px; transition: 0.5s all; background-position: 50% 100%; } .wpdevart-footer-one a:not(.wp-block-button__link, .comment-reply-link) { color: #000000; background: linear-gradient(90deg, #3A519C, #4494C0); background-size: 0 2px; background-repeat: no-repeat; background-position: 50% 100%; } .wpdevart-footer-one a:hover:not(.wp-block-button__link, .comment-reply-link) { color: #ff5952; background-size: 100% 2px; } .wpdevart-footer-two a:not(.wp-block-button__link, .comment-reply-link) { color: #7a5bfb; background: linear-gradient(90deg, #8224e3, #8224e3); background-size: 0 2px; background-repeat: no-repeat; background-position: 50% 100%; } .wpdevart-footer-two a:hover:not(.wp-block-button__link, .comment-reply-link) { color: #8224e3; background-size: 100% 2px; } .wpdevart-footer-three a:not(.wp-block-button__link, .comment-reply-link) { color: #ffffff; background: linear-gradient(90deg, #c2e3fb, #c2e3fb); background-size: 0 2px; background-repeat: no-repeat; background-position: 50% 100%; } .wpdevart-footer-three a:hover:not(.wp-block-button__link, .comment-reply-link) { color: #c2e3fb; background-size: 100% 2px; } .wpdevart-footer-four a:not(.wp-block-button__link, .comment-reply-link) { color: #ff6200; background: linear-gradient(90deg, #8b3703, #8b3703); background-size: 0 2px; background-repeat: no-repeat; background-position: 50% 100%; } .wpdevart-footer-four a:hover:not(.wp-block-button__link, .comment-reply-link) { color: #8b3703; background-size: 100% 2px; } .wpdevart-footer-five a:not(.wp-block-button__link, .comment-reply-link) { color: #dedfdf; background: linear-gradient(90deg, #f3b9b9, #f3b9b9); background-size: 0 2px; background-repeat: no-repeat; background-position: 50% 100%; } .wpdevart-footer-five a:hover:not(.wp-block-button__link, .comment-reply-link) { color: #f3b9b9; background-size: 100% 2px; } .wpdevart-footer-one p a:not(.wp-block-button__link, .tag-cloud-link) { color: #000000; background: linear-gradient(90deg, #000000, #000000); background-size: 100% 2px; background-repeat: no-repeat; background-position: 50% 100%; } .wpdevart-footer-one p a:hover:not(.wp-block-button__link) { color: #ff5952; background-size: 0 2px; } .wpdevart-footer-two p a:not(.wp-block-button__link, .tag-cloud-link) { color: #7a5bfb; background: linear-gradient(90deg, #7a5bfb, #7a5bfb); background-size: 100% 2px; background-repeat: no-repeat; background-position: 50% 100%; } .wpdevart-footer-two p a:hover:not(.wp-block-button__link) { color: #8224e3; background-size: 0 2px; } .wpdevart-footer-three p a:not(.wp-block-button__link, .tag-cloud-link) { color: #ffffff; background: linear-gradient(90deg, #ffffff, #ffffff); background-size: 100% 2px; background-repeat: no-repeat; background-position: 50% 100%; } .wpdevart-footer-three p a:hover:not(.wp-block-button__link) { color: #c2e3fb; background-size: 0 2px; } .wpdevart-footer-four p a:not(.wp-block-button__link, .tag-cloud-link) { color: #ff6200; background: linear-gradient(90deg, #ff6200, #ff6200); background-size: 100% 2px; background-repeat: no-repeat; background-position: 50% 100%; } .wpdevart-footer-four p a:hover:not(.wp-block-button__link) { color: #8b3703; background-size: 0 2px; } .wpdevart-footer-five p a:not(.wp-block-button__link, .tag-cloud-link) { color: #dedfdf; background: linear-gradient(90deg, #dedfdf, #dedfdf); background-size: 100% 2px; background-repeat: no-repeat; background-position: 50% 100%; } .wpdevart-footer-five p a:hover:not(.wp-block-button__link) { color: #f3b9b9; background-size: 0 2px; } .wpdevart-footer-one .tag-cloud-link, .wpdevart-footer-two .tag-cloud-link, .wpdevart-footer-three .tag-cloud-link, .wpdevart-footer-four .tag-cloud-link, .wpdevart-footer-five .tag-cloud-link { display: inline-block; vertical-align: middle; position: relative; font-weight: 500; text-decoration: none!important; font-size: 13px!important; margin: 0 5px 10px 0; padding: 5px 10px; text-transform: uppercase; } .wpdevart-footer-one .tag-cloud-link { color: #000000; border: 1px solid #000000; } .wpdevart-footer-one .tag-cloud-link:hover { color: #ff5952; border: 1px solid #ff5952; } .wpdevart-footer-two .tag-cloud-link { color: #7a5bfb; border: 1px solid #7a5bfb; } .wpdevart-footer-two .tag-cloud-link:hover { color: #8224e3; border: 1px solid #8224e3; } .wpdevart-footer-three .tag-cloud-link { color: #ffffff; border: 1px solid #ffffff; } .wpdevart-footer-three .tag-cloud-link:hover { color: #c2e3fb; border: 1px solid #c2e3fb; } .wpdevart-footer-four .tag-cloud-link { color: #ff6200; border: 1px solid #ff6200; } .wpdevart-footer-four .tag-cloud-link:hover { color: #8b3703; border: 1px solid #8b3703; } .wpdevart-footer-five .tag-cloud-link { color: #dedfdf; border: 1px solid #dedfdf; } .wpdevart-footer-five .tag-cloud-link:hover { color: #f3b9b9; border: 1px solid #f3b9b9; } .wpdevart-footer-one p, .wpdevart-footer-two p, .wpdevart-footer-three p, .wpdevart-footer-four p, .wpdevart-footer-five p { font-size: 17px; } .wpdevart-footer-one p { color:#333333; } .wpdevart-footer-two p, .wpdevart-footer-four p { color:#000000; } .wpdevart-footer-three p { color:#d8dad9; } .wpdevart-footer-five p { color:#dedfdf; } .wpdevart-footer-one h1, .wpdevart-footer-one h2, .wpdevart-footer-one h3, .wpdevart-footer-one h4, .wpdevart-footer-one h5, .wpdevart-footer-one h6 { color: #000000; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } .wpdevart-footer-two h1, .wpdevart-footer-two h2, .wpdevart-footer-two h3, .wpdevart-footer-two h4, .wpdevart-footer-two h5, .wpdevart-footer-two h6 { color: #5863a8; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } .wpdevart-footer-three h1, .wpdevart-footer-three h2, .wpdevart-footer-three h3, .wpdevart-footer-three h4, .wpdevart-footer-three h5, .wpdevart-footer-three h6 { color: #feffff; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } .wpdevart-footer-four h1, .wpdevart-footer-four h2, .wpdevart-footer-four h3, .wpdevart-footer-four h4, .wpdevart-footer-four h5, .wpdevart-footer-four h6 { color: #111111; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } .wpdevart-footer-five h1, .wpdevart-footer-five h2, .wpdevart-footer-five h3, .wpdevart-footer-five h4, .wpdevart-footer-five h5, .wpdevart-footer-five h6 { color: #ffffff; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; } .wpdevart-footer-one h1, .wpdevart-footer-two h1, .wpdevart-footer-three h1, .wpdevart-footer-four h1, .wpdevart-footer-five h1 { font-size: 28px; } .wpdevart-footer-one h2, .wpdevart-footer-two h2, .wpdevart-footer-three h2, .wpdevart-footer-four h2, .wpdevart-footer-five h2 { font-size: 26px; } .wpdevart-footer-one h3, .wpdevart-footer-two h3, .wpdevart-footer-three h3, .wpdevart-footer-four h3, .wpdevart-footer-five h3 { font-size: 24px; } .wpdevart-footer-one h4, .wpdevart-footer-two h4, .wpdevart-footer-three h4, .wpdevart-footer-four h4, .wpdevart-footer-five h4 { font-size: 23px; } .wpdevart-footer-one h5, .wpdevart-footer-two h5, .wpdevart-footer-three h5, .wpdevart-footer-four h5, .wpdevart-footer-five h5 { font-size: 22px; } .wpdevart-footer-one h6, .wpdevart-footer-two h6, .wpdevart-footer-three h6, .wpdevart-footer-four h6, .wpdevart-footer-five h6 { font-size: 21px; } .wpdevart-footer-one ul.sub-menu, .wpdevart-footer-two ul.sub-menu, .wpdevart-footer-three ul.sub-menu, .wpdevart-footer-four ul.sub-menu, .wpdevart-footer-five ul.sub-menu { margin: 0; } .wpdevart-footer-container { max-width: 1300px; margin: 0 auto; padding: 16px; position: relative; } .wpdevart-footer-container:before, .wpdevart-footer-container:after { content: " "; display: table; } .wpdevart-footer-container:after { clear: both; } .wpdevart-footer-container .widget_media_image:first-of-type { padding-top: 25px; } .site-footer__col-one { float: left; } @media (min-width: 960px) { .site-footer__col-one { width: 40%; } } .site-footer__col-one li, .site-footer__col-two li, .site-footer__col-three li, .site-footer__col-two-layout-two li, .site-footer__col-three-layout-two li, .wpdevart-footer-col-layout-four li { list-style: none; } .site-footer__col-one ul, .site-footer__col-two ul, .site-footer__col-three ul, .site-footer__col-two-layout-two ul, .site-footer__col-three-layout-two ul, .wpdevart-footer-col-layout-four ul { padding: 0!important; } .wpdevart-widgets-inner { padding: 10px; word-break: break-word; } .site-footer__col-two-three-group { margin: 0 auto; } @media (min-width: 960px) { .site-footer__col-two-three-group { float: left; width: 60%; } } .site-footer__col-two, .site-footer__col-three { width: 50%; float: left; } .site-footer__col-two-layout-two, .site-footer__col-three-layout-two { width: 100%; } @media (min-width: 960px) { .site-footer__col-two-layout-two, .site-footer__col-three-layout-two { width: 30%; float: left; } } .site-footer-four-widgets-group { margin: 0 auto; display: relative; width: 100%; } @media (min-width: 1100px) { .site-footer-four-widgets-group { width: 50%; float: left; } } @media (min-width: 600px) { .site-footer-four-widgets-group { display: flex; } } .wpdevart-footer-col-layout-four { width: 100%; } .site-footer-five-widgets-group { margin: 0 auto; display: relative; width: 100%; display: flex; justify-content: space-between; } @media (max-width: 960px) { .site-footer-five-widgets-group { flex-wrap: wrap; } } .site-footer_five_col-one { width: 30%; } .site-footer_five_col-two { width: 20%; } .site-footer_five_col-three { width: 20%; } .site-footer_five_col-four { width: 30%; } @media (max-width: 960px) and (min-width: 650px) { .site-footer_five_col-one { width: 60%; } .site-footer_five_col-two { width: 40%; } .site-footer_five_col-three { width: 40%; } .site-footer_five_col-four { width: 60%; } } @media (max-width: 650px) { .site-footer_five_col-one, .site-footer_five_col-two, .site-footer_five_col-three, .site-footer_five_col-four { width: 100%; } } .site-footer-six-widgets-group { margin: 0 auto; display: relative; width: 100%; display: flex; justify-content: space-between; } @media (max-width: 1200px) { .site-footer-six-widgets-group { flex-wrap: wrap; } } .site-footer_six_col-one { width: 27%; } .site-footer_six_col-two { width: 17%; } .site-footer_six_col-three { width: 17%; } .site-footer_six_col-four { width: 17%; } .site-footer_six_col-five { width: 22%; } @media (max-width: 1200px) and (min-width: 891px) { .site-footer_six_col-one { width: 50%; } .site-footer_six_col-two { width: 25%; } .site-footer_six_col-three { width: 25%; } .site-footer_six_col-four { width: 40%; } .site-footer_six_col-five { width: 60%; } } @media (max-width: 891px) and (min-width: 650px) { .site-footer_six_col-one { width: 65%; } .site-footer_six_col-two { width: 35%; } .site-footer_six_col-three { width: 50%; } .site-footer_six_col-four { width: 50%; } .site-footer_six_col-five { width: 100%; } } @media (max-width: 650px) { .site-footer_six_col-one, .site-footer_six_col-two, .site-footer_six_col-three, .site-footer_six_col-four, .site-footer_six_col-five { width: 100%; } } .wpdevart-footer-copyright-text p { padding: 0 10px; } @media (min-width: 500px) { .wpdevart-footer-copyright-image { padding: 0 10px; } } @media (min-width: 800px) { .wpdevart-footer-copyright-image { min-width: 30%; text-align: right; } } .wpdevart-footer-copyright-image img { height: 25px; width: auto; } @media (min-width: 800px) { .wpdevart-footer-copyright-text { display: flex; align-items: center; justify-content: space-between; } } @media (max-width: 800px) { .wpdevart-footer-copyright-text, .wpdevart-footer-copyright-image { text-align: center; } } .wpdevart-footer-copyright-text p, .wpdevart-footer-copyright-text a { font-size: 14px; } .wpdevart-footer-copyright-text { padding: 10px 0; word-break: break-word; max-width: 1300px; margin: 0 auto; } .wpdevart-footer-copyright-only-text p { padding: 0 10px; } @media (min-width: 800px) { .wpdevart-footer-copyright-only-text { display: flex; align-items: center; justify-content: center; } } @media (max-width: 800px) { .wpdevart-footer-copyright-only-text { text-align: center; } } .wpdevart-footer-copyright-only-text p, .wpdevart-footer-copyright-only-text a { font-size: 14px; } .wpdevart-footer-copyright-only-text { padding: 10px 0; word-break: break-word; max-width: 1300px; margin: 0 auto; } .wpdevart-footer-three .widget_recent_comments, .wpdevart-footer-five .widget_recent_comments { color:#ffffff; } .wpdevart-footer-one .widget_recent_comments { color:#333333; } /* ------------------------------------------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 { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; 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: 13px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .wp-block-image figcaption a { font-size: 13px!important; } .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; } .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; } /* ------------------------------------------Primary Button------------------------------------------ */ .wpdevart-primary-button { color: #ffffff; padding: 10px 16px; display: inline-block; border-radius: 5px; font-size: 14px; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; cursor: pointer; -webkit-transition: ease-out 0.5s; -moz-transition: ease-out 0.5s; transition: ease-out 0.5s; box-shadow: inset 0 0 0 0 #000000; background: #000000; border: 2px solid #000000; } .wpdevart-primary-button:hover, .wpdevart-primary-button:focus { box-shadow: inset 400px 0 0 0 #ffffff; color: #000000; border: 2px solid #000000; } /* ------------------------------------------WordPress Core Customized------------------------------------------ */ ol.wp-block-latest-comments { padding: 0; } .wp-block-latest-comments__comment { margin-bottom:0; } .wp-block-search__button { color: #ffffff; padding: 10px 20px; display: inline-block; border-radius: 2px; font-size: 14px; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; cursor: pointer; -webkit-transition: ease-out 0.5s; -moz-transition: ease-out 0.5s; transition: ease-out 0.5s; box-shadow: inset 0 0 0 0 #000000; background: #000000; border: 2px solid #000000; } @media (max-width: 1200px) { .wp-block-search__button { padding: 4px 7px; font-size: 14px; } } .wp-block-search__button:hover, .wp-block-search__button:focus { box-shadow: inset 400px 0 0 0 #ffffff; color: #000000; border: 2px solid #000000; } #submit:not(.woocommerce #review_form #respond .form-submit input) { color: #ffffff; padding: 10px 20px; display: inline-block; border-radius: 2px; font-size: 14px; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; cursor: pointer; -webkit-transition: ease-out 0.4s; -moz-transition: ease-out 0.4s; transition: ease-out 0.4s; box-shadow: inset 0 0 0 0 #000000; background: #000000; border: 2px solid #000000; } #submit:hover:not(.woocommerce #review_form #respond .form-submit input), #submit:focus:not(.woocommerce #review_form #respond .form-submit input) { box-shadow: inset 400px 0 0 0 #ffffff; color: #000000; border: 2px solid #000000; } .sidebar-widget-area .wp-block-archives, .wpdevart-footer-container .wp-block-archives { list-style: none; margin: 0; padding: 0; } .sidebar-widget-area .widget_archive, .wpdevart-footer-container .widget_archive { list-style: none; margin: 0; } .sidebar-widget-area .widget_nav_menu ul, .wpdevart-footer-container .widget_nav_menu ul { list-style: none; margin: 0; padding: 0; } .sidebar-widget-area .wp-block-categories, .wpdevart-footer-container .wp-block-categories { list-style: none; margin: 0; padding: 0; } .sidebar-widget-area .wp-block-separator, .wpdevart-footer-container .wp-block-separator { color: #949494; border-bottom: 1px solid; } /* ------------------------------------------WordPress Core Comments Customized------------------------------------------ */ @media (min-width: 960px) { .comment-list { max-width: 1000px; } } ol.comment-list { list-style: none; padding: 0; margin: 0 auto!important; } ol.comment-list .children { list-style: none; } @media (min-width: 600px) and (max-width:800px) { ol.comment-list .children { padding-left: 20px; } } @media (max-width: 600px) { ol.comment-list .children { padding-left: 10px; } } .comment-author { font-size: 14px; } @media (min-width: 400px) { .comment-author { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; overflow: hidden; font-size: 15px; } } .comment-author img { display: block; width: 50px; height: 50px; border-radius: 50%; margin-right: 20px; } .comment-author .says { margin-left: 7px; } .comment-body { border: 1px solid #ebebeb; margin: 15px 0; padding: 30px 20px; box-shadow: 0 0 2px 0 #c9c9c9, 0 0 15px 0 #c9c9c9 !important; background: #fcfcfc; border-radius: 2px; } .comment-body, .comment-body p, .comment-body li, .comment-body ol { color: #333333; } .comment-body h1, .comment-body h2, .comment-body h3, .comment-body h4, .comment-body h5, .comment-body h6 { color: #000000; } .comment-body a:not(.reply a, .comment-reply-link, .comment-author a, .comment-body .comment-meta a) { color: #000000; background: linear-gradient(90deg, #000000, #000000); background-repeat: no-repeat; background-position: 50% 100%; background-size: 100% 2px; transition: 0.5s all; text-decoration: none; } .comment-body a:hover:not(.reply a, .comment-reply-link, .comment-author a, .comment-body .comment-meta a) { color: #ff5952; background-size: 0 2px; } .comment-reply-link { -webkit-transition: ease-out 0.7s; -moz-transition: ease-out 0.7s; transition: ease-out 0.7s; box-shadow: inset 0 0 0 0 #000000; background: #000000; border: 2px solid #000000; } .reply a { color: #ffffff; } .comment-reply-link { padding: 10px 20px; border-radius: 2px; } .comment-reply-link:hover { box-shadow: inset 400px 0 0 0 #ffffff; border: 2px solid #000000; } .reply a:hover { color: #000000; } .comment-body .reply { text-align: right; font-size: 14px; padding-top: 15px; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; } .comment-body .reply a:hover { text-decoration: none!important; } .comment-body .comment-meta { padding: 10px 0 5px 0; font-size: 15px; } .comment-body a { text-decoration: none; } .comment-body a:hover { text-decoration: underline; } .comment-reply-title a { text-decoration: none; } .comment-reply-title a:hover { text-decoration: underline; } .widget-title h3 { font-size: 50px; } .widget_search { margin: 10px 0; } .comment-author a { border: 1px solid #000000; padding: 2px 10px; text-transform: uppercase; font-size: 15px!important; font-style: normal; } .comment-body .comment-meta a { border: 1px solid #000000; padding: 2px 10px; text-transform: uppercase; font-size: 13px!important; } .comment-author a:hover, .comment-body .comment-meta a:hover { text-decoration: none; border: 1px solid #ff5952; } .wp-block-comment-reply-link a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 14px!important; font-weight: 500; letter-spacing: 1px; } .wp-block-comment-reply-link a:hover { color: #ffffff; } .wpdevart-comment-respond input, .wpdevart-comment-respond textarea { margin: 5px 0 0 0; } /* ------------------------------------------- Category Mega Menu ------------------------------------------- */ .wpdevart-category-mega-menu-bar { background: #ffffff; width: 100%; border-top: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.1); } .wpdevart-category-mega-menu-container { max-width: 1300px; margin: 0 auto; padding: 0 20px; } ul.wpdevart-cat-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; } .wpdevart-cat-menu-item { position: relative; } .wpdevart-cat-menu-item + .wpdevart-cat-menu-item { border-left: 1px solid rgba(0,0,0,0.12); } .wpdevart-cat-item-trigger { display: flex; align-items: center; gap: 3px; padding: 10px 10px; cursor: pointer; user-select: none; } .wpdevart-cat-item-link { color: #222222; text-decoration: none; font-size: 13px; font-weight: 600; text-transform: uppercase; white-space: nowrap; transition: color 0.2s ease; } .wpdevart-cat-menu-item:hover .wpdevart-cat-item-link, .wpdevart-cat-menu-item:focus-within .wpdevart-cat-item-link { color: #3A519C; } .wpdevart-cat-chevron { color: rgba(0,0,0,0.40); font-size: 11px; line-height: 1; transition: transform 0.22s ease, color 0.2s ease; pointer-events: none; } .wpdevart-cat-menu-item:hover .wpdevart-cat-chevron, .wpdevart-cat-menu-item:focus-within .wpdevart-cat-chevron { transform: rotate(180deg); color: #3A519C; } /* Dropdown panel — default opens to the right */ .wpdevart-cat-dropdown-panel { position: absolute; top: calc(100% + 1px); left: 0; min-width: 340px; max-width: 400px; background: #ffffff; border-radius: 0 6px 6px 6px; box-shadow: 0 6px 28px rgba(0,0,0,0.16); z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease; overflow: hidden; pointer-events: none; } .wpdevart-cat-menu-item:hover .wpdevart-cat-dropdown-panel, .wpdevart-cat-menu-item:focus-within .wpdevart-cat-dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Last two items: open dropdown to the left to avoid viewport overflow */ .wpdevart-cat-menu-item:last-child .wpdevart-cat-dropdown-panel, .wpdevart-cat-menu-item:nth-last-child(2) .wpdevart-cat-dropdown-panel { left: auto; right: 0; border-radius: 6px 0 6px 6px; } .wpdevart-cat-dropdown-inner { display: flex; align-items: stretch; min-height: 130px; } .wpdevart-cat-dropdown-img { width: 150px; flex-shrink: 0; overflow: hidden; background: #f4f4f4; } .wpdevart-cat-dropdown-img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 130px; } .wpdevart-cat-dropdown-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; justify-content: center; } .wpdevart-cat-dropdown-title { margin: 0 0 7px 0; font-size: 15px; font-weight: 700; color: #3A519C; line-height: 1.3; } .wpdevart-cat-dropdown-desc { margin: 0 0 12px 0; font-size: 12.5px; color: #555555; line-height: 1.55; } .wpdevart-cat-dropdown-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #3A519C; text-decoration: none; border-bottom: 1.5px solid #3A519C; padding-bottom: 1px; transition: color 0.2s, border-color 0.2s; align-self: flex-start; } .wpdevart-cat-dropdown-cta:hover { color: #3A519C; border-color: #3A519C; opacity: 0.75; } /* Active/current item highlight */ .wpdevart-cat-menu-item.current-menu-item .wpdevart-cat-item-link { color: #3A519C; } @media (max-width: 960px) { .wpdevart-category-mega-menu-bar { display: none; } } /* ------------------------------------------- Inline AWS Search (header) ------------------------------------------- */ .wpdevart-header-inline-search { display: flex; align-items: center; margin-left: 10px; } /* AWS Search Lite / Pro form wrapper */ .wpdevart-header-inline-search .aws-search-wrapper, .wpdevart-header-inline-search .aws-search-form-wrap { width: 220px; } .wpdevart-header-inline-search .aws-search-field, .wpdevart-header-inline-search input[type="text"], .wpdevart-header-inline-search input[type="search"] { height: 36px; font-size: 13px; padding: 0 36px 0 12px; border: 1px solid rgba(0,0,0,0.18); border-radius: 4px; background: #f9f9f9; color: #222222; outline: none; width: 100%; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; } .wpdevart-header-inline-search .aws-search-field:focus, .wpdevart-header-inline-search input[type="text"]:focus, .wpdevart-header-inline-search input[type="search"]:focus { border-color: #3A519C; box-shadow: 0 0 0 2px rgba(17,63,39,0.12); background: #ffffff; } /* Submit / magnifier button inside the form */ .wpdevart-header-inline-search .aws-search-submit, .wpdevart-header-inline-search button[type="submit"] { height: 36px; width: 36px; background: #3A519C; border: none; border-radius: 0 4px 4px 0; color: #ffffff; cursor: pointer; font-size: 14px; transition: background 0.2s; flex-shrink: 0; } .wpdevart-header-inline-search .aws-search-submit:hover, .wpdevart-header-inline-search button[type="submit"]:hover { background: #0d2e1d; } /* Results dropdown stays above everything */ .wpdevart-header-inline-search .aws-results-con { z-index: 99999; } @media (max-width: 1200px) { .wpdevart-header-inline-search .aws-search-wrapper, .wpdevart-header-inline-search .aws-search-form-wrap { width: 170px; } } @media (max-width: 960px) { .wpdevart-header-inline-search { display: none; } } /* ==================== Header Redesign: Layout 20/50/30 + FadeInDown + Padding ==================== */ /* --- FadeInDown animation --- */ @keyframes wpdevartFadeInDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } } .wpdevart-sticky-header.wpdevart-is-stuck { animation: wpdevartFadeInDown 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; box-shadow: 0 4px 22px rgba(0,0,0,0.13) !important; } /* --- Header container padding --- */ @media (min-width: 960px) { .wpdevart-header-container { padding: 16px 28px !important; } } /* --- Logo: 20% --- */ @media (min-width: 960px) { .wpdevart-logo-area { flex: 0 0 20% !important; width: 20% !important; } .wpdevart-logo-area img { max-height: 56px; } } /* --- Menu+buttons area: 80% --- */ @media (min-width: 960px) { .wpdevart-menu-and-buttons-area { flex: 0 0 80% !important; width: 80% !important; } .wpdevart-menu-and-buttons-container { justify-content: flex-end !important; align-items: center; gap: 10px; } } /* --- Nav container: fills available width (~50% of total) --- */ @media (min-width: 960px) { .nav-container-layout-one, .nav-container-without-action-button { flex: 1 1 auto !important; max-width: none !important; min-width: 0; } } /* --- Search area: 30% of total = 37.5% of the 80% parent --- */ @media (min-width: 960px) { .wpdevart-search-button-icon.wpdevart-header-inline-search, .wpdevart-search-button-icon { flex: 0 0 30% !important; } .wpdevart-header-inline-search { flex: 0 0 30% !important; } } .aws-search-btn.aws-form-btn{ height: 42px !important; } /* --- AWS Search form: fill its container --- */ .wpdevart-header-inline-search .aws-search-wrapper, .wpdevart-header-inline-search .aws-search-form-wrap, .wpdevart-header-inline-search form, .wpdevart-header-inline-search .aws-container { width: 100% !important; } /* --- Search label (aws-search-label) --- */ .wpdevart-header-inline-search label.aws-search-label, .wpdevart-header-inline-search .aws-search-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: #3A519C; margin-bottom: 4px; opacity: 0.8; } /* --- Input field: refined with site palette --- */ .wpdevart-header-inline-search .aws-search-field, .wpdevart-header-inline-search input[type="text"], .wpdevart-header-inline-search input[type="search"] { height: 42px !important; font-size: 13.5px !important; padding: 0 48px 0 16px !important; border: 1.5px solid rgba(17,63,39,0.28) !important; background: #f4f8f6 !important; color: #1a1a1a !important; width: 100% !important; box-shadow: none !important; transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important; } .wpdevart-header-inline-search .aws-search-field:focus, .wpdevart-header-inline-search input[type="text"]:focus, .wpdevart-header-inline-search input[type="search"]:focus { border-color: #3A519C !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(17,63,39,0.10) !important; outline: none !important; } /* --- Submit button --- */ .wpdevart-header-inline-search .aws-search-submit, .wpdevart-header-inline-search button[type="submit"] { height: 42px !important; width: 42px !important; min-width: 42px !important; background: #3A519C !important; color: #ffffff !important; border: none !important; border-radius: 0 6px 6px 0 !important; cursor: pointer; font-size: 15px !important; transition: background 0.2s !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .wpdevart-header-inline-search .aws-search-submit:hover, .wpdevart-header-inline-search button[type="submit"]:hover { background: #0a2d1b !important; } /* --- Results dropdown --- */ .wpdevart-header-inline-search .aws-results-con { z-index: 99999 !important; border: 1px solid rgba(17,63,39,0.18) !important; border-top: none !important; border-radius: 0 0 6px 6px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important; } @media (max-width: 960px) { .wpdevart-header-inline-search { display: none !important; } } /* ==================== Sticky Header — FadeInDown on scroll ==================== */ /* * Step 1: remove the built-in sticky so the header scrolls with the page. * The JS will apply position: fixed + animation once the header is off-screen. */ .wpdevart-sticky-header, .wpdevart-sticky-header-for-mobile { position: relative !important; top: auto !important; } /* Step 2: keyframes — slides in from fully above the viewport */ @keyframes wpdevartHeaderFadeInDown { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } /* Step 3: pinned state added by JS when header is off-screen */ .wpdevart-sticky-header.wpdevart-header-pinned { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; animation: wpdevartHeaderFadeInDown 4s cubic-bezier(0.16, 1, 0.3, 1) both; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13) !important; } /* ==================== Header 15 / 70 / 15 layout ==================== */ @media (min-width: 960px) { .wpdevart-logo-area { flex: 0 0 15% !important; width: 15% !important; } .wpdevart-menu-and-buttons-area { flex: 0 0 85% !important; width: 85% !important; } /* Nav: fills available (~70% of total) */ .nav-container-layout-one, .nav-container-without-action-button { flex: 1 1 auto !important; max-width: none !important; display: flex; align-items: center; justify-content: center; } /* Search: 15% of total = 17.6% of 85% parent */ .wpdevart-search-button-icon.wpdevart-header-inline-search, .wpdevart-header-inline-search { flex: 0 0 17.6% !important; width: 17.6% !important; margin-left: 0 !important; } } /* ==================== Primary nav — boxed red background ==================== */ /* The red box wraps only the ul of menu items, not the full flex area */ .navbar-wpdevart { padding: 0 !important; } @media (min-width: 960px) { /* Keep sub-menu white */ .navbar-wpdevart .dropdown-menu { background: #ffffff !important; border-radius: 0 0 6px 6px !important; box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important; margin-top: 6px; padding: 4px 0 !important; min-width: 200px; } .navbar-wpdevart .dropdown-menu a.wpdevart-sub-menu-link-color { color: #222 !important; } .navbar-wpdevart .dropdown-menu a.wpdevart-sub-menu-link-color:hover { color: #3A519C !important; } } /* ==================== Category mega menu — full-width dropdown ==================== */ /* Make bar the positioning context */ .wpdevart-category-mega-menu-bar { position: relative !important; } /* Items: static so dropdown is relative to the bar, not the li */ .wpdevart-cat-menu-item { position: static !important; } /* Override previous right-aligned rules — full-width cancels them */ .wpdevart-cat-menu-item:last-child .wpdevart-cat-dropdown-panel, .wpdevart-cat-menu-item:nth-last-child(2) .wpdevart-cat-dropdown-panel { left: 0 !important; right: 0 !important; border-radius: 0 0 8px 8px !important; } /* Full-width panel */ .wpdevart-cat-dropdown-panel { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; min-width: unset !important; border-radius: 0 0 8px 8px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important; } /* Inner wrapper: constrained to container width */ .wpdevart-cat-dropdown-fullwidth { max-width: 90%; margin: 0 auto; padding: 20px 28px; } /* ---- Category header (icon + title + desc) ---- */ .wpdevart-cat-dd-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; border-bottom: 2px solid #3A519C; padding-bottom: 10px; } .wpdevart-cat-dd-header-icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } .wpdevart-cat-dd-category-title { margin: 0 0 4px 0; font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #3A519C; } .wpdevart-cat-dd-category-title a { color: inherit; text-decoration: none; } .wpdevart-cat-dd-category-title a:hover { opacity: 0.8; } .wpdevart-cat-dd-category-desc { margin: 0; font-size: 12.5px; color: #666; line-height: 1.5; } /* ---- Product grid ---- */ .wpdevart-cat-dd-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .wpdevart-cat-dd-product { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: #222; border-bottom: 1px solid rgba(0,0,0,0.07); border-right: 1px solid rgba(0,0,0,0.07); transition: background 0.18s; } .wpdevart-cat-dd-product:hover { background: #f4f8f6; color: #3A519C; } .wpdevart-cat-dd-product-img { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #f0f0f0; border: 1px solid rgba(0,0,0,0.08); } .wpdevart-cat-dd-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .wpdevart-cat-dd-product-name { font-size: 12.5px; font-weight: 500; line-height: 1.35; color: inherit; } /* ---- View-all footer ---- */ .wpdevart-cat-dd-footer { padding-top: 14px; margin-top: 4px; text-align: right; } .wpdevart-cat-dd-view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #3A519C; text-decoration: none; border-bottom: 1.5px solid #3A519C; padding-bottom: 1px; transition: opacity 0.18s; } .wpdevart-cat-dd-view-all:hover { opacity: 0.7; } /* ---- Icon in menu trigger ---- */ .wpdevart-cat-item-icon { display: inline-flex; align-items: center; flex-shrink: 0; } .wpdevart-cat-item-icon img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(0); } /* On hover make icon match accent color */ .wpdevart-cat-menu-item:hover .wpdevart-cat-item-icon img, .wpdevart-cat-menu-item:focus-within .wpdevart-cat-item-icon img { filter: none; } /* Responsive: stack to 2 cols on tablet */ @media (max-width: 1100px) { .wpdevart-cat-dd-products { grid-template-columns: repeat(3, 1fr); } } /* ==================== Search icon toggle + full-width overlay ==================== */ /* --- Icon button in header --- */ .wpdevart-search-icon-area { display: flex; align-items: center; justify-content: center; flex: 0 0 15%; } .wpdevart-search-toggle-btn { background: none; border: none; cursor: pointer; color: #113F27; font-size: 20px; padding: 8px 14px; border-radius: var(--wpdevart-box-radius); transition: background 0.2s, color 0.2s; line-height: 1; display: flex; align-items: center; justify-content: center; } .wpdevart-search-toggle-btn:hover, .wpdevart-search-toggle-btn[aria-expanded="true"] { background: rgba(17, 63, 39, 0.08); color: #113F27; } /* --- Full-width overlay --- */ .wpdevart-search-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; display: none; flex-direction: column; } .wpdevart-search-overlay.wpdevart-search-open { display: flex; } /* --- White bar at top --- */ .wpdevart-search-overlay-bar { background: #ffffff; width: 100%; padding: 20px 40px; display: flex; align-items: center; gap: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.15); animation: wpdevartSearchSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; position: relative; z-index: 2; box-sizing: border-box; } /* AWS form inside overlay — full width */ .wpdevart-search-overlay-bar .aws-search-wrapper, .wpdevart-search-overlay-bar .aws-search-form-wrap, .wpdevart-search-overlay-bar .aws-container, .wpdevart-search-overlay-bar form { flex: 1 !important; width: 100% !important; max-width: 100% !important; } .wpdevart-search-overlay-bar .aws-search-field, .wpdevart-search-overlay-bar input[type="text"], .wpdevart-search-overlay-bar input[type="search"] { width: 100% !important; height: 52px !important; font-size: 17px !important; border: 2px solid #113F27 !important; border-radius: var(--wpdevart-box-radius) !important; padding: 0 20px !important; box-sizing: border-box !important; outline: none !important; } .wpdevart-search-overlay-bar .aws-search-field:focus, .wpdevart-search-overlay-bar input[type="text"]:focus, .wpdevart-search-overlay-bar input[type="search"]:focus { border-color: #3A519C !important; box-shadow: 0 0 0 3px rgba(226,18,55,0.12) !important; } .wpdevart-search-overlay-bar .aws-search-submit, .wpdevart-search-overlay-bar button[type="submit"] { height: 52px !important; padding: 0 20px !important; background: #113F27 !important; color: #fff !important; border: none !important; border-radius: var(--wpdevart-box-radius) !important; font-size: 15px !important; cursor: pointer !important; flex-shrink: 0 !important; transition: background 0.2s !important; } .wpdevart-search-overlay-bar .aws-search-submit:hover, .wpdevart-search-overlay-bar button[type="submit"]:hover { background: #3A519C !important; } .wpdevart-search-overlay-bar label.aws-search-label, .wpdevart-search-overlay-bar .aws-search-label { display: none !important; } .wpdevart-search-overlay-bar .aws-results-con { top: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; border-radius: 0 0 8px 8px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; } /* --- Close button --- */ .wpdevart-search-overlay-close { background: none; border: none; cursor: pointer; font-size: 22px; color: #666; padding: 8px 12px; flex-shrink: 0; border-radius: 50%; transition: background 0.2s, color 0.2s; line-height: 1; display: flex; align-items: center; justify-content: center; } .wpdevart-search-overlay-close:hover { background: rgba(17, 63, 39, 0.08); color: #113F27; } /* --- Semi-transparent backdrop --- */ .wpdevart-search-overlay-backdrop { flex: 1; background: rgba(0,0,0,0.45); cursor: pointer; animation: wpdevartSearchFadeIn 0.35s ease both; } /* --- Animations --- */ @keyframes wpdevartSearchSlideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes wpdevartSearchFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---- Social icons inline in main header (next to search toggle) ---- */ .wpdevart-search-icon-area { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 0 15%; } .wpdevart-header-social-inline { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .wpdevart-header-social-inline .wpdevart-social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: #113F27; font-size: 14px; border-radius: 50%; transition: background 0.2s, color 0.2s; text-decoration: none; } .wpdevart-header-social-inline .wpdevart-social-icons a:hover { background: rgba(17,63,39,0.1); color: #113F27; } /* Social icons block in main header — same red box as the menu */ .wpdevart-search-icon-area { background: #3A519C !important; border-radius: var(--wpdevart-box-radius) !important; display: inline-flex !important; align-items: center; flex-wrap: wrap; padding: 12px 10px !important; margin: 0 !important; width: auto !important; } /* ==================== Header 3-column row layout ==================== */ .wpdevart-header-row { display: flex; align-items: center; width: 100%; gap: 12px; padding: 0px; box-sizing: border-box; } .wpdevart-col-md-3 { flex: 0 0 10%; display: flex; align-items: center; } .wpdevart-col-md-6 { flex: 0 0 80%; display: flex; align-items: center; justify-content: center; } /* Red box applied to logo and menu columns */ .wpdevart-header-col-box { background: #3A519C !important; border-radius: var(--wpdevart-box-radius) !important; display: inline-flex !important; align-items: center; flex-wrap: wrap; padding: 26px 15px !important; margin: 0 !important; width: auto !important; } /* Menu col: the inner ul already has red — reset it to avoid double box */ .wpdevart-header-col-box--menu .navbar-wpdevart > ul { background: transparent !important; border-radius: 0 !important; padding: 0 !important; display: flex !important; } /* Logo text/image color inside red box */ .wpdevart-header-col-box .wpdevart-header-logo-spaces, .wpdevart-header-col-box .wpdevart-logo-text { margin: 0; line-height: 1; } .wpdevart-header-col-box .wpdevart-logo-text-simple { color: #ffffff !important; } /* Responsive: stack on mobile */ @media (max-width: 960px) { .wpdevart-header-row { flex-wrap: wrap; gap: 6px; padding: 0px; } .wpdevart-col-md-3, .wpdevart-col-md-6 { flex: 0 0 auto; } } /* ==================== OVERRIDE — header 3-col fix ==================== */ /* Reset conflicting search-icon-area rules */ .wpdevart-search-icon-area { flex: 0 0 auto !important; background: #3A519C !important; border-radius: var(--wpdevart-box-radius) !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 6px !important; padding: 26px 15px !important; margin: 0 !important; width: auto !important; justify-content: flex-start !important; } /* Social icons inside search area — horizontal row */ .wpdevart-search-icon-area .wpdevart-top-header-right-content { display: inline-flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; gap: 4px !important; background: transparent !important; padding: 0 !important; margin: 0 !important; width: auto !important; border-radius: 0 !important; } .wpdevart-search-icon-area .wpdevart-social-icons { display: inline-flex !important; align-items: center; } .wpdevart-search-icon-area .wpdevart-social-icons a { display: inline-flex !important; align-items: center; justify-content: center; width: 28px; height: 28px; color: #ffffff !important; font-size: 13px; text-decoration: none; border-radius: 50%; transition: background 0.2s; } .wpdevart-search-icon-area .wpdevart-social-icons a:hover { background: rgba(255,255,255,0.2); } /* Search toggle button — white inside red area */ .wpdevart-search-icon-area .wpdevart-search-toggle-btn { background: none !important; color: #ffffff !important; padding: 4px 8px !important; border-radius: var(--wpdevart-box-radius) !important; } .wpdevart-search-icon-area .wpdevart-search-toggle-btn:hover { background: rgba(255,255,255,0.2) !important; } /* Column proportions — 25 / 50 / 25 */ .wpdevart-header-row { display: flex !important; align-items: center !important; width: 100% !important; gap: 10px !important; padding: 0px !important; box-sizing: border-box !important; flex-wrap: nowrap !important; } .wpdevart-col-md-3 { display: flex; align-items: center; min-width: 0; } .wpdevart-col-md-6 { flex: 1 1 auto !important; display: flex; align-items: center; justify-content: center; min-width: 0; } /* Logo column — no red box */ .wpdevart-header-logo-wrapper { display: inline-flex; align-items: center; } .wpdevart-header-logo-wrapper .wpdevart-header-logo-spaces, .wpdevart-header-logo-wrapper .wpdevart-logo-text { margin: 0; line-height: 1; } /* Social + Search column — align to end */ .wpdevart-col-search { justify-content: flex-end !important; } /* ==================== Remove header container padding ==================== */ .wpdevart-header-container { padding: 6px 0px 6px 0px !important; } /* ==================== Full-screen search overlay ==================== */ .wpdevart-search-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 999999 !important; display: none !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; background: rgba(0, 0, 0, 0.75) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .wpdevart-search-overlay.wpdevart-search-open { display: flex !important; } /* Full-screen bar — centered in the overlay */ .wpdevart-search-overlay-bar { width: 90% !important; max-width: 780px !important; padding: 20px 24px !important; background: #ffffff !important; border-radius: var(--wpdevart-box-radius) !important; display: flex !important; align-items: center !important; gap: 12px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important; animation: wpdevartSearchSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) both !important; position: relative !important; z-index: 2 !important; box-sizing: border-box !important; } /* Remove the old backdrop div (full-screen bg replaces it) */ .wpdevart-search-overlay-backdrop { display: none !important; } /* Click outside = click on the overlay bg itself */ .wpdevart-search-overlay { cursor: pointer; } .wpdevart-search-overlay-bar { cursor: default; } /* ==================== Full-screen search — final consolidated rules ==================== */ #wpdevartSearchOverlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 9999999 !important; display: none !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; background: rgba(0,0,0,0.78) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; cursor: pointer !important; } #wpdevartSearchOverlay.wpdevart-search-open { display: flex !important; } #wpdevartSearchOverlay .wpdevart-search-overlay-bar { cursor: default !important; width: 90% !important; max-width: 800px !important; padding: 24px 28px !important; background: #ffffff !important; border-radius: var(--wpdevart-box-radius) !important; display: flex !important; align-items: center !important; gap: 12px !important; box-shadow: 0 24px 64px rgba(0,0,0,0.35) !important; animation: wpdevartSearchSlideDown 0.3s cubic-bezier(0.16,1,0.3,1) both !important; box-sizing: border-box !important; position: relative !important; } #wpdevartSearchOverlay .wpdevart-search-overlay-backdrop { display: none !important; } /* ==================== Category mega menu bar — row md-8 / md-4 ==================== */ .wpdevart-category-mega-menu-container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 12px !important; box-sizing: border-box !important; } .wpdevart-cat-col-md-9 { flex: 0 0 70%; min-width: 0; display: flex; align-items: center; } .wpdevart-cat-col-md-3 { flex: 0 0 30%; min-width: 0; display: flex; align-items: center; } /* AWS search form in md-4 */ .wpdevart-cat-col-md-3 .aws-search-wrapper, .wpdevart-cat-col-md-3 .aws-search-form-wrap, .wpdevart-cat-col-md-3 .aws-container, .wpdevart-cat-col-md-3 form { width: 100% !important; max-width: 100% !important; } .wpdevart-cat-col-md-3 .aws-search-field, .wpdevart-cat-col-md-3 input[type="text"], .wpdevart-cat-col-md-3 input[type="search"] { width: 100% !important; border: 1.5px solid rgba(17,63,39,0.25) !important; padding: 0 14px !important; font-size: 14px !important; box-sizing: border-box !important; outline: none !important; transition: border-color 0.2s !important; } .wpdevart-cat-col-md-3 .aws-search-field:focus, .wpdevart-cat-col-md-3 input[type="text"]:focus, .wpdevart-cat-col-md-3 input[type="search"]:focus { border-color: #113F27 !important; } .wpdevart-cat-col-md-3 .aws-search-submit, .wpdevart-cat-col-md-3 button[type="submit"] { height: 38px !important; background: #113F27 !important; color: #fff !important; border: none !important; border-radius: var(--wpdevart-box-radius) !important; padding: 0 16px !important; cursor: pointer !important; transition: background 0.2s !important; flex-shrink: 0 !important; } .wpdevart-cat-col-md-3 .aws-search-submit:hover, .wpdevart-cat-col-md-3 button[type="submit"]:hover { background: #3A519C !important; } .wpdevart-cat-col-md-3 label.aws-search-label, .wpdevart-cat-col-md-3 .aws-search-label { display: none !important; } /* ==================== Header layout-one — 3 columns (logo | menu | service) ==================== */ /* Remove the old red-box wrapper from the menu column */ .wpdevart-header-col-box { background: transparent !important; border-radius: 0 !important; padding: 0 !important; } /* Logo column — shrink-to-content */ .wpdevart-col-md-3 { flex: 0 0 auto !important; display: flex !important; align-items: center !important; min-width: 0; } /* Menu column — fills remaining space */ .wpdevart-col-md-6 { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0; } /* Service column — push to the right */ .wpdevart-col-service { justify-content: flex-end !important; } /* Centered nav inside the menu column */ .wpdevart-navbar-centered > ul { justify-content: center !important; } /* ===== SERVICE CLIENT block ===== */ .wpdevart-service-client-block { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .wpdevart-service-icon-circle { width: 52px; height: 52px; min-width: 52px; background: #3A519C; border-radius: 13%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wpdevart-service-icon-circle i { color: #ffffff; font-size: 22px; } .wpdevart-service-client-info { display: flex; flex-direction: column; line-height: 1.25; } .wpdevart-service-client-label { font-size: 14px; font-weight: 600; color: #555555; text-transform: uppercase; } .wpdevart-service-client-phone { font-size: 20px; font-weight: 700; color: #3A519C; } /* Hide service block on small screens to avoid overflow */ @media (max-width: 960px) { .wpdevart-col-service { display: none !important; } } /* ==================== Mobile / Tablet Header ==================== */ /* Hide #head-mobile on desktop (only relevant on mobile) */ @media (min-width: 961px) { #wpdevartmobilemenu #head-mobile { display: none !important; } } /* Mobile: hide desktop logo column, top-header bar; nav takes full width */ @media (max-width: 960px) { /* Hide duplicate desktop logo */ .wpdevart-desktop-logo-col { display: none !important; } /* Hide the thin top-header bar (email/social moved into drawer) */ .wpdevart-top-header { display: none !important; } /* Nav column stretches to full row width */ .wpdevart-header-row { flex-wrap: wrap !important; padding: 0 !important; } .wpdevart-col-md-6 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; } /* Nav itself full width */ #wpdevartmobilemenu { width: 100% !important; position: relative; } /* Mobile toolbar bar: logo left, hamburger right */ #wpdevartmobilemenu #head-mobile { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 16px !important; min-height: 60px !important; width: 100% !important; box-sizing: border-box !important; } /* Hamburger button: static inside the mobile toolbar flow */ .wpdevartmobilemenubutton { position: absolute !important; right: 12px !important; top: 7px !important; } } /* ==================== Mobile Drawer Extras ==================== */ /* Hidden everywhere by default — JS slideDown/slideUp controls visibility */ .wpdevart-mobile-drawer-extras { display: none; } /* On desktop, never show even if JS accidentally triggers */ @media (min-width: 961px) { .wpdevart-mobile-drawer-extras { display: none !important; } } /* Drawer section wrapper */ .wpdevart-mobile-drawer-section { padding: 14px 20px; border-top: 1px solid rgba(0, 0, 0, 0.08); } /* Section label */ .wpdevart-mobile-drawer-section-title { margin: 0 0 10px 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #999999; line-height: 1; } /* ---- Category menu in drawer ---- */ .wpdevart-mobile-cat-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } .wpdevart-mobile-cat-list li { list-style: none !important; margin: 0 !important; padding: 0 !important; border: none !important; } .wpdevart-mobile-cat-list li a { display: block; padding: 8px 0; font-size: 14px; color: inherit; text-decoration: none; border-bottom: none; transition: padding-left 0.15s ease; } .wpdevart-mobile-cat-list li a:hover { padding-left: 6px; } /* ---- Email row in drawer ---- */ .wpdevart-mobile-drawer-email { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: inherit; text-decoration: none; } .wpdevart-mobile-drawer-email:hover { text-decoration: underline; } .wpdevart-mobile-drawer-email i { font-size: 15px; flex-shrink: 0; } /* ---- Social icons row in drawer ---- */ .wpdevart-mobile-drawer-social { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .wpdevart-mobile-drawer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: inherit; font-size: 17px; text-decoration: none; transition: background 0.2s ease; } .wpdevart-mobile-drawer-social a:hover { background: rgba(0, 0, 0, 0.15); } /* Social section bottom spacing */ .wpdevart-mobile-drawer-section--social { padding-bottom: 20px; } /* ========================================================= MOBILE MENU — TABBED LAYOUT (Categories + Menu) ========================================================= */ /* Tab navigation bar */ .wpdevart-mobile-tabs-nav { display: flex; border-bottom: 2px solid rgba(0, 0, 0, 0.08); background: inherit; } .wpdevart-mobile-tab-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 10px; border: none; background: transparent; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; color: inherit; opacity: 0.55; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: opacity 0.2s ease, border-color 0.2s ease; } .wpdevart-mobile-tab-btn i { font-size: 14px; } .wpdevart-mobile-tab-btn.wpdevart-tab-active { opacity: 1; border-bottom-color: currentColor; } /* Tab panels */ .wpdevart-mobile-tab-panel { display: none; } .wpdevart-mobile-tab-panel.wpdevart-tab-panel-active { display: block; } /* ---- Category icon list (Tab 1) ---- */ .wpdevart-mobile-cat-icon-list { list-style: none !important; margin: 0 !important; padding: 0 !important; } .wpdevart-mobile-cat-icon-item { list-style: none !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.07); } .wpdevart-mobile-cat-icon-item:last-child { border-bottom: none; } .wpdevart-mobile-cat-icon-link { display: flex; align-items: center; gap: 14px; padding: 12px 20px; text-decoration: none; color: inherit; transition: background 0.15s ease; } .wpdevart-mobile-cat-icon-link:hover, .wpdevart-mobile-cat-icon-link:focus { background: rgba(0, 0, 0, 0.04); text-decoration: none; color: inherit; } /* Icon container: fixed square, mirrors desktop mega-menu icon style */ .wpdevart-mobile-cat-icon-img { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; background: #f8f8f8; overflow: hidden; } .wpdevart-mobile-cat-icon-img img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Placeholder icon (no image set) */ .wpdevart-mobile-cat-icon-placeholder { color: #999; font-size: 20px; } /* Category label */ .wpdevart-mobile-cat-icon-label { flex: 1; font-size: 14px; font-weight: 500; line-height: 1.3; } /* Right chevron */ .wpdevart-mobile-cat-icon-chevron { flex-shrink: 0; font-size: 14px; opacity: 0.4; } /* Active/current category highlight */ .wpdevart-mobile-cat-icon-item.current-menu-item .wpdevart-mobile-cat-icon-link { background: rgba(0, 0, 0, 0.05); } /* Hide the tab nav on desktop — drawer itself is already hidden there */ @media (min-width: 961px) { .wpdevart-mobile-tabs-nav { display: none !important; } } /* ---- Override: ULs inside the mobile drawer must be visible ---- The rule at #wpdevartmobilemenu ul { display:none } hides everything, but inside our drawer tabs the lists need to display normally. ---- */ @media screen and (max-width: 960px) { /* Category icon list (Tab 1) */ #wpdevartmobilemenu .wpdevart-mobile-cat-icon-list { display: block !important; } /* Primary menu top-level UL inside Tab 2 */ #wpdevartmobilemenu .wpdevart-mobile-tab-panel > ul { display: block !important; } /* Keep sub-menus (dropdown-menu) hidden — JS slideToggle controls them */ #wpdevartmobilemenu .wpdevart-mobile-drawer-extras .dropdown-menu { display: none !important; } /* Re-show when JS adds .open class via slideToggle */ #wpdevartmobilemenu .wpdevart-mobile-drawer-extras .dropdown-menu.open { display: block !important; } } /* ========================================================= MOBILE MENU — VISUAL IMPROVEMENTS ========================================================= */ /* 1. Drawer: solid opaque background + scroll cap */ .wpdevart-mobile-drawer-extras { background: #ffffff; border-top: 2px solid rgba(0, 0, 0, 0.06); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } /* ---- Full-viewport drawer on mobile ---- */ @media (max-width: 960px) { /* Drawer is always present in the DOM, positioned fixed below the toolbar, hidden off-canvas until .open is added. Uses transform for a smooth slide. --wpdevart-mobile-toolbar-h is set live by JS from the actual #head-mobile height, so the drawer always opens flush below the logo + hamburger row. */ .wpdevart-mobile-drawer-extras { display: flex !important; flex-direction: column; position: fixed !important; top: var(--wpdevart-mobile-toolbar-h, 60px); left: 0; right: 0; bottom: 0; width: 100% !important; height: calc(100vh - var(--wpdevart-mobile-toolbar-h, 60px)) !important; height: calc(100dvh - var(--wpdevart-mobile-toolbar-h, 60px)) !important; max-height: calc(100vh - var(--wpdevart-mobile-toolbar-h, 60px)) !important; max-height: calc(100dvh - var(--wpdevart-mobile-toolbar-h, 60px)) !important; overflow: hidden; z-index: 998; box-sizing: border-box; transform: translateY(-110%); visibility: hidden; opacity: 0; transition: transform 0.30s ease, opacity 0.25s ease, visibility 0.30s; pointer-events: none; } .wpdevart-mobile-drawer-extras.open { transform: translateY(0); visibility: visible; opacity: 1; pointer-events: auto; } /* Tabs bar stays pinned at the top of the drawer */ .wpdevart-mobile-drawer-extras .wpdevart-mobile-tabs-nav { flex-shrink: 0; position: static; } /* Only the active tab panel scrolls and fills the remaining height */ .wpdevart-mobile-drawer-extras .wpdevart-mobile-tab-panel { min-height: 0; } .wpdevart-mobile-drawer-extras .wpdevart-mobile-tab-panel.wpdevart-tab-panel-active { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Prevent body scrolling behind the open drawer */ body.wpdevart-mobile-drawer-open { overflow: hidden; } } /* 2. Tab bar — bolder active state, tighter layout */ .wpdevart-mobile-tabs-nav { position: sticky; top: 0; background: #ffffff; z-index: 2; border-bottom: 2px solid rgba(0, 0, 0, 0.08); } .wpdevart-mobile-tab-btn { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; padding: 14px 10px; color: #333; } .wpdevart-mobile-tab-btn i { font-size: 13px; } .wpdevart-mobile-tab-btn.wpdevart-tab-active { color: #3A519C; border-bottom-color: #3A519C; } /* 3. Category icon items — clean, spacious, borderless icons */ .wpdevart-mobile-cat-icon-list { padding: 0 !important; margin: 0 !important; background: #ffffff; } .wpdevart-mobile-cat-icon-item { border-bottom: 1px solid #ececec !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .wpdevart-mobile-cat-icon-item:last-child { border-bottom: none !important; } .wpdevart-mobile-cat-icon-link { display: flex !important; align-items: center; gap: 18px; padding: 18px 20px !important; color: #4a4a4a !important; text-decoration: none !important; font-family: inherit; transition: background 0.15s ease, color 0.15s ease; } .wpdevart-mobile-cat-icon-link:hover, .wpdevart-mobile-cat-icon-link:focus { background: #fafafa !important; color: #3A519C !important; text-decoration: none !important; } /* Icon: clean, no box / no border / no background — just the glyph */ .wpdevart-mobile-cat-icon-img { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible; padding: 0; } .wpdevart-mobile-cat-icon-img img { width: 100%; height: 100%; object-fit: contain; display: block; /* Render as monochrome outline-style icons to match the design */ filter: grayscale(100%) brightness(0.55) contrast(1.05); opacity: 0.85; transition: filter 0.15s ease, opacity 0.15s ease; } .wpdevart-mobile-cat-icon-link:hover .wpdevart-mobile-cat-icon-img img, .wpdevart-mobile-cat-icon-link:focus .wpdevart-mobile-cat-icon-img img { filter: none; opacity: 1; } .wpdevart-mobile-cat-icon-placeholder { color: #888 !important; font-size: 22px !important; background: transparent !important; border: 0 !important; } .wpdevart-mobile-cat-icon-label { flex: 1; font-size: 15px; font-family: inherit; font-weight: 500; color: inherit; line-height: 1.3; letter-spacing: 0.1px; } .wpdevart-mobile-cat-icon-chevron { flex-shrink: 0; color: #b5b5b5; font-size: 18px; opacity: 1; } .wpdevart-mobile-cat-icon-link:hover .wpdevart-mobile-cat-icon-chevron, .wpdevart-mobile-cat-icon-link:focus .wpdevart-mobile-cat-icon-chevron { color: #3A519C; } /* Active / current */ .wpdevart-mobile-cat-icon-item.current-menu-item .wpdevart-mobile-cat-icon-link { background: #fafafa !important; color: #3A519C !important; } .wpdevart-mobile-cat-icon-item.current-menu-item .wpdevart-mobile-cat-icon-img img { filter: none; opacity: 1; } /* 4. Primary menu items inside Tab 2 */ @media (max-width: 960px) { #wpdevartmobilemenu .wpdevart-mobile-tab-panel > ul > li { border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; margin: 0 !important; padding: 0 !important; } #wpdevartmobilemenu .wpdevart-mobile-tab-panel > ul > li > a.wpdevart-menu-items-color { display: block !important; padding: 15px 20px !important; font-size: 15px !important; font-weight: 500 !important; color: #222 !important; text-decoration: none !important; width: 100%; } #wpdevartmobilemenu .wpdevart-mobile-tab-panel > ul > li > a.wpdevart-menu-items-color:hover { color: #3A519C !important; background: #f7f7f7 !important; } /* Sub-menu toggle button inside Tab 2 */ #wpdevartmobilemenu .wpdevart-mobile-tab-panel .wpdevart-submenu-button { right: 12px !important; top: 8px !important; } } /* ========================================================= FIXES BUNDLE — Hover bridge, Back-to-top, Mobile Contact/Social/Search ========================================================= */ /* ---- 1) Category mega-menu hover bridge ---- The dropdown panel sat 1px below the menu item, so the cursor crossing that tiny gap lost :hover and the panel hid instantly. Fixes: - Sit the panel flush against the bar (top: 100%, no +1px gap) - Add a transparent ::before bridge above the panel (extra hover zone) - Delay the hide transition so a brief cursor wobble doesn't dismiss it */ .wpdevart-cat-dropdown-panel { top: 100% !important; transition-delay: 0.18s !important; } /* Force the panel to stay open whenever the cursor is on the trigger, on the panel itself, or anywhere focus-within the menu item. */ .wpdevart-cat-menu-item:hover .wpdevart-cat-dropdown-panel, .wpdevart-cat-menu-item:focus-within .wpdevart-cat-dropdown-panel, .wpdevart-cat-item-trigger:hover + .wpdevart-cat-dropdown-panel, .wpdevart-cat-item-trigger:hover ~ .wpdevart-cat-dropdown-panel, .wpdevart-cat-item-trigger:focus-within + .wpdevart-cat-dropdown-panel, .wpdevart-cat-dropdown-panel:hover { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; transition-delay: 0s !important; } /* Make the trigger itself a generous, reliable hover zone */ .wpdevart-cat-menu-item .wpdevart-cat-item-trigger { padding-bottom: 10px; position: relative; z-index: 2; } /* Hover bridge — invisible strip that fills the gap between the trigger and the panel so the cursor can travel between them without losing :hover */ .wpdevart-cat-dropdown-panel::before { content: ''; position: absolute; top: -24px; left: 0; right: 0; height: 24px; background: transparent; pointer-events: auto; } /* ---- 2) Back-to-top floating button ---- JS handler already exists in index.js (#wpdevart-back-to-top-button) */ #wpdevart-back-to-top-button { position: fixed; bottom: 28px; right: 24px; width: 46px; height: 46px; border-radius: 50%; background: #3A519C; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.25s ease, transform 0.25s ease,visibility 0.25s, background 0.2s ease; z-index: 9999; border: 0; cursor: pointer; } #wpdevart-back-to-top-button:hover, #wpdevart-back-to-top-button:focus { background: #F5C718; color: #ffffff; text-decoration: none; outline: none; } #wpdevart-back-to-top-button.show { opacity: 1; visibility: visible; transform: translateY(0); } #wpdevart-back-to-top-button i { pointer-events: none; } @media (max-width: 600px) { #wpdevart-back-to-top-button { width: 42px; height: 42px; bottom: 22px; right: 18px; font-size: 18px; } } /* ---- 3) Mobile drawer — Contact phone rows ---- */ .wpdevart-mobile-drawer-phone { display: flex; align-items: center; color: #333333; text-decoration: none; font-size: 15px; font-family: inherit; margin: 15px 0 15px 0; } .wpdevart-mobile-drawer-phone + .wpdevart-mobile-drawer-phone { margin-top: 2px; } .wpdevart-mobile-drawer-phone i { width: 22px; text-align: center; color: #888; font-size: 14px; } .wpdevart-mobile-drawer-phone:hover, .wpdevart-mobile-drawer-phone:focus { color: #3A519C; text-decoration: none; } .wpdevart-mobile-drawer-phone:hover i, .wpdevart-mobile-drawer-phone:focus i { color: #3A519C; } /* ---- 4) Mobile drawer — Suivez-nous icons via .wpdevart-top-header-right-content ---- Reuses the same brand-aware .wpdevart-social-icons rendering as the top header. */ .wpdevart-mobile-drawer-section--social .wpdevart-top-header-right-content { display: flex; flex-wrap: wrap; align-items: center; padding: 0; } /* ---- 5) Mobile drawer — AWS search form ---- Sits above the tabs so it's accessible from both Catégories and Menu. */ .wpdevart-mobile-drawer-search { padding: 12px 16px; background: #ffffff; border-bottom: 1px solid #ececec; flex-shrink: 0; } .wpdevart-mobile-drawer-search .aws-container, .wpdevart-mobile-drawer-search .aws-search-form, .wpdevart-mobile-drawer-search form { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* ---- 6) Mobile header logo ---- Force the site logo to show in the mobile toolbar (#head-mobile): logo on the left, hamburger button on the right. Handles both the custom logo image and the text fallback. */ @media (max-width: 960px) { #wpdevartmobilemenu #head-mobile { display: flex !important; align-items: center !important; justify-content: space-between !important; } #wpdevartmobilemenu #head-mobile .wpdevart-mobile-toolbar-logo { display: flex !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: calc(100% - 56px) !important; /* keep room for the hamburger */ } #wpdevartmobilemenu #head-mobile .wpdevart-mobile-toolbar-logo a, #wpdevartmobilemenu #head-mobile .wpdevart-mobile-toolbar-logo .custom-logo-link { display: inline-flex !important; align-items: center !important; line-height: 0 !important; } #wpdevartmobilemenu #head-mobile .wpdevart-mobile-toolbar-logo img, #wpdevartmobilemenu #head-mobile .wpdevart-mobile-toolbar-logo .custom-logo { display: block !important; width: auto !important; height: auto !important; max-height: 44px !important; visibility: visible !important; opacity: 1 !important; } #wpdevartmobilemenu #head-mobile .wpdevart-mobile-logo-text { display: inline-block !important; } } /* ---- 7) Mega menu — related pages/articles cards ---- */ .wpdevart-cat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 4px; } .wpdevart-cat-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .wpdevart-cat-card-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #eef1f4; margin-bottom: 14px; } .wpdevart-cat-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .wpdevart-cat-card:hover .wpdevart-cat-card-thumb img { transform: scale(1.05); } .wpdevart-cat-card-body { display: flex; flex-direction: column; flex: 1 1 auto; } .wpdevart-cat-card-title { font-size: 16px; font-weight: 700; line-height: 1.35; color: #1f2a37; margin: 0 0 7px; } .wpdevart-cat-card:hover .wpdevart-cat-card-title { color: #3A519C; } .wpdevart-cat-card-desc { font-size: 13px; line-height: 1.6; color: #5b6470; margin: 0 0 12px; } .wpdevart-cat-card-more { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #3A519C; margin-top: auto; } .wpdevart-cat-card-more i { transition: transform 0.2s ease; } .wpdevart-cat-card:hover .wpdevart-cat-card-more i { transform: translateX(4px); } @media (max-width: 1100px) { .wpdevart-cat-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 700px) { .wpdevart-cat-cards { grid-template-columns: 1fr; } } /* ---- 8) Mega menu dropdown — compact, centered under the tab + connector ---- */ .wpdevart-category-mega-menu-bar .wpdevart-cat-menu-item { position: relative !important; } /* Compact panel, centered horizontally on the tab — applies to EVERY item (high specificity beats the theme's old :nth-last-child special rules, so the last item gets no special treatment). */ .wpdevart-category-mega-menu-bar .wpdevart-cat-menu-list .wpdevart-cat-menu-item .wpdevart-cat-dropdown-panel { left: 50% !important; right: auto !important; margin-left: -170px !important; /* half of width -> centered on the tab */ width: 340px !important; min-width: 0 !important; max-width: 340px !important; margin-top: 11px !important; /* gap that holds the connector */ overflow: visible !important; /* let the caret show above the panel */ border-radius: 8px !important; border: 1px solid rgba(0,0,0,0.08) !important; } /* Upward caret connecting the dropdown to the active tab */ .wpdevart-category-mega-menu-bar .wpdevart-cat-dropdown-panel::after { content: ''; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; background: #ffffff; border-top: 1px solid rgba(0,0,0,0.10); border-left: 1px solid rgba(0,0,0,0.10); transform: translateX(-50%) rotate(45deg); z-index: 2; } .wpdevart-category-mega-menu-bar .wpdevart-cat-dropdown-fullwidth { max-width: 100% !important; margin: 0 !important; padding: 18px !important; } .wpdevart-category-mega-menu-bar .wpdevart-cat-cards { grid-template-columns: 1fr !important; gap: 0 !important; } /* ------------------------------------------Breadcrumbs nav wrapper (user friendly)------------------------------------------ */ .wpdevart-breadcrumbs-nav { margin-top: 12px; } .wpdevart-breadcrumbs-nav .wpdevart-breadcrumbs-single-page { margin: 0; } /* ------------------------------------------Mobile drawer: full-screen, no tabs------------------------------------------ */ /* Tabs were removed in favour of a single scrollable column: Main menu first, then Categories, then Contact + Social. */ .wpdevart-mobile-tabs-nav { display: none !important; } .wpdevart-mobile-drawer-block-title { display: block; margin: 0; padding: 14px 20px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: rgba(0, 0, 0, 0.04); border-bottom: 1px solid rgba(0, 0, 0, 0.08); } /* Clear separation between the Menu block and the Categories block. */ .wpdevart-mobile-drawer-block + .wpdevart-mobile-drawer-block { border-top: 6px solid rgba(0, 0, 0, 0.06); } @media (max-width: 960px) { /* The whole drawer scrolls as one column instead of a single active panel. */ .wpdevart-mobile-drawer-extras { overflow-y: auto !important; -webkit-overflow-scrolling: touch; } /* Every block is visible and keeps its natural height (no flex:1 / per-panel scroll). */ .wpdevart-mobile-drawer-extras .wpdevart-mobile-tab-panel, .wpdevart-mobile-drawer-extras .wpdevart-mobile-tab-panel.wpdevart-tab-panel-active { display: block !important; flex: 0 0 auto !important; min-height: 0; overflow: visible !important; } } /* ------------------------------------------Mobile layout hardening (no horizontal overflow)------------------------------------------ */ /* Prevents a single too-wide element from expanding the layout viewport, which squeezes the page into a narrow column with empty space beside it. */ html { overflow-x: hidden; max-width: 100%; } @media (max-width: 960px) { html, body { overflow-x: hidden; max-width: 100%; } /* Long words / titles wrap instead of overflowing and being clipped. */ .wpdevart-banner-title, .wpdevart-banner-short-text, .wpdevart-banner-content, .sliding-text li, .page-banner__title, .post-banner__title, .archive-banner__title, .search-banner__title { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; max-width: 100%; } /* The mobile nav and its drawer can never exceed the screen width. */ #wpdevartmobilemenu, .wpdevart-mobile-drawer-extras { max-width: 100% !important; } .wpdevart-mobile-drawer-extras { overflow-x: hidden !important; } .wpdevart-mobile-drawer-extras .wpdevart-mobile-tab-panel > ul, .wpdevart-mobile-cat-icon-list, .wpdevart-mobile-drawer-section { max-width: 100%; box-sizing: border-box; } .wpdevart-mobile-tab-panel a, .wpdevart-mobile-cat-icon-label { overflow-wrap: break-word; word-wrap: break-word; } } /* ============================================================ MOBILE MENU REDESIGN — full-screen overlay - Slides in from the right, covers the whole viewport - Sticky header with logo + dedicated close (X) button - Larger touch targets, clean scrolling ============================================================ */ .wpdevart-mobile-drawer-header { display: none; } @media (max-width: 960px) { /* Full-screen overlay (covers the toolbar too; close via the X button) */ .wpdevart-mobile-drawer-extras { top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s; z-index: 99999; } .wpdevart-mobile-drawer-extras.open { transform: translateX(0); } /* Sticky header inside the overlay */ .wpdevart-mobile-drawer-header { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; position: sticky; top: 0; z-index: 3; padding: 12px 18px; min-height: 60px; box-sizing: border-box; background: inherit; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .wpdevart-mobile-drawer-logo { display: inline-flex; align-items: center; font-size: 20px; font-weight: 700; text-decoration: none; color: inherit; } .wpdevart-mobile-drawer-logo img { max-height: 40px; width: auto; } .wpdevart-mobile-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: inherit; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .wpdevart-mobile-drawer-close:hover, .wpdevart-mobile-drawer-close:focus { background: rgba(0, 0, 0, 0.12); transform: rotate(90deg); } /* Bigger, finger-friendly menu rows */ #wpdevartmobilemenu .wpdevart-mobile-tab-panel > ul > li > a, #wpdevartmobilemenu .wpdevart-mobile-tab-panel > ul > li > a.wpdevart-menu-items-color { display: block; padding: 16px 20px !important; font-size: 16px !important; } .wpdevart-mobile-cat-icon-link { padding: 14px 20px !important; } /* Submenu toggle button: larger tap area */ #wpdevartmobilemenu .wpdevart-mobile-drawer-extras .wpdevart-submenu-button { width: 52px !important; height: 52px !important; } } /* ------------------------------------------Mobile drawer: fix overlap (Contact/Social vs Categories)------------------------------------------ */ /* The drawer is a fixed-height flex column. Its direct children must NOT flex-shrink, otherwise sections (Contact, Suivez-nous) get compressed below their content height and visually overlap the blocks above them. Forcing flex:0 0 auto on every child keeps natural heights and lets the drawer scroll. */ @media (max-width: 960px) { .wpdevart-mobile-drawer-extras > * { flex: 0 0 auto !important; min-height: 0; } } /* ============================================================ MOBILE DRAWER — TAB BEHAVIOR (Menu / Services) — authoritative Overrides the earlier "stacked / show-both-panels" rules. Layout: fixed header + fixed tabs bar; only the active panel is visible and it scrolls. One panel at a time = no overlap. ============================================================ */ @media (max-width: 960px) { /* The drawer itself does not scroll; the active panel does. */ .wpdevart-mobile-drawer-extras { overflow: hidden !important; } /* Header + tabs bar stay fixed at the top of the overlay. */ .wpdevart-mobile-drawer-header, .wpdevart-mobile-drawer-extras .wpdevart-mobile-tabs-nav { flex: 0 0 auto !important; } /* Tabs are visible on mobile (overrides earlier display:none). */ .wpdevart-mobile-drawer-extras .wpdevart-mobile-tabs-nav { display: flex !important; } /* Only the active tab panel shows; it fills the remaining height and scrolls. */ .wpdevart-mobile-drawer-extras .wpdevart-mobile-tab-panel { display: none !important; flex: 1 1 auto !important; } .wpdevart-mobile-drawer-extras .wpdevart-mobile-tab-panel.wpdevart-tab-panel-active { display: block !important; flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; min-height: 0; } } /* ============================================================ MOBILE DRAWER — fix Contact/Social overlap + header logo Root cause: .wpdevart-top-header-right-content {float:right} and .wpdevart-social-icons {float:left} are top-header styles that leaked into the drawer, dropping those elements out of flow so the Contact / Suivez-nous block overlapped the Services list. Neutralise all floats inside the drawer and lay the social icons out as a clean flex row. ============================================================ */ @media (max-width: 960px) { .wpdevart-mobile-drawer-extras * { float: none !important; } .wpdevart-mobile-drawer-extras .wpdevart-top-header-right-content { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; width: auto !important; } .wpdevart-mobile-drawer-extras .wpdevart-social-icons { display: inline-flex !important; margin: 0 !important; } /* Drawer header: site logo on the left, stays on top, never overlapped */ .wpdevart-mobile-drawer-header { position: relative; z-index: 5; } .wpdevart-mobile-drawer-logo { display: inline-flex !important; align-items: center; max-width: calc(100% - 60px); } .wpdevart-mobile-drawer-logo img, .wpdevart-mobile-drawer-logo .custom-logo { display: block; max-height: 42px; width: auto; height: auto; } }