/*
Theme Name: Indopac
Theme URI: https://www.indopacglobal.com/
Author: eJeeban Web Design Company
Author URI: https://www.ejeeban.com/
Description: Customized theme for Indopacific Global Website.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, light, one-column, flexible-width, custom-header, custom-menu, featured-images, post-formats, sticky-post
Text Domain: indopacglobal
*/


/*  --------------------------------------------------
    Generic CSS Setup
    -------------------------------------------------- */
*,
*:after,
*:before{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
:root{
    --full-black: rgba(0, 0, 0, 1);
    --black: rgba(38, 38, 38, 1);
    --white: rgba(255, 255, 255, 1);
    --bg-white: rgba(237, 237, 237, 1);
    --red: rgba(208, 95, 100, 1);
    --yellow: rgba(253, 255, 0, 1);
    --dark-blue: rgba(4, 16, 42, 1);
    --blue: rgba(59, 76, 248, 1);
    --light-grey: rgba(214, 214, 212, 1);
    --grey: rgba(211, 214, 212, 1);
    --border-light-grey01: 1px solid rgba(187, 187, 187, 1);
    --border-light-grey02: 1px solid rgba(38, 38, 38, 0.2);
    --border-white: 1px solid rgba(255, 255, 255, 0.2);
    --border-full-white: 1px solid rgba(255, 255, 255, 1);
    --heading-font: "Lato", sans-serif;
    --default-font: "Lato", sans-serif;
    --space100: 100px;
    --space125: 125px;
    --space50: 50px;
    --space30: 30px;
    --space6p: 6%;
    --space15p: 15%;
    --space25p: 25%;
    --space0: 0px;
}
html {
    width: 100%;
    background: var(--bg-white);
    font-family: var(--default-font);
    font-size: 15px;
}
body {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0px;
    margin: 0 0 0 0px;
    font-family: var(--default-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    box-sizing: border-box;
    color: var(--black);
}
h1, h2, h3, h4, h5, td, tr, th, div, header, section, footer, p, form, input, textarea, select, select option, fieldset, label{
    font-family: var(--default-font);
    font-size: 1vw;
    font-weight: 400;
    font-optical-sizing: auto;
    font-style: normal;
    text-align: justify;
    line-height: 1.75;
    color: var(--black);
    margin: 0 0 0 0px;
    padding: 0 0 0 0px;
    border: none;
}
h1{
    margin-bottom: 20px;
    font-family: var(--heading-font);
    font-size: 4.5vw;
    font-weight: 700;
    line-height: 1.2;
}
h1 acronym{
    position: relative;
    display: block;
    overflow: hidden;
}
h1 big{
    padding: 0 20px;
}
h1 strong{
    color: var(--red);
}
h2{
    margin-bottom: 35px;
    font-family: var(--heading-font);
    font-size: 2.3vw;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1;
}
h1 span,
h2 span{
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: var(--default-font);
    font-size: 0.9vw;
    font-weight: 300;
    letter-spacing: 0.1rem;
    display: block;
}
h3{
    margin-bottom: 0px;
    font-size: 2.2vw;
    font-weight: 700;
    line-height: 1.15;
}
h3 span{
    margin-bottom: 10px;
    font-size: 0.9vw;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    display: block;
}
h4{
    font-size: 1.8vw;
    font-weight: 300;
}
h5{
    margin-bottom: 35px;
    font-size: 1vw;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}
p{
    margin-bottom: 20px;
}
a {
    color: var(--green);
    text-decoration: none;
}
a img{
    border: none;
    display: block;
    margin: 0;
    padding: 0;
    pointer-events: none;
}
input{
    width: 100%;
    height: 6vh;
    padding: 2vh;
    margin: 0 0 20px 0px;
    background-color: transparent;
    border: var(--border-light-grey01);
    -webkit-appearance: none;
}
textarea{
    width: 100%;
    height: 15vh;
    padding: 2vh;
    margin: 0 0 20px 0px;
    background-color: transparent;
    border: var(--border-light-grey01);
    -webkit-appearance: none;
}
select{
    width: 100%;
    height: 6vh;
    padding: 0 2vh;
    margin: 0 0 20px 0px;
    background: url(images/ico-dropdown.png) no-repeat 98% center;
    border: var(--border-light-grey01);
    -webkit-appearance: none;
}
input:active, textarea:active, select:active{
    border-color: var(--blue);
}
label{
    margin: 0px;
    height: 20px;
    line-height: 1.2;
    display: block;
}
input[type="checkbox"]{
    position: relative;
    width: 20px;
    height: 20px;
    background-color: transparent;
    padding: 0;
    margin: 0 10px 0 0px;
    border: 1px solid var(--black);
    color: var(--black);
    cursor: pointer;
    display: inline-block;
    transition: all 0.2s ease-out;
}
input[type="checkbox"]:checked:after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background-color: var(--black);
    content: "";
}
input[type="file"]{
    padding: 8px 10px;
}
input[type="submit"]{
    width: 160px;
    height: 6vh;
    background-color: var(--dark-blue);
    padding: 0px;
    border: none;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    -webkit-appearance: none;
    cursor: pointer;
    transition: all 0.2s ease-out;
}
input[type="submit"]:hover {
    background-color: var(--black);
    transition: top 0.2s ease-out;
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--blue);
}
*:focus {
  outline: none;
}
input:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--grey);
    color: var(--black);
    opacity: 1;
}
form p{
    margin-bottom: 0px;
}
img, video{
    pointer-events: none;
}
.thumbHolder,
.imgHolder {
    position: relative;
    overflow: hidden;
}
.thumbHolder:after,
.imgHolder:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.thumbHolder img,
.imgHolder img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: all 0.2s ease-out;
}
.clearBoth {
    clear: both;
}
.listingHolder ul, 
.listingHolder li{
    margin: 0 0 0 0px;
    padding: 0 0 0 0px;
    list-style: none;
}
.listingHolder li{
    display: block;
}
.btnCTA {
    display: block;
}
.btnCTA a,
.btnCTA p{
    position: relative;
    padding: 5px 25px 5px 25px;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    font-size: 1vw;
    color: var(--black);
    white-space: nowrap;
    border: 2px solid var(--black);
    display: inline-block;
    overflow: hidden;
    transition: all 0.2s;
}
.btnCTA a:hover {
    color: var(--blue);
    border-color: var(--blue);
}
.btnCTA a.light,
.btnCTA p.light {
    border-color: var(--white);
    color: var(--white);
}
.btnCTA a.light:hover {
    color: var(--yellow);
    border-color: var(--yellow);
}
.btnLearnMore {
    position: relative;
    padding-bottom: 5px;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    font-size: 1.2vw;
    display: inline-block;
}
.btnLearnMore:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 25%;
    height: 2px;
    background-color: var(--black);
    content: "";
    transition: all 0.2s;
}
.btnLearnMore:hover:after {
    width: 100%;
    transition: all 0.2s;
}
.btnLearnMore a{
    color: var(--black);
}
.rowHolder {
    display: flex;
    justify-content: space-between;
}
.colLeft {
    width: 48%;
}
.colRight {
    width: 48%;
}
.spacer100 {
    height: var(--space100);
}
.spacer50 {
    height: var(--space50);
}
.spacer30 {
    height: var(--space30);
}
.white {
    color: var(--white);
}
.red {
    color: var(--red);
}
.blue {
    color: var(--blue);
}
.grecaptcha-badge {
    display: none;
}


/*  --------------------------------------------------
    Preloader
    -------------------------------------------------- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    z-index: 1100;
    width: 100%;
    height: 100%;
}
#preloader .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#preloader .wrapper .logoHolder {
    width: 120px;
}
#preloader .wrapper .logoHolder img{
    width: 100%;
    height: auto;
}


/*  --------------------------------------------------
    Header & Navigation
    -------------------------------------------------- */
#topHeader {
    position: fixed;
    z-index: 21;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(236, 236, 236, 0);
    padding: 5vh var(--space6p) 1vh var(--space6p);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: top 0.2s ease-out;
}
#topHeader.fixed-header {
    padding: 1vh var(--space6p);
    background-color: rgba(236, 236, 236, 1);
    transition: all 0.2s ease-out;
}
#topHeader ul, 
#topHeader li{
    margin: 0 0 0 0px;
    padding: 0 0 0 0px;
    list-style: none;
    display: block;
}
#topHeader .logoHolder {
    width: 6vw;
    transition: all 0.2s ease-out;
}
#topHeader .logoHolder img{
    width: 100%;
    object-fit: cover;
}
.navLight #topHeader .logoHolder img{
    /*filter: invert(1) brightness(100%) saturate(10000%);*/
}
#topHeader.fixed-header .logoHolder img{
    filter: none;
}
#topHeader .menuHolder{
    display: flex;
    justify-content: right;
    align-items: center;
}
#topHeader .menuHolder li{
    position: relative;
    margin: 0 0 0 30px;
    padding: 2vh 0px;
    font-size: 0.8vw;
    text-transform: uppercase;
    letter-spacing: 0.1vw;
    line-height: 1.1;
}
#topHeader .menuHolder li a{
    padding: 10px;
    color: var(--black);
    font-weight: 400;
    text-decoration: none;
    display: block;
    transition: all 0.2s;
}
#topHeader .menuHolder li:last-child a{
    padding-right: 0px;
}
.navLight #topHeader .menuHolder li a{
    color: var(--white);
}
#topHeader.fixed-header .menuHolder li a{
    color: var(--black);
}
#topHeader .menuHolder li a:hover{
    color: var(--red);
}
#topHeader .menu-item-has-children {
    position: relative;
}
#topHeader .menu-item-has-children a{
    display: flex;
    align-items: center;
}
#topHeader .menu-item-has-children a:after {
    width: 10px;
    height: 10px;
    margin-left: 5px;
    background: url(images/ico-dropdown.png) no-repeat center center;
    content: "";
    display: inline-block;
}
.navLight #topHeader .menu-item-has-children a:after {
    background-image: url(images/ico-dropdown-light.png);
}
#topHeader .sub-menu{
    position: absolute;
    left: 0;
    margin: 0;
    padding: 5px 20px;
    min-width: 250px;
    background-color: var(--white);
    box-shadow: 0px 0px 10px -5px rgba(0,0,0,0.2);
    display: none;
    transition: .5s;
}
#topHeader .menu-item-has-children:hover .sub-menu {
    display: block;
}
#topHeader .sub-menu li{
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    border-bottom: dotted 1px rgba(0, 0, 0, 0.1);
}
#topHeader .sub-menu li:last-child{
    border-bottom: none;
}
#topHeader .sub-menu li a{
    text-align: left;
    padding: 15px 0px;
    color: var(--black);
}
#topHeader .sub-menu li a:before {
    display: none;
}
.navLight #topHeader .sub-menu li a{
    color: var(--black);
}
#topHeader .sub-menu li a:after {
    display: none;
}
#topHeader .btnMenu {
    position: relative;
    width: 25px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: none;
}
#topHeader .btnMenu a{
    pointer-events: none;
}
#topHeader .btnMenu .bar1, 
#topHeader .btnMenu .bar2,
#topHeader .btnMenu .bar3 {
    width: 25px;
    height: 2px;
    background-color: var(--black);
    transition: 0.5s;
}
.navLight #topHeader .btnMenu .bar1, 
.navLight #topHeader .btnMenu .bar2,
.navLight #topHeader .btnMenu .bar3 {
    background-color: var(--white);
}
#topHeader.fixed-header .btnMenu .bar1, 
#topHeader.fixed-header .btnMenu .bar2,
#topHeader.fixed-header .btnMenu .bar3 {
    background-color: var(--black);
}
#topHeader .btnMenu .bar2 {
    margin-top: 4px;
}
#topHeader .btnMenu .bar3 {
    margin-top: 4px;
}
.colorWhite .bar1, 
.colorWhite .bar2, 
.colorWhite .bar3 {
    background-color: var(--white);
}
.change .bar1,
.change .bar2,
.change .bar3 {
    margin-top: -10px;
    opacity: 0;
}
#topHeader.fixed-header .logoHolder {
    width: 5vw;
}
#topHeader.fixed-header .secTopMenu li a{
    color: var(--black);
}


/*  --------------------------------------------------
    Navigation
    -------------------------------------------------- */
.fullNavi {
    position: fixed;
    z-index: 122;
    top: -100%;
    right: 0;
    background: var(--white);
    background-attachment: fixed;
    background-size: contain;
    width: 100%;
    height: 100%;
    text-align: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow-y: scroll;
}
.fullNavi ul, 
.fullNavi li{
    margin: 0 0 0 0px;
    padding: 0 0 0 0px;
    list-style: none;
    display: block;
}
.fullNavi .logoHolder {
    position: fixed;
    top: 3vh;
    left: 2.7%;
    width: 13vw;
    display: none;
}
.fullNavi .logoHolder.show {
    display: block;
}
.fullNavi .logoHolder img{
    width: 100%;
    object-fit: cover;
    filter: invert(1) brightness(100%) saturate(10000%);
}
.fullNavi .btnClose {
    position: absolute;
    z-index: 3;
    top: 15vh;
    right: 2.7%;
    width: 30px;
    opacity: 0;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all 0.75s ease-out;
}
.fullNavi.naviSlideIn {
    top: 0px;
    transition: all 0.2s ease-out;
}
.fullNavi .btnClose.btnSlideIn {
    top: 5vh;
    opacity: 1;
    transition: all 0.75s ease-out;
}
.fullNavi .btnClose .bar1, 
.fullNavi .btnClose .bar2 {
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: var(--black);
    margin-right: 3px;
    transition: 0.5s;
    display: inline-block;
    transform-origin: 0 0;
}
.fullNavi .btnClose .bar1 {
    top: 0;
    transform: rotate(45deg);
    transform-origin: 0 0;
}
.fullNavi .btnClose .bar2 {
    top: 1px;
    right: -24px;
    transform: rotate(135deg);
    transform-origin: 0 0;
}
.fullNavi .naviMobileLeft {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
}
.fullNavi .naviMobileLeft li {
    font-size: 32px;
    display: block;
    text-align: center;
}
.fullNavi .naviMobileLeft li a{
    position: relative;
    width: 100%;
    font-weight: 300;
    display: block;
    color: var(--black);
    transition: all 0.3s ease-out;
}
.fullNavi .menu-item-has-children a:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 50px;
    width: 10px;
    height: 10px;
    background: url(images/ico-dropdown.png) no-repeat center center;
    content: "";
    display: inline-block;
}
.fullNavi .sub-menu{
    display: none;
    transition: .5s;
}
.fullNavi .sub-menu li{
    padding: 0;
    margin: 0;
    width: 100%;
}
.fullNavi .sub-menu li:last-child{
    border-bottom: none;
}
.fullNavi .sub-menu li a{
    padding: 3px 10px;
    font-size: 2.3vw;
}
.fullNavi .sub-menu li a:after {
    display: none;
}


/*  --------------------------------------------------
    Footer
    -------------------------------------------------- */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background-color: var(--dark-blue);
    padding: 75px var(--space6p) 0 var(--space6p);
    clear: both;
    text-align: center;
}
footer h2, footer h3, footer h4, footer p{
    margin-bottom: 10px;
    color: var(--white);
    line-height: 1.2;
}
footer h4{
    margin-bottom: 25px;
}
footer a{
    color: var(--white);
}
footer ul, 
footer li{
    margin: 0 0 0 0px;
    padding: 0 0 0 0px;
    list-style: none;
    display: block;
}
footer .colHolder {
    position: relative;
    z-index: 2;
    width: 40%;
    margin: 0 0 50px 0px;
}
footer .colHolder:first-child {
    width: 45%;
}
footer .colHolder h2{
    margin-bottom: 20px;
}
footer .colHolder p{
    line-height: 1.5;
}
footer .colHolder .btnCTA {
    margin-top: 50px;
}
footer .contactListing li{
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}
footer .contactListing .icoHolder {
    width: 12%;
    margin-right: 3%;
}
footer .contactListing .icoHolder img{
    width: 100%;
    height: auto;
    display: block;
}
footer .copyrightHolder {
    position: relative;
    z-index: 2;
    padding: 30px 0 30px 0px;
    display: flex;
    justify-content: space-between;
    border-top: var(--border-white);
}
footer .copyrightHolder p{
    font-size: 0.9vw;
    letter-spacing: .1rem;
}
footer .socialListing {
    display: flex;
    align-items: center;
}
footer .socialListing a{
    margin: 0 20px 0 0px;
    font-size: 1.5vw;
}


/*  --------------------------------------------------
    Owl Carousel
    -------------------------------------------------- */
.owl-dots {
    position: relative;
    width: 100%;
    padding-top: 30px;
    display: flex;
    justify-content: center;
}
.owl-carousel button.owl-dot {
    width: 11px;
    height: 11px;
    margin-right: 15px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    overflow: hidden;
}
.owl-carousel button.owl-dot:last-child {
    margin-right: 0;
}
.owl-carousel button.owl-dot.active {
    background-color: var(--black);
}
.owl-carousel .owl-nav {
    position: absolute;
    display: flex;
    justify-content: space-between;
}


/*  --------------------------------------------------
    Cover Section
    -------------------------------------------------- */
.secCover {
    position: relative;
    width: 100%;
    height: 75vh;
    background-color: var(--dark-blue);
}
.secCover .bgHolder {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.secCover .bgHolder img{
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    display: block;
}
.secCover .descHolder {
    position: absolute;
    z-index: 3;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.secCover .descHolder h1,
.secCover .descHolder h2,
.secCover .descHolder h3,
.secCover .descHolder h4,
.secCover .descHolder h5,
.secCover .descHolder p{
    color: var(--white);
}
.secCover .introHolder p{
    text-align: center;
    line-height: 1.85;
}


/*  --------------------------------------------------
    Heading Section
    -------------------------------------------------- */
.secHeading {
    position: relative;
    z-index: 2;
    background-color: var(--bg-white);
    overflow: hidden;
}
.secHeading .bgHolder {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}
.secHeading .bgHolder img{
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
}
.secHeading .descHolder {
    position: relative;
    z-index: 2;
    padding: 45vh var(--space25p) var(--space50) var(--space25p);
}
.secHeading .descHolder h1,
.secHeading .descHolder h2{
    text-align: center;
}
.secHeading .descHolder p{
    font-size: 1vw;
    letter-spacing: 0.08vw;
    line-height: 1.85;
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center;
}


/*  --------------------------------------------------
    Listing Holder
    -------------------------------------------------- */
.listingHolder {
    margin: 0;
    padding: 0;
    list-style: none;
}
.listingHolder li{
    padding: 15px 0px;
    border-top: var(--border-black);
}
.listingHolder li a{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.listingHolder li .date {
    width: 10%;
    transition: all 0.2s;
}
.listingHolder li a:hover .date {
    width: 12%;
    transition: all 0.2s;
}
.listingHolder li h4{
    width: 87%;
    font-weight: 700;
    letter-spacing: 0.05vw;
}
.listingHolder li i{
    width: 3%;
    font-size: 1.2vw;
    color: var(--black);
    transition: all 0.2s;
}
.listingHolder li a:hover i{
    width: 1%;
    transition: all 0.2s;
}


/*  --------------------------------------------------
    Tile Listing Holder
    -------------------------------------------------- */
.tileListing {
    margin: 0 -10px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.tileListing .item {
    width: calc(50% - 20px);
    padding: 0px;
    margin: 0 10px 20px 10px;
}
.tileListing .item a{
    display: block;
}
.tileListing .item .thumbHolder {
    margin-bottom: 20px;
}
.tileListing .item .thumbHolder:after {
    padding-bottom: 100%;
}
.tileListing .item  a:hover .thumbHolder img{
    width: 110%;
    height: 110%;
    transition: all 0.2s;
}
.tileListing .item .descHolder {
    position: relative;
}


/*  --------------------------------------------------
    Pagination
    -------------------------------------------------- */
.popUpNotification {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(211, 214, 212, 0.5);
    display: none;
}
.popUpNotification .contentWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-height: 80%;
    padding: 50px;
    background-color: var(--white);
    overflow-y: scroll;
    text-align: center;
}
.popUpNotification .contentWrapper .icoHolder {
    width: 20%;
    margin: 0 auto 20px auto;
}
.popUpNotification .contentWrapper .icoHolder img{
    width: 100%;
    height: auto;
    display: block;
}


/*  --------------------------------------------------
    Home Page
    -------------------------------------------------- */
#secIndex {
    width: 100%;
}
#secIndex .secIntro {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 110vh;
    background-color: var(--dark-blue);
    overflow: hidden;
}
#secIndex .secIntro .bgHolder {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}
#secIndex .secIntro .bgHolder img{
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    object-fit: cover;
    opacity: 0.95;
}
#secIndex .secIntro .maskHolder {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
}
#secIndex .secIntro .maskHolder img{
    width: 100%;
    height: auto;
    display: block;
}
#secIndex .secIntro .descHolder {
    position: absolute;
    z-index: 2;
    top: 30%;
    left: var(--space15p);
    right: var(--space15p);
    text-align: center;
}
#secIndex .secIntro .descHolder h1,
#secIndex .secIntro .descHolder h2,
#secIndex .secIntro .descHolder h3,
#secIndex .secIntro .descHolder h4,
#secIndex .secIntro .descHolder p,
#secIndex .secIntro .descHolder a{
    text-align: center;
    color: var(--white);
}
#secIndex .secIntro .descHolder p{
    width: 70%;
    margin: 0 auto;
    font-size: 1.2vw;
    letter-spacing: 0.05rem;
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center;
}
#secIndex .secIntro .btnScroll {
    width: 10%;
    margin: 30px auto 0 auto;
    text-align: center;
}
#secIndex .secWhatWeDo {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: var(--space50) 0px var(--space100) var(--space6p);
    background-color: var(--dark-blue);
}
#secIndex .secWhatWeDo h1,
#secIndex .secWhatWeDo h2,
#secIndex .secWhatWeDo h3,
#secIndex .secWhatWeDo h4,
#secIndex .secWhatWeDo h5,
#secIndex .secWhatWeDo p {
    color: var(--white);
}
#secIndex .secWhatWeDo .rowHolder {
    position: relative;
}
#secIndex .secWhatWeDo .colLeft {
    width: 35%;
    padding: 20px 5% 20px 0px;
    margin-right: 3%;
    border-right: var(--border-white);
}
#secIndex .secWhatWeDo .colRight {
    width: 62%;
    padding: 20px 0px;
}
#secIndex .secWhatWeDo .sliderHolder.owl-carousel {
    position: static;
}
#secIndex .secWhatWeDo .owl-carousel .owl-nav {
    position: absolute;
    bottom: 30%;
    left: 0;
    color: var(--yellow);
}
#secIndex .secWhatWeDo .owl-carousel .owl-nav button{
    width: 50px;
    height: 50px;
    border: 2px solid var(--yellow);
    border-radius: 100px;
}
#secIndex .secWhatWeDo .owl-carousel .owl-nav button img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#secIndex .secWhatWeDo .owl-carousel .owl-nav .owl-prev {
    margin-right: 20px;
}
#secIndex .secWhatWeDo .owl-carousel .owl-stage {
    padding-left: 0 !important;
}
#secIndex .secWhatWeDo .sliderHolder .item .thumbHolder {
    margin-bottom: 30px;
}
#secIndex .secWhatWeDo .sliderHolder .item .thumbHolder:after {
    padding-bottom: 55%;
}
#secIndex .secWhatWeDo .sliderHolder .item .descHolder {
    margin-bottom: 30px;
}
#secIndex .secWhatWeDo .sliderHolder .item .descHolder h3{
    margin-bottom: 20px;
    color: var(--yellow);
}
#secIndex .secWhatWeDo .sliderHolder .item .statsHolder {
    margin: 0;
    padding: 0;
    list-style: 0;
    display: flex;
}
#secIndex .secWhatWeDo .sliderHolder .item .statsHolder li{
    position: relative;
    margin: 0 35px 0 0px;
    padding: 0 35px 0 0px;
    font-size: 1.6vw;
    font-weight: 300;
    line-height: 1.2;
    color: var(--white);
    display: block;
}
#secIndex .secWhatWeDo .sliderHolder .item .statsHolder li span{
    text-transform: uppercase;
    font-size: 0.9vw;
    display: block;
}
#secIndex .secWhatWeDo .sliderHolder .item .statsHolder li:after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    content: " : ";
}
#secIndex .secWhatWeDo .sliderHolder .item .statsHolder li:last-child:after {
    display: none;
}
#secIndex .secAbout {
    position: relative;
    z-index: 2;
    padding: 20vh var(--space6p);
    margin-bottom: 70vh;
    background-color: var(--bg-white);
}
#secIndex .secAbout.noMargin {
    margin-bottom: 0;
}
#secIndex .secAbout .bgHolder {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
}
#secIndex .secAbout .bgHolder img{
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}
#secIndex .secAbout .rowHolder {
    position: relative;
    z-index: 2;
    padding: var(--space100) 0 0 0px;
}
#secIndex .secAbout .rowHolder .imgLeft {
    position: relative;
    width: 30%;
    margin-top: 10%;
}
#secIndex .secAbout .rowHolder .imgLeft img:first-child {
    width: 50%;
    height: auto;
    margin-bottom: 20%;
}
#secIndex .secAbout .rowHolder .imgLeft img:last-child {
    width: 80%;
    height: auto;
    margin-left: 20%;
}
#secIndex .secAbout .descHolder {
    position: relative;
    z-index: 2;
    width: 50%;
    margin: 0 auto;
    -moz-text-align-last: center;
    text-align-last: center;
}
#secIndex .secAbout .descHolder .btnCTA {
    margin-top: 50px;
}
#secIndex .secAbout .rowHolder .imgRight {
    width: 30%;
}
#secIndex .secAbout .rowHolder .imgRight img{
    width: 85%;
    height: auto;
    margin-left: 15%;
    display: block;
}
#secIndex .secMilestones {
    position: relative;
    z-index: 2;
    padding: var(--space100) 0px var(--space100) var(--space6p);
    margin-bottom: 70vh;
    background-color: var(--grey);
}
#secIndex .secMilestones .owl-carousel .owl-stage {
    padding-left: 0 !important;
}
#secIndex .secMilestones .owl-carousel .owl-nav {
    position: absolute;
    bottom: -40px;
    right: var(--space6p);
}
#secIndex .secMilestones .owl-carousel .owl-nav button{
    width: 50px;
    height: 50px;
    font-size: 1.5vw;
    line-height: 1;
    border: 2px solid var(--black);
}
#secIndex .secMilestones .owl-carousel .owl-nav button img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#secIndex .secMilestones .owl-carousel .owl-nav .owl-prev {
    margin-right: 10px;
}
#secIndex .secMilestones .owl-dots {
    width: 80%;
    padding-top: 0px;
    margin-top: 50px;
    margin-right: 100px;
    justify-content: start;
}
#secIndex .secMilestones .owl-dots:after {
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    content: "";
}
.owl-carousel button.owl-dot {
    width: 100%;
    height: 3px;
    margin-right: 0px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0;
}
.owl-carousel button.owl-dot:last-child {
    margin-right: 0;
}
.owl-carousel button:has(~ .active) {
    background-color: var(--black);
}
#secIndex .secMilestones .sliderHolder .item .date {
    margin-bottom: 10px;
}
#secIndex .secMilestones .sliderHolder .item .thumbHolder {
    margin-bottom: 30px;
}
#secIndex .secMilestones .sliderHolder .item .thumbHolder:after {
    padding-bottom: 65%;
}


/*  --------------------------------------------------
    Our Businesses
    -------------------------------------------------- */
#secOurBiz {
    position: relative;
    width: 100%;
}
#secOurBiz .secContent {
    position: relative;
    z-index: 2;
    background-color: var(--bg-white);
    margin-bottom: 70vh;
    padding: var(--space100) var(--space15p);
}
#secOurBiz .secListing {
    position: relative;
    z-index: 2;
    background-color: var(--bg-white);
    margin-bottom: 70vh;
    padding: var(--space100) var(--space15p);
}
#secOurBiz .tileListing .item {
    background-color: var(--white);
}
#secOurBiz .tileListing .item .thumbHolder {
    margin-bottom: 10px;
}
#secOurBiz .tileListing .item .descHolder {
    padding: 15px 30px;
}
#secOurBiz .tileListing .item .descHolder ol li{
    margin-bottom: 5px;
}
#secOurBiz .tileListing .item .btnCTA a{
    display: inline-block;
}


/*  --------------------------------------------------
    About Us
    -------------------------------------------------- */
#secAboutUs {
    width: 100%;
}
#secAboutUs .secContent {
    position: relative;
    z-index: 2;
    background-color: var(--bg-white);
    margin-bottom: 75vh;
    padding: 0 var(--space15p) var(--space100) var(--space15p);
}
#secAboutUs .statementsHolder {
    padding-bottom: var(--space50);
}
#secAboutUs .tileListing {
    margin: 0 -15px;
}
#secAboutUs .tileListing .item {
    width: calc(50% - 30px);
    margin: 0 15px 20px 15px;
}
#secAboutUs .marketHolder .imgHolder {
    margin-bottom: var(--space50);
}
#secAboutUs .marketHolder .imgHolder:after {
    display: none;
}
#secAboutUs .marketHolder .imgHolder img{
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    object-fit: none;
}
#secAboutUs .marketHolder .descHolder {
    width: 70%;
    margin: 0 auto;
}
#secAboutUs .marketHolder .descHolder h2{
    margin-bottom: 15px;
    text-align: center;
}
#secAboutUs .marketHolder .descHolder h4{
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.2;
}
#secAboutUs .marketHolder .descHolder p{
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center;
}
#secAboutUs .marketHolder .descHolder .btnCTA {
    margin-top: 50px;
    text-align: center;
}


/*  --------------------------------------------------
    Contact Us
    -------------------------------------------------- */
#secContactUs {
    width: 100%;
}
#secContactUs .secContent {
    position: relative;
    z-index: 2;
    background-color: var(--bg-white);
    margin-bottom: 75vh;
    padding: 0 var(--space6p) var(--space100) var(--space6p);
}
#secContactUs .secContent .mapHolder {
    position: relative;
    margin-bottom: 40px;
}
#secContactUs .secContent .mapHolder .imgHolder:after {
    padding-bottom: 38%;
}
#secContactUs .secContent .mapHolder .pinHolder {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#secContactUs .secContent .mapHolder .pinHolder .pointer {
    width: 60%;
    margin: 0 auto 10px auto;
}
#secContactUs .secContent .mapHolder .pinHolder .pointer img{
    width: 100%;
    height: auto;
    display: block;
}
#secContactUs .mapHolder .btnLearnMore:after {
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    background-color: var(--white);
}
#secContactUs .mapHolder .btnLearnMore:hover:after {
    width: 100%;
}
#secContactUs .mapHolder .btnLearnMore a{
    line-height: 1.1;
    color: var(--white);
}
#secContactUs .secContent .infoHolder {
    position: relative;
    width: 100%;
    margin: 0 auto var(--space50) auto;
    display: flex;
}
#secContactUs .secContent .infoHolder .colHolder {
    width: 35%;
    margin-right: 5%;
}
#secContactUs .secContent .infoHolder .colHolder h5,
#secContactUs .secContent .infoHolder .colHolder p{
    margin-bottom: 0;
    text-align: left;
}
#secContactUs .secContent .infoHolder .colHolder h5{
    margin-bottom: 5px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
#secContactUs .secContent .formHolder {
    position: relative;
    width: 100%;
    margin: 0 auto;
}



/*  --------------------------------------------------
    For Large Screen
    -------------------------------------------------- */
@media screen and (min-width: 1600px) and (max-width: 7000px) {
    :root{
        --space100: 120px;
        --space125: 150px;
        --space50: 80px;
        --space30: 50px;
    }
}


/*  --------------------------------------------------
    For Tablet Landscape
    -------------------------------------------------- */
@media only screen and (max-width: 1100px) {
    :root{
        --space6p: 5%;
        --space15p: 10%;
        --space25p: 20%;
    }
    h2{
        margin-bottom: 25px;
    }

    #secIndex .secIntro .descHolder p{
        font-size: 1.35vw;
    }
}


/*  --------------------------------------------------
    For Tablet Portrait
    -------------------------------------------------- */
@media only screen and (max-width: 969px) {
    :root{
        --space6p: 5%;
        --space15p: 5%;
        --space25p: 5%;
    }
    h1, h2, h3, h4, h5, td, tr, th, div, header, section, footer, p, form, input, textarea, select, select option, fieldset, label{
        font-size: 1rem;
    }
    h1{
        margin-bottom: 20px;
        font-size: 4.5rem;
    }
    h1 big{
        padding: 0 5px;
    }
    h2{
        margin-bottom: 25px;
        font-size: 2.3rem;
    }
    h1 span,
    h2 span{
        margin-bottom: 10px;
        font-size: 0.9rem;
    }
    h3{
        font-size: 2.2rem;
    }
    h3 span{
        font-size: 0.9rem;
    }
    h4{
        font-size: 1.8rem;
    }
    p{
        margin-bottom: 20px;
    }
    input{
        height: 4vh;
        padding: 0 1vh;
    }
    textarea{
        padding: 1vh;
    }
    select{
        height: 4vh;
        padding: 0 1vh;
    }
    label{
        height: 25px;
    }
    input[type="submit"]{
        height: 4vh;
    }
    .btnCTA a,
    .btnCTA p{
        font-size: 1rem;
    }
    .btnLearnMore {
        font-size: 1.2rem;
    }
    .rowHolder {
        display: block;
    }
    .colLeft {
        width: 100%;
        margin-bottom: 30px;
    }
    .colRight {
        width: 100%;
    }

    #topHeader {
        top: 0;
        padding: 15px var(--space6p);
    }
    #topHeader .logoHolder {
        width: 85px;
    }
    #topHeader .menuHolder{
        display: none;
    }
    #topHeader .menuHolder li{
        padding: 15px 0px;
        font-size: 0.8rem;
        letter-spacing: 0.1rem;
    }
    #topHeader .btnMenu {
        display: block;
    }
    #topHeader.fixed-header .logoHolder {
        width: 80px;
    }

    footer {
        position: relative;
        height: auto;
    }
    footer .colHolder {
        width: 100%;
    }
    footer .colHolder:first-child {
        width: 100%;
        padding-bottom: 50px;
        border-bottom: var(--border-white);
    }
    footer .colHolder .btnCTA {
        margin-top: 30px;
    }
    footer .contactListing .icoHolder {
        width: 10%;
    }
    footer .copyrightHolder p{
        font-size: 0.9rem;
        letter-spacing: .1rem;
    }
    footer .socialListing a{
        font-size: 1.5rem;
    }

    .secCover {
        height: 500px;
    }
    .secCover .descHolder h1,
    .secCover .descHolder h2,
    .secCover .descHolder h3,
    .secCover .descHolder h4,
    .secCover .descHolder h5,
    .secCover .descHolder p{
        text-align: center;
    }

    .secHeading .descHolder {
        padding: 300px var(--space25p) var(--space50) var(--space25p);
    }
    .secHeading .descHolder p{
        font-size: 1rem;
        letter-spacing: 0.08rem;
    }

    #secIndex .secIntro {
        height: 100vh;
    }
    #secIndex .secIntro .descHolder {
        top: 35%;
    }
    #secIndex .secIntro .descHolder p{
        width: 100%;
        font-size: 1rem;
    }
    #secIndex .secWhatWeDo {
        padding: var(--space50) var(--space6p) var(--space100) var(--space6p);
    }
    #secIndex .secWhatWeDo .colLeft {
        width: 100%;
        padding: 20px 0 20px 0px;
        margin-right: 0;
        border-right: none;
    }
    #secIndex .secWhatWeDo .colRight {
        width: 100%;
        padding: 0px;
    }
    #secIndex .secWhatWeDo .owl-carousel .owl-nav {
        position: static;
        margin-top: 30px;
        justify-content: center;
    }
    #secIndex .secWhatWeDo .sliderHolder .item .statsHolder li{
        font-size: 1.5rem;
    }
    #secIndex .secWhatWeDo .sliderHolder .item .statsHolder li span{
        font-size: 0.9rem;
    }
    #secIndex .secAbout {
        margin-bottom: 0;
        padding: 120px var(--space6p);
    }
    #secIndex .secAbout .rowHolder .imgLeft {
        width: 100%;
        margin-top: 0;
        margin-bottom: 30px;
    }
    #secIndex .secAbout .rowHolder .imgLeft img:first-child {
        width: 100%;
        margin-bottom: 0;
    }
    #secIndex .secAbout .rowHolder .imgLeft img:last-child {
        width: 100%;
        margin-left: 0;
        display: none;
    }
    #secIndex .secAbout .descHolder {
        width: 100%;
    }
    #secIndex .secAbout .descHolder .btnCTA {
        margin-top: 30px;
    }
    #secIndex .secAbout .rowHolder .imgRight {
        width: 100%;
        display: none;
    }
    #secIndex .secAbout .rowHolder .imgRight img{
        width: 100%;
        margin-left: 0;
        display: none;
    }
    #secIndex .secMilestones {
        padding: var(--space100) var(--space6p) var(--space100) var(--space6p);
        margin-bottom: 0;
    }
    #secIndex .secMilestones .owl-carousel .owl-nav {
        position: static;
        bottom: 0;
        right: 0;
        margin-top: 30px;
        justify-content: left;
    }
    #secIndex .secMilestones .owl-carousel .owl-nav button{
        font-size: 1.5rem;
    }
    #secIndex .secMilestones .owl-dots {
        width: 100%;
    }
    .owl-carousel button.owl-dot {
        width: 100%;
        height: 3px;
        margin-right: 0px;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 0;
    }
    .owl-carousel button.owl-dot:last-child {
        margin-right: 0;
    }
    .owl-carousel button:has(~ .active) {
        background-color: var(--black);
    }

    #secOurBiz .secContent {
        margin-bottom: 0;
    }
    #secOurBiz .secListing {
        margin-bottom: 0;
    }

    #secAboutUs .secContent {
        margin-bottom: 0;
    }
    #secAboutUs .marketHolder .descHolder {
        width: 100%;
    }
    #secAboutUs .marketHolder .descHolder .btnCTA {
        margin-top: 30px;
    }

    #secContactUs .secContent {
        margin-bottom: 0;
    }
    #secContactUs .secContent .mapHolder {
        margin-bottom: 30px;
    }
    #secContactUs .secContent .mapHolder .imgHolder:after {
        padding-bottom: 60%;
    }
    #secContactUs .mapHolder .btnLearnMore {
        margin: 0 auto;
    }
    #secContactUs .secContent .infoHolder {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    #secContactUs .secContent .infoHolder .colHolder {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }
    #secContactUs .secContent .formHolder {
        width: 100%;
    }
}


/*  --------------------------------------------------
    For Mobile Landscape
    -------------------------------------------------- */
@media screen and (min-width: 601px) and (max-width: 968px) and (max-height: 419px) {
    :root{
        --space6p: 4%;
        --space15p: 4%;
        --space25p: 4%;
    }
    h1{
        margin-bottom: 10px;
        font-size: 3rem;
    }
    h1 big{
        padding: 0 3px;
    }
    h2{
        font-size: 2rem;
    }
    h3{
        font-size: 1.8rem;
    }
    input{
        height: 35px;
        padding: 0 10px;
    }
    textarea{
        height: 100px;
        padding: 10px;
    }
    select{
        height: 35px;
        padding: 0 10px;
    }
    input[type="submit"]{
        height: 35px;
    }
}


/*  --------------------------------------------------
    For Mobile Portrait
    -------------------------------------------------- */
@media only screen and (max-width: 500px) {
    :root{
        --space6p: 6%;
        --space15p: 6%;
        --space25p: 6%;
    }
    h1{
        font-size: 3rem;
    }
    h2{
        font-size: 2rem;
    }
    h3{
        font-size: 1.8rem;
    }
    h4{
        font-size: 1.8rem;
    }
    input{
        height: 6vh;
        padding: 0 2vh;
    }
    textarea{
        padding: 2vh;
    }
    select{
        height: 6vh;
        padding: 0 2vh;
    }
    input[type="submit"]{
        height: 6vh;
    }

    footer .contactListing .icoHolder {
        width: 15%;
        margin-right: 3%;
    }
    footer .copyrightHolder {
        display: block;
    }
    footer .copyrightHolder p{
        text-align: left;
    }
    footer .socialListing {
        margin-bottom: 30px;
    }

    .secCover {
        height: 420px;
    }

    .secHeading .bgHolder {
        width: 100%;
        height: 70%;
        overflow: hidden;
    }
    .secHeading .bgHolder img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .secHeading .descHolder {
        padding: 250px var(--space25p) var(--space50) var(--space25p);
    }
    
    .tileListing {
        margin: 0px;
    }
    .tileListing .item {
        width: 100%;
        margin: 0 0 20px 0px;
    }

    #secIndex .secIntro .descHolder {
        top: 35%;
    }
    #secIndex .secIntro .descHolder h1{
        font-size: 2rem;
    }
    #secIndex .secWhatWeDo .sliderHolder .item .statsHolder li{
        margin: 0 20px 0 0px;
        padding: 0 20px 0 0px;
    }
    #secIndex .secWhatWeDo .sliderHolder .item .statsHolder li span{
        font-size: 0.8rem;
    }

    #secAboutUs .tileListing {
        margin: 0;
    }
    #secAboutUs .tileListing .item {
        width: 100%;
        margin: 0 0 20px 0px;
    }

    #secContactUs .secContent .mapHolder .pinHolder .pointer {
        width: 35%;
    }
}