/*
Author: Aky Joe
Company: TheCreatology
Client: PNR Apparels Pvt. Ltd.
*/

:root {
    --animate-duration: 600ms;
    --navbar-height: 109px;
    --navbar-margin: 0px;
    --navbar-top-scrolled: -5px;
    --navbar-toggle-top: 25px;
    --navbar-toggle-size: 24px;
    --navbar-submenu-width: 220px;
    --navbar-box-shadow: 0px 10px 5px #0004;
    --primary-green: #729c1a;
    --primary-pink: #dd0048;
    --primary-link-colour: #729c1a;
    --primary-light-colour: #80ae1f;
    --primary-dark-colour: #6e9a10;
    --muted-bg-pink: #f7e9e9;
    --muted-bg-green: #e9ecf7;
    --muted-color: #888;
    --font-body: 'Open Sans', sans-serif;
    --font-head: 'Open Sans', sans-serif;
    --font-icon: 'joe-icon';
    --logo-height: 45px;
    --logo-width: 75px;
    --logo-sm-height: 30px;
    --logo-sm-width: 50px;
    --border-muted-color: #eee;
    --border-radius: 8px;
    --main-slide-height: calc(100vh);
    --page-header-height: calc(22vh + var(--navbar-height));
    --main-slide-content-width: 70%;
    --page-header-content-width: 75%;
    --main-slide-tint-color: transparent;
    --main-slide-tint-color-hover: transparent;
    --main-slide-transition-duration: 800ms;
    --main-slide-transition-delay: 500ms;
    --main-slide-content-spacing: 1.5rem;
    --who-we-are-height: 293px;
    --feat-boxes-border: 104px;
    --huge-font-size: 5.625rem;
    --large-font-size: 3rem;
    --medium-font-size: 1.375rem;
    --medium-2-font-size: 1.125rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.85rem;
    --tools-dash-icon-width: 55px;
    --tools-dash-icon-margin: 75px;
    --tools-box-icon-size: 60px;
    --tools-box-icon-small-size: 30px;
}
body.mask{
    font-family: var(--font-body);
    font-weight: 300;
    padding-top: 0;
}
body.mask *:not(:first-child){
    opacity: 0;
}
body.mask.loaded *:not(:first-child){
    opacity: 1;
}
/* Background Colours */
.bg-primary-green{
    background-color: var(--primary-green) !important;
}
.bg-light-green{
    background-color: var(--primary-light-colour);
}
.bg-dark-green{
    background-color: var(--primary-dark-colour);
}
.bg-trans-white{
    background-color: #fff7 !important;
}
/* Colours */
.text-white{
    color: white !important;
}
.contact-info.small.color-pink:before,
.list-check-mark.color-pink li:before,
.list-buttons.color-pink li a:after,
.text-pink{
    color: var(--primary-pink) !important;
}
.contact-info.small.color-green:before,
.list-check-mark.color-green li a:after,
.list-buttons.color-green li a:after,
.text-green{
    color: var(--primary-green) !important;
}
.mask .bg-dark a,
.mask .bg-dark .page-link,
.mask .bg-dark .card-title:hover a,
.link-green-dark{
    color: var(--primary-dark-colour);
}
/* Typography */
.font-primary{
    font-family: var(--font-head);
}
.font-bolder{
    font-weight: 900;
}
.small{
    font-size: var(--small-font-size);
}
.xs-small{
    font-size: 70%;
}
.lsp-1{
    letter-spacing: 0.05rem;
}
.lsp-2{
    letter-spacing: 0.125rem;
}
.lsp-3{
    letter-spacing: 0.25rem;
}
.lsp-4{
    letter-spacing: 0.5rem;
}
.rounded-7{
    border-radius: 2rem !important;
}
.lh-1{
    line-height: 1;
}
.lh-1-5{
    line-height: 1.5;
}
.lh-2{
    line-height: 2;
}
.lh-2-5{
    line-height: 2.5;
}
/* Tools */
.icon-wrap{
    height: 2em;
    font-size: 2.5rem;
    width: 2em;
}
.dash-front{
    padding-left: var(--tools-dash-icon-margin);
}
.dash-front.outset{
    padding-left: 0 !important;
}
.dash-front:before{
    content: '';
    display: block;
    height: 3px;
    left: calc( -1 * var(--tools-dash-icon-margin) );
    position: relative;
    top: 15px;
    width: var(--tools-dash-icon-width);
}
.dash-front.outset:before{
    position: absolute !important;
    left: auto !important;
    margin-left: calc( -1 * var(--tools-dash-icon-margin) );
    margin-top: 13px;
    top: auto !important;
}
.dash-front.color-green:before{
    background-color: var(--primary-green);
}
.dash-front.color-pink:before{
    background-color: var(--primary-pink);
}
.dash-pad-left{
    padding-left: var(--tools-dash-icon-margin);
}
.dash-pad-right{
    padding-right: var(--tools-dash-icon-margin);
}
.ang-arrow-front:before,
.arrow-front:before{
    display: inline-block;
    font-family: var(--font-icon);
    margin-right: 0.5em;
}
.ang-arrow-front:before{
    content: '\f101';
}
.arrow-front:before{
    content: '\ea4d';
}
.ang-arrow-front.color-green:before,
.arrow-front.color-green:before{
    color: var(--primary-green);
}
.ang-arrow-front.color-pink:before,
.arrow-front.color-pink:before{
    color: var(--primary-pink);
}
/* Lists */
.list-buttons{
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.list-buttons li a{
    background-color: #ddd;
    color: black;
    display: flex;
    font-size: var(--medium-2-font-size);
    font-weight: 600;
    justify-content: space-between;
    margin-bottom: 0.5em;
    padding: 1.5em;
}
.list-buttons li a:hover{
    background-color: var(--primary-green);
    color: white;
}
.list-buttons li a:after{
    content: '\e70d';
    font-family: var(--font-icon);
    font-weight: normal;
}
.list-check-mark{
    list-style: none;
}
.list-check-mark li{
    align-items: center;
    display: flex;
    justify-content: start;
    margin-bottom: 0.35em;
}
.list-check-mark li:before{
    content: '\ede2';
    font-family: var(--font-icon);
    left: -0.75em;
    font-size: 1.5rem;
    position: relative;
}
/*Loading*/
#loading{
    background-color: #fff;
    height: 100vh;
    opacity: 1;
    position: fixed;
    top: 0;
    transition-delay: 100ms;
    transition-duration: 1000ms;
    transition-property: all;
    transition-timing-function: ease;
    width: 100vw;
    visibility: visible;
    z-index: 999999 !important;
}
body.loaded #loading{
    opacity: 0;
    visibility: hidden;
}

/* Header */
#joe-header{
    border-top: 5px solid var(--primary-green);
    top: 0;
    transition: top 400ms;
    z-index: 999;
}
.scrolled #joe-header{
    top: var(--navbar-top-scrolled);
}
#joe-header .call-2-act{
    padding: 0.688rem 1rem;
}
#joe-header #navigation{
    padding-bottom: 0.16rem;
    padding-top: 0.16rem;
    transition: all var(--animate-duration);
}
.scrolled #joe-header #navigation{
    background-color: white !important;
}
#joe-header .logo .logo-img{
    background-image: url('../mask/img/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    height: var(--logo-height);
    width: var(--logo-width);
    transition: all var(--animate-duration);
}
.scrolled #joe-header .logo .logo-img{
    height: var(--logo-sm-height);
    width: var(--logo-sm-width);
}
#joe-header .logo .logo-txt{
    color: black;
    font-size: 1.125rem;
    transition: all var(--animate-duration);
}
.scrolled #joe-header .logo .logo-txt{
    font-size: 0.85rem;
}
#joe-header .nav-contact-info i.text-green{
    font-size: var(--medium-font-size);
}
#joe-header .nav-link{
    color: black;
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 700;
    /* letter-spacing: 0.03rem; */
    padding-left: 1.5rem;
    /* padding-right: 1.25rem; */
}
/* #joe-header .current-menu-item > .nav-link, */
/* #joe-header .current-menu-parent > .nav-link, */
#joe-header .nav-link:hover{
    color: var(--primary-dark-colour);
}
#joe-header .nav-icon .nav-link{
    font-size: 0;
}
#joe-header .nav-icon .nav-link:before{
    bottom: 5px;
    display: block;
    font-family: var(--font-icon);
    font-size: initial;
    position: relative;
}
#joe-header .nav-icon.fb .nav-link:before{
    content: '\e80b';
}
#joe-header .nav-icon.ln .nav-link:before{
    content: '\e80e';
}
#joe-header .nav-icon.in .nav-link:before{
    content: '\edc6';
}
#joe-header .sub-menu{
    box-shadow: var(--navbar-box-shadow);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    border-width: 0;
    padding: 1.6em 0;
    width: var(--navbar-submenu-width);
}
#joe-header .sub-menu li{
    /* border-bottom: 1px solid var(--border-muted-color); */
    padding: 0 0.5rem;
    position: relative;
    transition: padding 400ms;
}
#joe-header .sub-menu li:hover{
    padding-left: 0.75rem;
}
#joe-header .sub-menu li a{
    font-size: 0.8rem;
}
.navbar-toggler {
    border: none;
    background: transparent !important;
    height: var(--navbar-toggle-size);
}
.navbar-toggler:hover {
    background: transparent !important;
}
.navbar-toggler .nav-icon-bar {
    border: 1px solid var(--primary-green);
    transition: all 0.2s;
    width: var(--navbar-toggle-size);
}
.navbar-toggler .top-line {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}
.navbar-toggler .middle-line {
    opacity: 0 !important;
}
.navbar-toggler .bottom-line {
    transform: rotate(-45deg);
    transform-origin: 5% 90%;
}
.navbar-toggler.collapsed .top-line {
    transform: rotate(0);
}
.navbar-toggler.collapsed .middle-line {
    opacity: 1 !important;
}
.navbar-toggler.collapsed .bottom-line {
    transform: rotate(0);
}
/*Landing: Slider*/
#joeslider{
    background-color: var(--primary-green);
}
#joeslider .js-item{
    background-attachment: fixed;
    background-blend-mode: overlay;
    background-color: var(--main-slide-tint-color);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: calc(var(--main-slide-height) + var(--who-we-are-height));
    transition: all 2s;
}
#joeslider:hover .js-item{
    background-color: var(--main-slide-tint-color-hover);
}
#joeslider .js-item .jcontent{
    color: black;
    padding-top: calc(var(--navbar-height) + 15vh);
    width: 100%;
}
#joeslider .js-item .jcontent .wp-block-joe-blocks-wrapping .wrapping-inside-blocks{
    width: var(--main-slide-content-width);
}
#joeslider .js-item.dark-slide .jcontent{
    color: white;
}
#joeslider .js-item .jcontent .has-huge-font-size,
#joeslider .js-item .jcontent  p,
#joeslider .js-item .jcontent .wp-block-button{
    opacity: 0;
    position: relative;
    transition-duration: var(--main-slide-transition-duration);
    transition-property: all;
    visibility: hidden;
    z-index: 999;
}
#joeslider .js-item.active .jcontent .has-huge-font-size,
#joeslider .js-item.active .jcontent p,
#joeslider .js-item.active .jcontent .wp-block-button{
    left: 0;
    bottom: 0;
    opacity: 1;
    visibility: visible;
}
#joeslider .js-item .jcontent .has-huge-font-size{
    left: -20em;
    font-size: var(--huge-font-size);
    margin-bottom: var(--main-slide-content-spacing);
}
#joeslider .js-item .jcontent  p.has-medium-font-size,
#joeslider .js-item .jcontent .has-huge-font-size > em,
#joeslider .js-item .jcontent .has-huge-font-size > strong > em{
    color: var(--primary-pink);
}
#joeslider .js-item .jcontent  p.has-medium-font-size{
    font-size: 1.125rem;
}
#joeslider .js-item .jcontent .has-huge-font-size > em{
    font-weight: 400;
}
#joeslider .js-item .jcontent .has-huge-font-size > em,
#joeslider .js-item .jcontent .has-huge-font-size > strong > em{
    font-style: normal;
}
#joeslider .js-item .jcontent p{
    bottom: -10em;
    font-size: var(--medium-2-font-size);
    line-height: 1.8;
    transition-delay: var(--main-slide-transition-delay);
}
#joeslider .wp-block-button{
    bottom: -5em;
    margin-top: var(--main-slide-content-spacing);
    transition-delay: var(--main-slide-transition-delay);
}
#joeslider .wp-block-button.is-style-fill .wp-block-button__link{
    background-color: var(--primary-green);
}
#joeslider .wp-block-button .wp-block-button__link{
    border-color: var(--primary-green);
    font-size: var(--medium-2-font-size);
    padding-left: 3rem;
    padding-right: 3rem;
}
#joeslider .wp-block-button a:hover{
    background-color: black;
}
#joeslider .carousel-indicators button{
    border-radius: 50%;
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    opacity: 1;
    width: 20px;
}
#joeslider .carousel-indicators button.active{
    background-color: var(--primary-green);
}
#joeslider .carousel-control-prev, 
#joeslider .carousel-control-next{
    width: 7.5%;
}
.slider-theme-light #joeslider .carousel-control-prev,
.slider-theme-light #joeslider .carousel-control-next{
    color: var(--muted-colour);
}
/* Who We Are */
.who-we-are{
    background-color: #0009;
    color: white;
    margin-top: calc(var(--who-we-are-height) * -1);
    height: var(--who-we-are-height);
    overflow: hidden;
    padding: 2rem;
    position: relative;
    z-index: 9;
}
/*Feat Boxes*/
.feat-boxes{
    border-top-style: solid;
    border-top-width: var(--feat-boxes-border);
}
.feat-boxes.color-green{
    border-top-color: var(--primary-green);
    color: white;
}
.feat-boxes .container-lg{
    margin-top: calc(-1 * var(--feat-boxes-border));
}
.feat-boxes .wp-block-column{
    margin-left: 0 !important;
    padding: 2rem;
}
/*What We Do*/
.what-we-do .wp-block-image img{
    outline: 1rem solid rgba(255, 255, 255, 0.75);
    outline-offset: -1rem;
}
.what-we-do p > em{
    color: var(--primary-green);
    font-style: normal;
}
/* Contact Information */
.contact-info:before{
    content: '';
    font-family: var(--font-icon);
    font-size: 2.5em;
    margin-right: 1em;
}
.contact-info.square-box:before,
.contact-info.small:before{
    align-items: center;
    display: flex;
    justify-content: center;
}
.contact-info.square-box:before{
    height: var(--tools-box-icon-size);
    width: var(--tools-box-icon-size);
}
.contact-info.small:before{
    font-size: var(--medium-font-size);
    height: var(--tools-box-icon-small-size);
    width: var(--tools-box-icon-small-size);
}
.contact-info.color-black:before{
    background-color: black;
    color: white;
}
.contact-info.address:before{
    /* content: '\e804'; */
    content: '\f277';
}
.contact-info.phone:before{
    content: '\e805';
}
.contact-info.email:before{
    content: '\e801';
}
.contact-info h3{
    font-size: var(--medium-font-size);
    font-weight: 600;
}
.contact-info p{
    font-size: var(--normal-font-size);
    min-height: 48px;
}
/* Schedule Form */
.schedule-form .grunion-field-wrap{
    border-right-width: 0 !important;
}
.schedule-form form{
    display: flex;
    transition-property: all;
    transition-duration: var(--animate-duration);
}
.schedule-form form.processing{
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    pointer-events: none;
}
.schedule-form form.processing:before{
    content: 'please wait...';
    font-size: 2rem;
    position: absolute;
}
.schedule-form form .grunion-field-wrap.col-2-wrap{
    flex: 0 0 48%;
    /* width: 50%; */
}
.schedule-form form .grunion-field-wrap.col-2-wrap.lname-wrap,
.schedule-form form .grunion-field-wrap.col-2-wrap.phone-wrap{
    margin-left: 4%;
}
.schedule-form form .grunion-field-wrap textarea{
    height: 140px;
}
.schedule-form form .wp-block-button button{
    background-color: var(--primary-blue);
    font-size: var(--medium-2-font-size);
    font-weight: 600;
    padding: calc(.667em + 2px) calc(1.333em + 2px);
}
.schedule-form form .wp-block-button button:hover{
    background-color: var(--primary-pink);
}
/* Static Pages */
.mask .page-header{
    background-attachment: fixed;
    background-color: var(--main-slide-tint-color-hover);
    background-blend-mode: overlay;
    background-position: center;
    background-size: cover;
    height: var(--page-header-height);
}
.mask .page-header .page-title,
.mask .page-header .page-intro{
    width: var(--page-header-content-width);
}
.pge .post-content p:not(.has-large-font-size, .has-normal-font-size, .has-medium-font-size, .has-huge-font-size, .small, .xs-small) {
    font-size: 1.125rem;
}
.pge p{
    line-height: 1.888889;
    margin-bottom: 1.75em;
}
.pge .job-header div{
    display: flex;
    justify-content: space-between;
}
/* Page Header */
.page-header.bright-slide .breadcrumb,
.page-header.bright-slide .breadcrumb-item.active,
.page-header.bright-slide .breadcrumb-item + .breadcrumb-item::before,
.page-header.bright-slide .breadcrumb a,
.page-header.bright-slide .h1{
    color: black;
}
.page-header.dark-slide .breadcrumb,
.page-header.dark-slide .breadcrumb-item.active,
.page-header.dark-slide .breadcrumb-item + .breadcrumb-item::before,
.page-header.dark-slide .breadcrumb a,
.page-header.dark-slide .h1{
    color: white;
}

/* Footer Widgets */
.f-widgets .widget{
    color: var(--muted-color);
    font-size: 0.875rem;
    margin: 2em;
    width: 30%;
}
.f-widgets .widget h3{
    color: black;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    margin-top: 2rem;
}
.f-widgets .widget ul{
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style: none;
    padding-left: 0;
}
.f-widgets .widget ul li{
    margin-bottom: 1em;
}
.icon-box{
    font-size: 1rem;
    padding-left: 3rem;
}
.icon-box:before{
    color: var(--primary-green);
    display: block;
    font-family: 'joe-icon';
    font-size: 1.5rem;
    margin-left: -1.7em;
    margin-top: -0.35em;
    position: absolute;
}
.icon-box.location:before{
    content: '\e804';
    font-size: 2rem;
    margin-left: -1.2em;
}
.icon-box.email:before{
    content: '\e801';
}
/* Footer */
.climbup:not(.show){
    visibility: hidden;
}
.climbup{
    margin-bottom: 1em;
    opacity: 0.6 !important;
    margin-right: 1em;
    visibility: visible;
    transform: rotate(-90deg);
    transition-property: all;
    transition-duration: 600ms;
    z-index: 999;
}
.climbup:hover{
    margin-bottom: 1.5em;
    opacity: 1;
}