/* -------------------------------------
General 
------------------------------------- */
body {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-bottom: 440px;
    margin-top: 90px;
    color: #04399b;
}

@media (max-width:991px) {
    body {
        font-size: 14px;
        margin-top: 90px;
    }
}

@media (min-width:992px) and (max-width:1199px) {
    body {
        font-size: 14px;
    }
}

.bg h3 {
    margin-top: 0px;
}

.main {
    margin-bottom: 30px;
    margin-top: 30px;
}

h1, h2, h3 {
    letter-Spacing: 3px;
    text-transform: uppercase;
    font-weight: bolder;
}

html {
    scroll-behavior: smooth;
}

a {
    color: #fff;
}

a:hover, a:focus {
    color: #ff9300;
    transition: .5s ease;
    text-decoration: none;
}

.btn {
    padding: 10px 15px;
    font-size: 16px;
    letter-spacing: 1.5px;
    border: 0px solid transparent;
    border-radius: 0px;
    margin-bottom: 7px;
}

.btn-sm {
    letter-spacing: 1.5px;
    border: 0px solid transparent;
    border-radius: 0px;
    margin-bottom: 7px;
    padding: 8px 10px;
}

.btn-primary {
    color: #fff;
    background-color: #ff9300;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background-color: #e59503;
    color: #fff;
}

/* -------------------------------------
Navigation 
------------------------------------- */
/****** For switch bg color on nav-scroll *****/
/* .nav-scroll {
    font-size: 18px;
    padding: 20px 0px;
    height: 90px;
    width: 100%; 
    position: fixed;
    top: 0px;
    z-index: 20;
}

.nav-scroll.scrolled {
    background-image: linear-gradient(to right,#128ec3, #04396c) !important;
    -webkit-transition: background-image 0.5s linear;
    -moz-transition: background-image 0.5s linear;
    -ms-transition: background-image 0.5s linear;
    -o-transition: background-image 0.5s linear;
    transition: background-image 0.5s linear;
} */

.nav-scroll {
    font-size: 16px;
    padding: 20px 0px;
    height: 90px;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 35;
    background-color: #0b6397;
    background-image: linear-gradient(to right,#128ec3, #89abcb) !important;
}


nav li a {
    line-height: 50px;
    padding: 10px 5px;
    text-transform: uppercase;
}

nav .list-inline {
    margin-bottom: 0px;
}

nav .logo {
    max-height: 50px;
}

nav .fa-solid.fa-bars {
    line-height: 50px;
}

/* -------------------------------------
Menu
------------------------------------- */
.modal-btn {
    cursor: pointer;
    color: #fff;
    font-size: 36px;
    text-align: right;
    float: right;
    margin-top: -10px;
}

#IntelliMenu .modal-dialog {
    margin: 0px;
    height: 100%;
}

#IntelliMenu .modal-content {
    position: relative;
    background-color:#6497b1;
    -webkit-background-clip: none;
    background-clip: none;
    border: 0px solid #999;
    border: 0px solid rgba(0, 0, 0, .2);
    border-radius: 0px;
    outline: 0;
    -webkit-box-shadow: 0 0 0x rgba(0, 0, 0, .5);
    box-shadow: 0 0 0 rgba(0, 0, 0, .5);
    height: 100%;
    color: #fff;
}

#IntelliMenu .modal-close {
    line-height: 28px;
}
#IntelliMenu .modal-header {
    padding: 30px;
    text-align: right;
    border: 0px;
}

#IntelliMenu .modal-body {
    position: relative;
    padding: 15px;
}

#IntelliMenu .list-group {
    padding-left: 0;
    margin-bottom: 20px;
    text-align: center;
}

#IntelliMenu .list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: transparent;
    border: 0px solid #ddd;
}

#IntelliMenu .list-group-item a {
    font-size: 26px; 
    padding: 15px;
}

@media (min-width: 768px) {
    #IntelliMenu .modal-dialog {
        width: 50%;
        float: right;
    }
}

/* -------------------------------------
Carousel 
------------------------------------- */
@media screen and (min-width: 768px) {
    .carousel-control .fa-chevron-left, .carousel-control .icon-prev {
        margin-left: -15px;
    }

    .carousel-control .fa-chevron-right, .carousel-control .icon-next {
        margin-right: -15px;
    }
}

@media screen and (min-width: 768px) {
    .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
        width: 30px;
        height: 30px;
        margin-top: -15px;
        font-size: 30px;
    }
}

.privacy {
    color: #04396c;
}

.privacy h2 {
    text-decoration: none;
    text-transform: capitalize;

}

.strap {
    position: absolute;
    height: 100%;
    z-index: 31;
    width: 100%;
    top: 40%;
}

.strap .strap-title {
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .7);
    color: #fff;
}

.devices .strap-title {
    margin: 0px 0px 20px 0px;
}

.carousel-indicators {
    z-index: 32;
    bottom: 10px;
}

.carousel-control .icon-prev, .carousel-control .fa-chevron-left {
    left: 50%;
    margin-left: -10px;
}

.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
}

.carousel-control .icon-next, .carousel-control .fa-chevron-right {
    right: 50%;
    margin-right: -10px;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    line-height: 1;
    width: 100%;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.6)
    ),;
}

.carousel-indicators li {
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: 0px solid #fff;
    border-radius: 50%;
}

.carousel-indicators .active {
    width: 30px;
    height: 30px;
    margin: 0;
    background-color: #ff9300;
}

@media (min-width:768px) {
    .carousel-caption {
        font-size: 26px;
        padding-bottom:  40px;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, .9);
    }
}

@media (max-width:767px) {
    .carousel-caption {
        padding: 0px;
    }

    .carousel-indicators {
        bottom: -5px;
    }
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  background: rgba(0,0,0,0.6);
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
  /* background: rgba(0,0,0,0.6); */
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

/* -------------------------------------
Index
------------------------------------- */
.bg.palette1 {
    background-color: #04396c;
    color: #fff;
}

.bg.palette2  {
    background-color: #035b96;
    color: #fff;
}

.bg.palette3  {
    background-color: #128ec3;
    color: #fff;
}

.bg.palette4  {
    background-color: #6497b1; 
    color: #fff;
}

.h-100 {
    height:100%;
}

.wrapper {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    align-items: center;
    width: 80%;
    margin:auto;
    line-height: 28px;
    padding: 15px 0px;
}

.index-container > .bg > .row.media-row .img-col {
    padding: 0px;
}

@media (min-width:992px) and (max-width:1199px) {
    .wrapper {
        width: 90%;
        line-height: 23px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .wrapper {
        width: 100%;
        padding: 0px;
    }
    .bg {
        padding: 30px;
    }
}

@media (max-width:767px) {
    .wrapper {
        width:100%;
        padding: 30px;
    }

    .bg h3 {
        margin-top: 20px;
    }
}

/* -------------------------------------
Products
------------------------------------- */
.square li:before {
    content:" ";
    width: 18px;
    height: 18px;
    border: 0px solid #fff;
    position: absolute;
    left: 0px;
    margin-top: 5px;
    background-color: #ff9300;
}

.square {
    position: relative;
    padding-left: 30px;
}

/* -------------------------------------
Forms
------------------------------------- */
form .control-label {
    font-weight: normal;
}

form .form-group [class*="col-sm"] {
    width:100%;
}

form .form-group .col-sm-offset-3 {
    margin-left: 0%;
}

form .form-group {
    margin-bottom: 30px;
}

#touch {
    background-color: #035b96;
    color: #fff;
    padding: 30px;
}

#enquire {
    height: 100%;
    background-color: #128ec3;
    color: #fff;
    padding: 30px;
}

#enquire .section {
    margin-bottom:60px;
}

form .form-control {
    font-size: 16px;
    color: #555;
    background-color: #fff;
    border: 0px solid #ccc;
    border-radius: 0px;
}

.row.media-row {
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
}

.media-row > div[class*='col-'] {  
	display: flex;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
	display: -moz-box;
	flex-direction: column;
}

@media (min-width:768px) {
    .container.contact .col-sm-6, .container.contact .col-sm-12 {
        padding: 0px;
    }
}

.container.contact {
    margin-bottom:30px;
}

.section i {
    font-size: 20px;
    margin-right: 10px;
}

.contact-container {
    position: relative;
}

.image {
    display: block;
    width: 100%;
    height: auto;
}

.text {
    color: white;
    font-size: 20px;
    position: absolute;
    white-space: nowrap;
    left: 0px;
    bottom: 0px;
    padding: 5px 10px;
}

.overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

@media (max-width: 991px) {
    .riorancho .text {
        background-color: #6497b1;
    }

    .maroochydore .text {
        background-color: #04396c;
    }

    .christchurch .text {
        background-color: #04396c;
    }

    .calgary .text{
        background-color: #128ec3;
    }

    .brighton .text {
        background-color: #035b96;
    }

    .text {
        color: white;
        font-size: 20px;
        position: absolute;
        white-space: nowrap;
        left: 0px;
        bottom: 0px;
        padding: 5px 10px;
    }
}

@media (min-width:992px) {
    .text {
        color: white;
        font-size: 20px;
        position: absolute;
        white-space: nowrap;
        top: 60%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .maroochydore .overlay, .christchurch .overlay {
        position: absolute;
        bottom: 0;
        left: 100%;
        right: 0;
        overflow: hidden;
        width: 0;
        height: 100%;
        transition: .5s ease;
        opacity: 0.9;
    }

    .maroochydore:hover .overlay, .christchurch:hover .overlay {
        width: 100%;
        left: 0;
    }

    .riorancho .overlay, .calgary .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        width: 0;
        height: 100%;
        transition: .5s ease;
        opacity: 0.9;
    }

    .riorancho:hover .overlay, .calgary:hover .overlay {
        width: 100%;
    }

    .riorancho .overlay {
        background-color: #6497b1;
    }

    .maroochydore .overlay {
        background-color: #04396c;
    }

    .christchurch .overlay {
        background-color: #04396c;
    }

    .calgary .overlay {
        background-color: #128ec3;
    }

    .brighton .overlay {
        position: absolute;
        background-color: #035b96;
        bottom: 100%;
        left: 0;
        right: 0;
        overflow: hidden;
        width: 100%;
        height:0;
        transition: .5s ease;
        opacity: 0.9;
    }

    .brighton:hover .overlay {
    bottom: 0;
    height: 100%;
    }
}

/* -------------------------------------
Devices
------------------------------------- */
.devices {
    padding: 20px;
    background-image: linear-gradient(to left,#128ec3, #89abcb) !important;
    color: #fff;
    text-align: center;
}

.devices .fa-solid {
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 30px;
}

.devices .fa-desktop {
    font-size: 60px;
}

.devices .fa-laptop {
    font-size: 48px;
}

.devices .fa-tablet-alt {
    font-size: 36px;
}

.devices .fa-mobile-alt {
    font-size: 24px;
}

@media (max-width: 991px) {
    .devices .fa-solid {
        margin-right: 5px;
    }

    .devices .fa-desktop {
        font-size: 42px;
    }

    .devices .fa-laptop {
        font-size: 34px;
    }

    .devices .fa-tablet-alt {
        font-size: 24px;
    }

    .devices .fa-mobile-alt {
        font-size: 20px;
    }

    .devices {
        padding: 15px;
    }
}


/* -------------------------------------
About
------------------------------------- */
.about.top {
    background-color: #043a6d;
}

.about.middle {
    background-color: #6497b1;
}

.about.bottom {
    background-color: #128ec3;
}

.about i {
    font-size: 100px;
    color: #ffffff;
    margin-bottom: 60px;
}

.about {
    color: #fff;
    padding: 80px;
    text-align: center;
    margin-bottom: 30px;
}

.title {
    padding: 30px 60px 60px 60px;
    color: #04396c;
}

.about-wrap p {
    text-align: left;
}

@media (max-width: 767px) {
    .title {
        padding: 0px 60px 30px 60px;
        color: #04396c;
    }
}



/* -------------------------------------
Cookies
------------------------------------- */
#cookie_accept a {
    font-weight: bold;
}

#cookie_accept .text-muted {
    color: #ddd;
}

.navbar.navbar-default.navbar-fixed-bottom {
    padding: 35px 0px 10px 0px;
    background-color: #031d35;
    border-color: #031d35;
    color: #fff;
    -webkit-box-shadow: 0px -1px 11px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -1px 11px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -1px 11px 0px rgba(0,0,0,0.75);
}

.pointer {
    cursor: pointer;
}

#siteCookies .btn-sm {
    padding: 4px 8px;
}


/* -------------------------------------
Solutions & Resources
------------------------------------- */
.cards .circle {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: auto;
}

#solutions .circle {
    background-color: #ffffff;
}

#resources .circle {
    background-color: #99bbcd;
}

.cards i.fa-solid {
    font-size: 8rem;
    padding: 3.25rem 0rem;
}

#solutions i.fa-solid {
    color: #99bbcd;
}

#resources i.fa-solid {
    color: #fff;
}

.cards .card {
    padding: 4rem;
    border-radius: 2rem;
    min-height: 400px;
    margin-bottom: 3rem;
}

#solutions .card {
    background-color: #f5f5f5;
}

#resources .card {
    background-color: #f5f5f5;
    min-height: 350px;
}

.cards .card .card-title {
padding: 2rem 0rem;
font-weight: bolder;
color: #6396b1;
}

#resources a.card-link .card:hover {
    background-color: #fff !important;
    box-shadow: 0px 0px 50px #d7d7d7;
}


/* -------------------------------------
Footer
------------------------------------- */
.footer-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    min-height: 330px;
    background-color: #043a6d;
}

.footer {
    font-size: 12px;
}

.subfooter {
    padding: 30px 0px;
    background-image: linear-gradient(to right,#128ec3, #89abcb) !important;
}

i.fab.fa-linkedin {
    font-size: 40px;
}

.copyright {
    text-align: center;
}

@media (min-width:768px) {
    .footer-btn {
        float: right;
    }
}

@media (max-width:767px) {
    .social, .footer-btn  {
        text-align: center;
    }
}