/*
Theme Name: Extendable-child
Theme URI: https://github.com/extendify/extendable
Author: Extendify
Author URI: https://extendify.com
Description: A Child Theme of the Extendable Theme
Template: extendable
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 7.4
Version: 2.0.15
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: extendable
Tags: one-column, custom-colors, custom-menu, custom-logo, e-commerce, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments

Extendable is a derivative work of the code from the
Twenty Twenty-Two WordPress Theme, which is licensed GPLv2.

Extendable WordPress Theme, (C) 2022 Extendify Inc.
Extendable therefore is also distributed under the terms of the GNU GPL.
*/


/* Fallback for deprecate variables.
---------------------------------------------------------------------------- */

.pos-relative{
	position: relative;
}
.dis-inline-block{
	display: inline-block;
}
.hover-underline,
.hover-underline > a{
	text-decoration: none;
}
.hover-underline:hover,
.hover-underline > a:hover {
	text-decoration: underline;
}
.make-inline{display:inline;}
.opacity-class{
	opacity: 0.7;
}
body.not-logged .hide-for-now{
	display: none;
}
.my-gradient{
	background: linear-gradient(45deg, #b90202, #f4883b);
}

/* Hidden things */
body.home div.cl-pagination,
body ul.wp-block-social-links,
body.page-id-266 header,
body.page-id-266 footer,
body.page-id-296 header,
body.page-id-296 footer {
    display: none;
}

*[id] {scroll-margin-top: 50px;}

body.not-logged div.right.light-back-filter {z-index: 1;} /* Must set the parent so that the psudo z-index can work. */
body.not-logged div.right.light-back-filter::after {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 0;
	/* left: 0; */
	background-color: #FFFFFF;
	opacity: 0.5;
    z-index: -1; 
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    width: 50%;
    right: 0px;
}
body.not-logged div.contact-form.dark-back-filter {z-index: 1;} /* Must set the parent so that the psudo z-index can work. */
body.not-logged div.contact-form.dark-back-filter::after {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 0;
	left: 0;
	background-color: #000000;
	opacity: 0.5;
    z-index: -1; 
}
body.not-logged div.z-index--2 > video {z-index: -2; }
body.not-logged .dark-back-filter-outer-parent > div > div { z-index: 1; min-height: 250px;} /* for the blog list, as classid field appears not to work */
body.not-logged .dark-back-filter-outer-parent > div > div::after {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 0;
	left: 0;
	background-color: #000000;
	opacity: 0.5;
    z-index: -1; 
}
body.not-logged .dark-back-filter-outer-parent .position-left-bottom{ position: absolute; bottom: 5px; left: 5px;}
body.not-logged .cl-pagination { padding-top: 15px; } /* Pagnation under blog list */
body.not-logged div.cl-pagination > a.page-numbers,
body.not-logged div.cl-pagination > a.next.page-numbers { color: #A48F28 !important; }

/* parallax Starts  */
.parallax-effect {
  background: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.jarallax {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* This is the key */
    z-index: -1;
}

.jarallax-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -100;
}
.jarallax-child {
    background-position: 50% 50%; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-image: url(https://arrowsaint.com/assets/images/it-security-9-2000x1125.jpg); 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 1211px; 
    height: 648.991px; 
    overflow: hidden; 
    pointer-events: none; 
    margin-top: 174.005px; 
    transform: translate3d(0px, 23.7891px, 0px);
}
/* parallax Ends  */


body {
    line-height: 1.3;
}
body.wp-singular.post-template-default.single.single-post.not-logged .blog-header { /* Blog posts only */

}
.wpcf7 input:where(:not([type="submit"]):not([type="checkbox"])), .wpcf7 textarea {
    padding: calc(0.667em + 1px);
    width: 100%;
    background-color: #FFFFFF;
    color: #000000;
}

.smooth-back-to-top-button.active-progress {
    opacity: 0.6;
}
/* Wordpress email sent notification */
body.page-id-14 div.wpcf7-response-output {
    color: #ffffff;
    opacity: 0.5;
}
/* The main logo */
body > div > header > div > div > div.wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-2.wp-block-group-is-layout-flex > div.wp-block-site-logo > a > img {
	transition height 3s, width 3s;
}
header .wp-block-site-logo.is-default-size img {
    max-height: 45px !important;
    height: auto !important;
    width: auto !important;
}
header .logo-mobile-height {
	height: 42px !important;
	width: auto !important;;
    position: relative;
}
footer .wp-block-site-logo.is-default-size img {
    max-height: 100% !important;
}

/* Transparency behind the Hero text */
body.home #wp--skip-link--target > div
> div > div > div > div >div.add-trans-background { /* add the class 'add-trans-background' to the element that you want to work with. */
    z-index: 3; /* psudo parent element must have z-index setting to set psudo elment z-index order */
}
body.home #wp--skip-link--target > div
> div > div > div > div >div.add-trans-background::before
{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 0;
	left: 0;
	background-color: #000000;
	opacity: 0.3;
    z-index: -1; 
} 

/* Trick menu starts */
body > div.wp-site-blocks > header > div {
    height: 72px;
    position: fixed;
    top: 0;
    transition: top 0.3s ease-in-out;
    width: 100%;
}
.nav-up {
    top: -72px !important;
}

body > div.wp-site-blocks > header > div::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0px;
	/* background-color: #000000; */
	opacity: 0.3;
	z-index: -1;
}
body > div.wp-site-blocks > header > div.nav-down::before {
    opacity: 0.4;
}
/* Set the padding on the header button */
body > div > header > div > div > div.wp-block-buttons.is-layout-flex.wp-block-buttons-is-layout-flex > div > a {
    padding: 8px;
}
/* The off-canvas menu background */
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
    width: 70%;
    min-width: 300px;
    border-right: solid 1px #000;
    /* box-shadow: 10px 10px 5px 12px #333; */
}
.wp-block-navigation__responsive-container.is-menu-open.is-menu-open a > span {
    font-size: 20px; /* larger text size on the mobile menu */
}
nav ul > li.wp-block-navigation-item.current-menu-item.wp-block-navigation-link a span {
    text-decoration: underline;
    font-weight: bold;
}
#modal-1-content > ul > li.wp-block-navigation-item.has-child.open-on-hover-click.wp-block-navigation-submenu > ul > li {
    padding-bottom: 10px; /* increase the gap betwen menu items on the sub menus */
}

/* 1. Force the mobile hamburger button to display below your custom width */
@media (max-width: 940px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }
}

/* 2. Hide the default horizontal desktop menu below your custom width */
@media (max-width: 940px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }
}

/* 3. Reset and fix default WordPress behavior on larger screens */
@media (min-width: 941px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default) {
        display: block !important;
    }
}
/* Trick menu ends */

.base-bottom {
    margin: 0;
    position: absolute;
    left: 8px;
    bottom: 30px;
}
.base-bottom > a {
    padding: 0;
}

h1.wp-block-site-title > a,
body > div.wp-site-blocks > header > div {
	/* color: #FFF; */
}
body.not-logged .trans-background{
	z-index: -1;
	opacity: 0.7;
    height: 100%;
    width: 100%;
    position: absolute;
	background-color: #000000 !important;
}
body.not-logged header div.trans-sticky-menu{
    position:absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    max-width: 100%;
    width:100%;
    height:100%;

}

body.not-logged header div.trans-nav-background{
    display: block;
	opacity: 0.7;
	background-color: #000000 !important;
}
body.page-template main{ /* necessary with transparent menue */
	/* margin-top: -0px !important;
	padding-top: -0px !important; */
}
body.home main{
/* 	margin-top: -120px !important; */
}

header{
	position: relative;
    margin-top: 0px;
    z-index: 500;
}
header > div {
	padding: 15px !important;
}

body.not-logged header > div > 
div.wp-block-group.alignwide.is-content-justification-space-between.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-4.wp-block-group-is-layout-flex{
	margin-top: 0px;
}



#wp--skip-link--target > div > div.wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained 
> div > div > div.wp-block-group.pos-relative.is-content-justification-center.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-8.wp-block-group-is-layout-flex 
> div > div.wp-block-columns.alignwide.is-layout-flex.wp-container-core-columns-is-layout-3.wp-block-columns-is-layout-flex 
> div > div.wp-block-columns.alignwide.pos-relative.is-layout-flex.wp-container-core-columns-is-layout-2.wp-block-columns-is-layout-flex 
> div > div > div.wp-block-column.is-vertically-aligned-center.pos-relative.is-layout-flow.wp-container-core-column-is-layout-1.wp-block-column-is-layout-flow 
> h3{
	margin-left: 30px;
}

/* Font Awesome Icons on Hero Area */
.main-points-row.dark-background .group-heading-row h2,
.main-points-row.dark-background .group-heading-row  p {
	color: #FFF !important;
}
.main-points-row div.wp-block-group.services-font-awesome-group {
	margin-top: -85px !important;
}

div.services-font-awsome-icons-row > div > div.services-font-awesome-group div.font-awesome-icon-div {
	position: relative;
    z-index: 100;
    width: 120px;
    height: 120px;
    border: solid 1px #ad390c;
    border-radius: 50%;
}
div.services-font-awsome-icons-row > div > div.services-font-awesome-group > div svg {
  	margin: 0;
  	position: absolute;
  	top: 50%;
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
/* 	font-size: 3.5em; */
}

div.services-font-awsome-icons-row 
> div > div > div.wp-block-group.font-awesome-icon-div figure{
	text-align: center; /* if using an image, this centers the image */
}
div.services-font-awsome-icons-row 
> div > div > div.wp-block-group.font-awesome-icon-div figure img{
	margin-top: 5px;
}


/* Details Block */
/* Add a custom transition when opening/closing. */
.wp-block-details {
	transition: all 0.5s ease-in-out;
}

/* Add horizontal margin to nested blocks/elements. */
.wp-block-details > :where( :not( summary ) ) {
	margin-left: 2rem;
	margin-right: 2rem;
}

/* If open, add some bottom padding to avoid content butting against the bottom. */
.wp-block-details[open] {
	padding-bottom: 2rem;
}
/* Base `summary` element styling. */
.wp-block-details summary {
	transition: all 0.5s ease-in-out;
	box-sizing: border-box;
	padding: 1rem;
	font-weight: 500;
}

/* Change the background of the `summary` element based on state. */
.wp-block-details[open] summary,
.wp-block-details summary:hover,
.wp-block-details summary:focus {
/* 	background: #32322d; */
}

/* Referrals tweeks */
div.ti-review-header {
    background-color: #A89F84;
    padding-bottom: 4px !important;
    border-radius: 4px;
}

/* Untested Below */
/* Phone number column on menus*/
div.u_1711478356.dmRespCol{
    width:175px;
}
.email-icon,
.location-icon,
.phone-icon{
    max-width:35px;
    width: 28px;
    height: 28px;
    display:inline-block;
    vertical-align: middle;
	margin-right: 20px;
}
div.u_1232671919.graphicWidget{
    width: calc(100% - 0px) !important;
  height: 28px !important;
  /* display: block !important; */
  float: none !important;
  top: 0 !important;
  left: 0 !important;
  position: relative !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
  /* margin-right: 162px !important; */
  margin-left: 0 !important;
  max-width: 28px !important;
  margin-top: 5px !important;
  margin-bottom: 10px !important;
  padding-right: 0 !important;
  min-width: 25px !important;
  text-align: center !important;
  display: inline-block;
  vertical-align: middle;
}


.trans-button{
	background: transparent none !important;
    border-color: currentColor !important;
    border-width: 2px !important;
    border-style: solid !important;
    color: currentColor !important;
    padding-top: 0.667em !important;
    padding-right: 1.33em !important;
    padding-bottom: 0.667em !important;
    padding-left: 1.33em !important;
}
#wpforms-submit-163{ width: 100%;}
/* @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
} */

/* Map Iframe*/
#contact_us_map { 
    border: none;  
    width: 100%;
    height: 100%;
    max-height: 690px;
    border: none;
    min-height:280px;
}
/* Main Points Rows */
div.main-points-row {
    padding-bottom: 40px !important;
}
div.main-points-row.dark-background {
	background-color: #999 !important;
}

/* Adding Google Fonts Stargs*/ /*
body {
     font-family: Open Sans;
    font-weight: 300;
    font-size: 16px;
}
body h1 {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 300;
    font-size: 3.375em;
    line-height: 1.26;
}
body .h-lead p {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 300;
    font-size: 1.25em;
    line-height: 1.5;
}
body .h-lead p {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 300;
    font-size: 1.25em;
    line-height: 1.5;
}
body p {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
}
body h2 {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 300;
    font-size: 2.7em;
    line-height: 1.55;
}
body h3 {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 600;
    font-size: 2.5em;
    line-height: 1.55;
}
body h5 {
    margin-bottom: 16px;
    font-family: Open Sans;
    font-weight: 600;
    font-size: 1.125em;
    line-height: 1.55;
} */
/* Adding Google Fonts Ends */

footer {
    background: #2a5046;
    background: linear-gradient(0deg, rgb(7 48 47) 0%, rgb(0 3 8) 100%);
}
footer nav ul > li.wp-block-navigation-item.has-child.open-on-hover-click.wp-block-navigation-submenu 
> ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu > li > a {
    color:#000;
}
/* Hide the footer hambur */
body > div > footer > div 
> div.wp-block-group.alignwide.has-global-padding.is-content-justification-center.is-layout-constrained.wp-block-group-is-layout-constrained 
> div > div > div:nth-child(2) > nav > button {
    display:none;
}

ul.wp-block-latest-posts__list.arrow-blog-list > li a.wp-block-latest-posts__post-title {
    font-weight: bold;
}

footer .arrow-flex-to-inline-block > div:nth-child(2) { /* force the second phone div wide */
    flex-basis: 100%;
    width: 100%;
}

/* Animations not working, had to reset from base extensible theme */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.2s !important;
    }
}

@media screen and (max-width: 1400px) {

}
@media screen and (max-width: 1200px) {

}
@media screen and (min-width: 1135px) {

}
@media screen and (max-width: 992px) {

}
@media screen and (min-width: 450px) and (max-width: 783px) {

    /* .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.arrow-4-cols { */

    .wp-block-columns.arrow-4-cols  {  
        gap: unset;
    }
    .wp-block-columns.arrow-flex-4-cols > div.wp-block-column {    
        /* flex-grow: 1;
        flex-basis: 0;
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
        flex-shrink: 0; */
        flex-basis: 49% !important;
    }
}
@media screen and (max-width: 890px) {
    body.not-logged div.right.light-back-filter::after {
        width: 100%;
        display: none;
    }
    .wp-block-navigation__responsive-container-open {
        display: flex !important; /* Forces hamburger to show on smaller screens */
    }

}

@media screen and (max-width: 575px) {

    ul.wp-block-latest-posts__list.arrow-blog-list > li {
        margin-bottom: 40px;
    }
}
@media screen and (max-width: 530px) {
    .arrow-top-footer-column {

    }


}

@media screen and (max-width: 450px) {
    /* Hide the logo making room for the menu */ 
    /* body > div > header > div > div 
	> div.wp-block-group.is-nowrap.is-layout-flex.wp-container-core-group-is-layout-2.wp-block-group-is-layout-flex 
	> div.wp-block-site-logo {
        display:none;
    } */

}

@media screen and (max-width: 400px) {
    footer .arrow-top-footer-column {
        padding-left: 0px;
        padding-right: 0px;
    }
    footer .arrow-footer-row.arrow-flex-3-cols > div.wp-block-group{
        flex-basis: 100% !important;
    }
    footer .arrow-flex-to-inline-block > div {
        display: inline-block;
    }
    footer .arrow-flex-to-inline-block > div img {
        max-width: 100%;
    }
}