.bg-blue{
    background-color: #2F4363 !important;
}

.bg-blue-2{
    background-color: #39518e !important;
}

.bg-blue-3{
    background-color: #e4e6ec !important;
}

.bg-blue-4{
    background-color: #2b3a56 !important;
}

.bg-grey{
    background-color: #8D8F92 !important;
}

.bg-grey-2{
    background-color: #32302f !important;
}

.bg-black{
    background-color: #111112 !important;
}

.bg-black-line {
    /* background-color: #3f3F46; */
    background-color: hsl(240 5.3% 26.1%);
}

.bg-red{
    background-color: #C32C21 !important;
}

.bg-clear{
    background-color: none;
}

.text-black{
    color:  hsl(240 5.3% 26.1%) !important;
}

.text-white{
    color:white !important;
}

.text-red{
    color: #C32C21 !important;
}

.text-small{
    font-size: 0.85rem;
}

.btn-bg-blue{
    background-color: rgb(114, 126, 165) !important;
    border-color: rgb(114, 126, 165) !important;
    color:#fff;
}

.btn-bg-blue-2{
    background-color: #1b2642 !important;
    border-color: #1b2642 !important;
    color: #fff !important;
}

.btn-bg-blue-3{
    background-color: #2b3a56 !important;
    border-color: #2b3a56 !important;
    color: #fff !important;
}



.btn-bg-blue-2:hover{
    transform: scale(1.2);
}

.btn-bg-blue-3:hover{
    transform: scale(1.2);
}



input::placeholder {
  color: #fff !important;
}

input[type="text"]{
    color: white !important;
}

textarea::placeholder {
  color: #fff !important;
}

textarea{
    color: white !important;
}

textarea:focus {
  border-color: rgb(181, 185, 204) !important;
  box-shadow: none !important;
}

input:focus {
  border-color: rgb(181, 185, 204) !important;
  box-shadow: none !important;

}

.text-white-link{
    text-decoration: underline;
    color: #fff !important;
}

.btn {
  transition: transform 0.2s ease-in-out;
}

.btn-expand:hover {
  transform: scale(1.2);
}

.nav-item{
    margin-left: 2.5px;
    margin-right: 2.5px;
}

.header_logo {
    max-height: 80px;
}

.redcircle {
    display: inline-block !important;
    vertical-align: middle !important;
    padding: 4px !important;
    color: white !important;
    background-color: #C32C21 !important;
    border-radius: 50% !important;
}

.blueslant {
  position: relative;
  background-color: #2F4363;
  z-index: 1;
  overflow: visible;
}

.blueslant::before,
.blueslant::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  background-color: #2F4363;
  z-index: -1;
}

.blueslant::before {
  left: -20px;
  transform: skewX(20deg);
}

.blueslant::after {
  right: -10px;
  transform: skewX(20deg);
}


/* Customise Navbar Toggler */
    .custom-toggler {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        background-color: #2F4363;
        border: none;
        border-radius: 4px;
        padding: 0;
        position: relative;
        /* z-index: 1051; */
    }

    .toggler-bar {
        position: absolute;
        width: 24px;
        height: 2px;
        background-color: white;
        transition: all 0.3s ease;
        border-radius: 1px;
    }

    .toggler-bar:nth-child(3) {
        top: 32px;
    }

    .custom-toggler:not(.collapsed) .toggler-bar:nth-child(1) {
        transform: rotate(45deg);
        top: 24px;
    }

    .custom-toggler:not(.collapsed) .toggler-bar:nth-child(2) {
        opacity: 0;
    }

    .custom-toggler:not(.collapsed) .toggler-bar:nth-child(3) {
        transform: rotate(-45deg);
        top: 24px;
    }

/* End Customise Navbar Toggler */


.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1000;
}

.skip-link:focus {
  left: 10px;
  top: 10px;
  width: auto;
  height: auto;
  padding: 8px 16px;
  background: #2F4363;
  color: white;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
}

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-success hr {
    border-top-color: #b1dfbb;
}

.alert-success .alert-link {
    color: #0b2e13;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-danger hr {
    border-top-color: #f1b0b7;
}

.alert-danger .alert-link {
    color: #491217;
}

.page_header{
    position:relative;
    padding:60px 40px;
    display:flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-items: stretch;
    justify-content: space-between;
    color: hsl(240 5.1% 15%);
    z-index:0;
    background-image:URL("/images/SSeriesIMG_2284.jpg");

    background-position:center right;
    background-size:cover;
    min-height: 198px;
    overflow: hidden;

    box-shadow: 0px -6px 18px rgba(255, 255, 255, 0.4), 0px 6px 18px rgba(0, 0, 0, 0.4);

}


.welcome_section {
    background-image: url("/images/logo_top_lg.png");
    background-position: bottom right;
    background-repeat:no-repeat;
    padding:40px;
    width:calc(100% - 80px);
}

.thickshortline-white {
    border-top:4px solid white;
    border-left:none;
    border-right:none;
    border-bottom:none;
    width:10%;
    margin:2rem auto;
}

.thickshortline-red {
    border-top:4px solid #C32C21;
    border-left:none;
    border-right:none;
    border-bottom:none;
    width:10%;
    margin:2rem auto;
}

.design_section{
    padding: 60px;
    box-shadow: 0px -6px 18px rgba(255, 255, 255, 0.4), 0px 6px 18px rgba(0, 0, 0, 0.4);
}

.featured_section{
    padding: 60px;
    box-shadow: 0px -6px 18px rgba(255, 255, 255, 0.4), 0px 6px 18px rgba(0, 0, 0, 0.4);
}

.features_border{
    border: 4px solid white;
}

.feature_image_section {
    width:225px;
    height:225px;
    display: flex;
    text-align: center;
}

.feature_image {
    width:225px;
    height:225px;
    border:4px solid hsl(0, 0%, 100%);
    background-color: #111112;
}

.like_what_you_see{
    padding: 60px;
    box-shadow: 0px -6px 18px rgba(255, 255, 255, 0.4), 0px 6px 18px rgba(0, 0, 0, 0.4);
}

.column_box{
    background-image: url("/images/bg_red2.jpg");
    background-size:cover;
}

.row_box_top{
    background-image: url("/images/bg_blue1.jpg");
    background-size:cover;
}

.row_box_bottom{
    background-image: url("/images/bg_grey1.jpg");
    background-size:cover;
}

.testimonials_section {
    background-image:url("/images/bg_blue2.jpg");
    background-size:cover;
    color:hsl(0, 0%, 100%);

    text-align:center;
    box-shadow: 0px -6px 18px rgba(255, 255, 255, 0.4), 0px 6px 18px rgba(0, 0, 0, 0.4);

}

.rightimg {
    float:right;
    max-width:40%;
    margin:0px 0px 1rem 1rem;
}
.leftimg {
    float:left;
    max-width:40%;
    margin:0px 1rem 1rem 0px;
}
@media only screen and (max-width:815px) /*and (orientation: portrait)*/ {
    .pn-blog-content .rightimg,
    .rightimg {
        float:none;
        display:block;
        max-width:100%;
        margin:10px 0px;
    }
    .leftimg {
        float:none;
        display:block;
        max-width:100%;
        margin:10px 0px;
    }
}

.blog_image{
    max-width:256px;
    max-height:256px;
    background-color:hsl(0, 0%, 100%);
    padding:4px;
    border:1px solid hsl(240 4.9% 83.9%);
    box-shadow:-2px 2px 4px rgba(0, 0, 0, 0.2);
}

.blog-post-link:hover {
    background-color: #f9f9fb !important;
    border-color: #b5b9cc !important;
    color: #33497f !important;
    text-decoration: none;
}

.first-content{
    margin-top: 50px;
    margin-bottom: 50px;
    /* padding: 30px 30px 30px 3px; */

}

a {
    color: #33497f;
}

.quote::before {
    content: "“";
    float: left;
    font-weight: bold;
    font-size: 5rem;
    line-height: 0.65;
    margin: 0.4rem 0.1rem 0.1rem -3rem;
}

.quote {
    padding-left: 3rem;
    font-style: italic;
}

.gallery_section{
    background-color: #32302f;
    color: hsl(0 0% 97.5%);
    padding: 60px;
    text-align: center;
    position: relative;
    box-shadow: 0px -6px 18px rgba(255, 255, 255, 0.4), 0px 6px 18px rgba(0, 0, 0, 0.4);
}

.gallery_list_item{
    height: auto;
    color: hsl(0, 0%, 100%) ! important;
    text-decoration: none ! important;
    cursor: pointer;
    --sl-focus-ring: solid 3px rgba(255, 2525, 255, 0.6);
}

.gallery_item{
    width: 256px;
    height: 256px;
    background-color: hsl(0, 0%, 0%);
    border: 4px solid hsl(0, 0%, 100%);
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.2);
}

.gallery-image{
    max-height: 217px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #39518e !important;
    color: white !important;
}



.google-landing-page-header {
    position: relative;
    background-size: cover;
    background-position: right center;
    box-shadow: 0px -6px 18px rgba(255, 255, 255, 0.4), 0px 6px 18px rgba(0, 0, 0, 0.4);

}

.google-landing-page-title {
    clear: both;
    background-color: rgba(255, 255, 255, 0.6);
    color: #39518e;
    text-align: right;
    position: relative;
    top: -15px;
}


.white-line {
    background-color: white !important;
    width: 100% !important;
    position: relative;
    top: -20px;
}