/*
Theme Name: Pivotal Systems
Theme URI: https://www.pivotalsys.com
Description: Official Theme of Pivotal Systems
Version: 1.000
Author: Pivotal Systems
Author URI: https://www.pivotalsys.com
*/

html {
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    min-width: 320px;
}

body {
    margin: 0;
    padding: 0;
	color: #222;
    background: #fff;
    min-width: 320px;
    font-family: "Kanit", sans-serif;
    font-size: 20px;
    font-weight: 200;
    font-optical-sizing: auto;
    overflow-x: hidden;
}

a {
    color: #a4353b;
	text-decoration: none;
}

	a:hover {
		color: #d89830;
	}

	a:focus {
		outline: none;
	}
	
button::-moz-focus-inner {
	border: 0; 
}

input:focus {
	outline: none;
}

input::-moz-focus-inner {
	border: 0; 
}

hr {
	height: 4px;
	color: #d89830;
	background-color: #d89830;
	border: 0px;
}

img {
	border: none;
}

.clear {
	clear: both;
}

.clear-left {
	clear: left;
}

table {
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

tr, td {
	padding: 0;
	margin: 0;
}

h1 {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    line-height: 100%;
    color: #202322;
    font-size: 60px;
}

h2 { 
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    color: #202322;
}

h2.option {
    margin-block-start: 40px;
}

h3 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 100%;
    color: #202322;
}

h4 {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 100%;
    color: #202322;
}

.horizontal-line {
    margin: 0;
    padding: 0;
    height: 10px;
    background-color: #d89830;
}

.white {
    color: #fff;
}

strong {
    font-weight: 500;
}

figcaption {
    font-size: 17px;
    font-weight: 400;
}



/* Buttons */

.button {
    text-transform: uppercase;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 25px;
    line-height: 25px;
    padding: 10px;
    background-color: #a4353b;
    color: #efb32f;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 10px;
}

.button-small {
    text-transform: uppercase;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    line-height: 18px;
    padding: 7px;
    background-color: #a4353b;
    color: #efb32f;
    font-weight: 500;
    display: inline-block;
    margin-bottom:5px;
}

.button:hover, .button-small:hover {
    color: #a4353b;
    background-color: #efb32f;
}

.button-wrap-right {
    text-align: right;
    padding: 10px 0;
}



/* Header */

#header {
    height: 100px;
    background-color: #fff;
    border-bottom: 10px solid #d58628;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
}

    .home #header {
        background-color: transparent;
        border: none;
        padding-bottom: 10px;
        position: absolute;
    }

#header-spacer {
    height: 110px;
    background-color: #277451;
}

.page-template-page-home #header-spacer {
    display: none;
}

#logo {
    height: 80px;
    width: 208px;
    background-image: url('style/pivotal-logo.png');
    background-size: 100% 100%;
    overflow: hidden;
    text-indent: -9999px;
    float: left;
    margin: 10px;
    display: block;
}

    .home #logo {
        background-image: url('style/pivotal-logo-white.png'); 
    }

#menu {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 300;
    color: #636b68;
    float: right;
    font-size: 30px;
    line-height: 30px;
    text-transform: uppercase;
}

#menu a {
    color: #636b68;
    display: inline-block;
    margin-right: 10px;
    line-height: 100px;
}

    .home #menu a {
        color: #fff;
    }

#menu a:hover {
    color: #a4353b;
}

    .home #menu a:hover {
        color: #efb32f;
    }

#menu a.menu-linkedin {
    background-image: url('style/linkedin-light-green.png');
    background-size: 100% 100%;
    display: block;
    float: right;
    height: 40px;
    width: 40px;
    overflow: hidden;
    text-indent: -9999px;
    margin: 30px 30px 0 10px;
}

    .home #menu a.menu-linkedin {
        background-image: url('style/linkedin-white.png');
    }

#menu-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-image: url('style/menu.png');
    background-size: 60px 120px;
    background-position: 0px 0px;
    cursor: pointer;
    z-index: 1001;
    display: none;
}

    .home #menu-toggle {
        background-image: url('style/menu-white.png');
    }

#dropdown-menu {
    position: absolute;
    width: 100%;
    top: 100px; /* Positioned below the toggle button */
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 1000;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    display: none;
    position: fixed;
    box-sizing: border-box;
}

#dropdown-menu a.menu-linkedin {
    background-image: url('style/linkedin-red.png');
    background-size: 100% 100%;
    display: inline-block;
    height: 40px;
    width: 40px;
    overflow: hidden;
    text-indent: 9999px;
    margin: 10px 0 0 0;
}

#dropdown-menu.active {
    max-height: 600px;
}

#dropdown-menu .menu-container {
    padding: 0 30px 30px 30px;
    text-align: right;
    border-bottom: 10px solid #d58628;
}

#dropdown-menu a {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 300;
    color: #636b68;
    text-decoration: none;
    display: block;
    font-size: 40px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#dropdown-menu.active a {
    opacity: 1;
    transform: translateY(0);
}

#dropdown-menu a:hover {
    color: #a4353b;
}

@media (max-width: 1000px) {

    #menu {
        display: none;
    }

    #menu-toggle, #dropdown-menu { 
        display: block;
    }
}



/* Page Heading */

#page-head-wrap {
    border-bottom: 10px solid #d58628;
    background-color: #277451;
    background-image: url('style/page-head.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: auto 250%;
}

#page-head {
    width: 100%;
    max-width: 1260px;
    padding: 0 30px;
    margin: 0 auto;
    box-sizing: border-box;
}

#page-head h1 {
    color: #fff;
    margin: 0;
    padding: 90px 0 10px 0;
    font-weight: 500;
    font-size: 60px;
    line-height: 100%;
}


@media (max-width: 1280px) {

    #page-head-wrap {
        background-size: 50% auto;
    }

}


/* Wide Graphic 4000px x 1000px */


@media (min-width: 2001px) {

    #wide-graphic-wrap {
        position: relative;
        width: 100%;
        background-size: 100% auto;
        background-position: center top;
    }

    #wide-graphic-wrap:before{
        content: "";
        display: block;
        padding-top: 25%;
    }

    #wide-graphic {
        position: absolute;
        top: 0;
        left: 25%;
        bottom: 0;
        right: 25%;
    }

}


@media (min-width: 1001px) and (max-width: 2000px) {

    #wide-graphic-wrap {
        background-size: 2000px auto;
        background-position: center top;
    }
    
    #wide-graphic {
        width: 1000px;
        height: 500px;
        margin: 0 auto;
    }

}

@media (min-width: 0px) and (max-width: 1000px) {

    #wide-graphic-wrap {
        position: relative;
        width: 100%;
        background-size: 200% auto;
        background-position: center top;
    }

    #wide-graphic-wrap:before{
        content: "";
        display: block;
        padding-top: 50%;
    }

    #wide-graphic {
        position:  absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

}





/* Wide Graphic 4000px x 640px */


#products-header h2 {
    margin: 0;
    padding-top: 30px;
}

#products-header p {
    line-height: 120%;        
}

@media (min-width: 2001px) {

    #products-header-wrap {
        position: relative;
        width: 100%;
        background-size: 100% auto;
        background-position: center top;
    }

    #products-header-wrap:before{
        content: "";
        display: block;
        padding-top: 16%;
    }

    #products-header {
        position: absolute;
        top: 0;
        left: 25%;
        bottom: 0;
        right: 25%;
        width: 600px;
        padding-right: 600px;
        padding-left: 30px;
    }

}


@media (min-width: 1001px) and (max-width: 2000px) {

    #products-header-wrap {
        background-size: 2000px auto;
        background-position: center top;
    }
    
    #products-header {
        width: 520px;
        padding-right: 710px;
        padding-left: 30px;
        height: 320px;
        margin: 0 auto;
    }

}

@media (min-width: 0px) and (max-width: 1000px) {

    #products-header-wrap {
        position: relative;
        width: 100%;
        background-size: 200% auto;
        background-position: center 2000px;
        background-repeat: no-repeat;
    }


    #products-header {
        position: default;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
    }

}




/* Content */

.content {
    width: 100%;
    max-width: 1260px;
    padding: 30px;
    margin: 0 auto;
    box-sizing: border-box; 
}

.content-wrap-green {
    background-color: #1b5e42;
    border-top: 10px solid #d58628;
    border-bottom: 10px solid #d58628;
}





/* About Page */



#mission-wrap {
    background-color: #202321;
}


#mission {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    padding: 50px 30px 50px 30px;
    box-sizing: border-box;
    display: flex;
}

    #mission-target {
        width: 25%;
        box-sizing: border-box;
        background-image: url('style/target.jpg');
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #mission-divider {
        width: 5px;
        background-color: #d58628;
        align-self: stretch;
        margin-left: 20px;
      }

    #mission-statement {
        width: 75%;
        padding: 0 0 30px 30px;
        box-sizing: border-box;
        color: #fff;
        font-weight: 200;
    }

    #mission-statement h2 {
        color: #fff;
        text-transform: uppercase;
    }


#commitment-wrap {
    background-color: #277451;
    border-bottom: 10px solid #d58628;
}


#commitment {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    padding: 50px 30px 50px 30px;
    box-sizing: border-box;
    display: flex;
}

    #commitment-graphic {
        width: 25%;
        box-sizing: border-box;
        background-image: url('style/commitment.png');
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #commitment-divider {
        width: 5px;
        background-color: #4da585;
        align-self: stretch;
        margin-left: 20px;
        }

    #commitment-statement {
        width: 75%;
        padding: 0 0 30px 30px;
        box-sizing: border-box;
        color: #fff;
        font-weight: 200;
    }

    #commitment-statement h2 {
        color: #fff;
        text-transform: uppercase;
    }

#values-wrap {
    padding: 60px 30px 80px 30px;
    background-color: #3f4442;
    border-top: 10px solid #a1acab;
}

    #values {
        width: 100%;
        box-sizing: border-box;
        display: flex;
    }

    #values-wrap h2 {
        margin: 0 0 20px 0; 
        color: #efb32f;
    }

    #values-wrap h2 span {
        font-weight: 300;
    }

    .value {
        width: 33.3%;
        box-sizing: border-box;
        color: #fff;
        font-family: "Barlow Condensed", sans-serif;
        font-weight: 300;
        font-size: 24px;
        line-height: 100%;
        padding: 1px 30px 20px 30px;
        border-radius: 10px;
    }

    .value ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .value li {
            margin: 0 0 15px 0;
            padding: 0 0 0 15px;
            display: block;
            background-position: left 7px;
            background-size: 10px 10px;
            background-repeat: no-repeat;
        }

    .value h3 {
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        margin: 50px 0 50px 0;
    }

    #value-tech {
        background-color: #d58628;
        margin-right: 20px;
    }

        #value-tech li {
            background-image: url('style/square-yellow-light.png')
        }

    #value-supplier {
        background-color: #277451;
        margin-right: 20px;
    }

        #value-supplier li {
            background-image: url('style/square-green-light.png')
        }

    #value-partner {
        background-color: #a3343b;
    }

    
        #value-partner li {
            background-image: url('style/square-red-light.png')
        }

#apart-wrap {
    background-color: #1f5d41;
    background-image: url('style/green-greater-than.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% auto;
    margin: 0 0 0 0;
    border-top: 10px solid #d58628;
    border-bottom: 10px solid #d58628;
}

    #apart {
        max-width: 1260px;
        width: 100%;
        margin: 0 auto;
        padding: 60px 30px 60px 30px;
        box-sizing: border-box;
        display: flex;
        color: #fff;
    }

    .apart-column {
        width: 50%;
        box-sizing: border-box;
    }

    .apart-column h2 {
        color: #fff;
        margin-bottom: 0;
    }

    .apart-column h3 {
        color: #efb32f;
        text-transform: uppercase;
        margin-bottom: 0;
    }

    .apart-column p {
        margin-top: 0;
    }

#team-wrap {
    margin: 0 0 50px 0;
}

.team {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 30px 30px 30px;
    box-sizing: border-box;
    display: flex;
}

    .team-left {
        width: 25%;
        box-sizing: border-box;
    }

        .team-profile {
            border-radius: 50%;
            overflow: hidden;
        }

        .team-profile img {
            display: block;
            width: 100%;
            height: auto;
        }

    .team-right {
        width: 75%;
        box-sizing: border-box;
        padding: 0 0 0 20px;
    }

        .team h3 {
            margin: 30px 0 10px 0;
        }

        .team h4 {
            margin: 0 0 30px 0;
            text-transform: uppercase;
            font-size: 24px;
        }

        .team p {
            margin: 0;
        }

#map {
    width: 100%;
    display: block;
    max-width: 1700px;
    margin: 0 auto 30px auto;
}


@media (max-width: 1000px) {

    #mission-target {
        width: 33.3%;
    }

    #mission-statement {
        width: 66.6%;
    }

    .team-left {
        width: 33.3%;
    }

    .team-right {
        width: 66.6%;
    }

}

@media (max-width: 800px) {

    #mission-target {
        width: 50%;
    }

    #mission-statement {
        width: 50%;
    }

    #values {
        flex-direction: column;
    }

    .value {
        width: 100%;
        margin-bottom: 20px;
    }

    #apart-wrap {
        background-size: 300%;
    }

    #apart {
        flex-direction: column;
    }

    .apart-column {
        width: 100%;
    }

}

@media (max-width: 600px) {

    #mission {
        flex-direction: column;
    }

    #mission-target {
        width: 100%;
        height: 200px;
    }

    #mission-statement {
        width: 100%;
        padding: 0;
    }

    #mission-statement h2 {
        text-align: center;
    }

    #mission-divider {
        width: 100%;
        height: 5px;
        margin-left: 0;
        margin-top: 20px;
      }

    .team {
        flex-direction: column;
    }

    .team-left, .team-right {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .team h3, .team h4 {
        text-align: center; 
    }

}






/* Applications Page */

#applications-header {
    border-top: 5px solid #d58628;
    border-bottom: 5px solid #fff;
    background-color: #3f4442;
    padding: 20px 0 20px 0;
}

#applications-header h2 {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px 0 30px;
    box-sizing: border-box;
    display: flex;
    color: #fff;
    text-transform: uppercase;
}

.application {
    min-height: 400px;
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px 0 30px;
    box-sizing: border-box;
    display: flex;
}

    .application-spacer {
        width: 60%;
        box-sizing: border-box;
    }

    .application-details {
        width: 40%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .application-details h3 {
        font-size: 35px;
        margin: 30px 0 0 0;
    }

    .application-details p {
        font-weight: 300;
    }

@media (min-width: 2001px) {

    .application-wrap {
        position: relative;
        width: 100%;
        background-size: 100% auto;
        background-position: center top;
        border-bottom: 5px solid #fff;
    }

    .application-wrap:before{
        content: "";
        display: block;
        padding-top: 20%;
    }

    .application {
        position: absolute;
        top: 0;
        left: 25%;
        bottom: 0;
        right: 25%;
    }

}

@media (max-width: 2000px) {

    .application-wrap {
        min-height: 400px;
        background-size: auto 100%;
        background-position: center top;
        border-bottom: 5px solid #fff;
        background-repeat: no-repeat;
    }

}

@media (max-width: 700px) {

    .application-wrap {
        background-size: auto 200px;
        background-position: 10% top;
    }

    .application-left.application-wrap {
        background-position: right top;
    }

    .application {
        flex-direction: column;
    }

    .application-spacer {
        width: 100%;
        height: 200px;
    }

    .application-details {
        width: 100%;
    }

    .application-left .application-details {
        margin-top: 200px;
    }

    .application-left .application-spacer {
        display: none;
    }

}




/* Contact Page */


#contact-locations {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.contact-location {
    width: calc(50% - 10px);
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    background-color: #202321;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 22px;
    padding-bottom: 10px;
}

    .contact-location img {
        width: 100%;
        display: block;
        border-bottom: 10px solid #a4353b;
    }

    .contact-location h3 {
        margin: 20px 20px 10px 20px;
        color: #efb32f;
        font-size: 40px;
    }

    .contact-location h4 {
        margin: 10px 20px 30px 20px;
        color: #fff;
    }

    .contact-location p {
        margin: 10px 20px 10px 20px;
    }

@media (max-width: 800px) {

    #contact-locations {
        flex-direction: column;
    }

    .contact-location {
        width: calc(100%);
    }

}





/* News Page */

.news-image {
    width: auto;
    max-width: 50%;
    max-height: 600px;
    padding: 0 0 20px 20px;
    box-sizing: border-box; 
    float: right;
}

.news-date {
    font-family: "Barlow Condensed", sans-serif;
    text-transform: uppercase;
    color: #a2acab;
    font-size: 25px;
    font-weight: 500;
}

@media (max-width: 800px) {

    .news-image {
        width: 100%;
        max-width: none;
        max-height: none;
        padding: 0 0 20px 0;
    }
}



/* Home Main Feature */

.home-main-feature-wrap {
    background-image: url('style/product-bg.png');
    background-size: auto 100%;
    background-repeat: repeat-x;
}

.home-main-feature-emblem-left {
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
    transition: background-image 2s ease-in-out;
}

.home-main-feature-emblem-right {
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right top;
    height: 45vw;
    max-height: 780px;
    padding-top: 110px;
    transition: background-image 2s ease-in-out;
}

.home-main-feature-product {
    width: 50%;
    left: 50%;
    height: 45vw;
    max-height: 780px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
    position: absolute;
}

.home-main-feature {
    max-width: 1200px;
    width: 80%;
    left: 50%;
    transform: translate(-50%, 0);
    height: 45vw;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right top;
    position: absolute;
}

.home-main-feature-details {
    width: 50%;
    text-align: right;
    padding-top: 100px;
}

.home-main-feature-details h2 {
    color: #fff;
    margin: 0;
    font-size: 100px;
    line-height: 100%;
    font-weight: 500;
}

.home-main-feature-subhead {
    text-transform: uppercase;
    color: #a0d5ba;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
}

.home-main-feature-details p {
    color: #fff;
    font-weight: 200;
    font-size: 30px;
    line-height: 120%;
}

.dots {
    position: relative;
    display: flex;
    gap: 10px;
    margin-top: -130px;
    margin-left: 20px;
}

.dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #a1acab;
    cursor: pointer;
    transition: background-color 1s ease;
}

.dot.active {
    background-color: #a4353b;
}


@media (max-width: 1750px) {

    .dots {
        margin-top: -7.5vw;
    }

}


@media (max-width: 1450px) {

    .home-main-feature-details {
        padding-top: 0px;
    }



}


@media (max-width: 1250px) {

    .home-main-feature-details h2 {
        font-size: 70px;
    }
    
    .home-main-feature-subhead {
        font-size: 30px;
    }
    
    .home-main-feature-details p {
        font-size: 20px;
    }

}


@media (max-width: 900px) {

    .home-main-feature-subhead {
        margin-bottom: 20px;
    }
    
    .home-main-feature-details p {
        display: none;
    }

}

@media (max-width: 650px) {

    .home-main-feature-wrap {
        background-size: auto 74%;
    }

    .home-main-feature-emblem-right {
        height: auto;
        max-height: none;
        background-image: none !important;
    }

    .home-main-feature-emblem-left {
        background-image: none !important;
    }

    .home-main-feature-product {
        position: static;
        width: 100%;
        transform: none;
        background-position: center top;
        height: 90vw;
    }

    .home-main-feature {
        position: static;
        width: 100%;
        transform: none;
        padding: 0 30px;
        box-sizing: border-box;

    }

    .home-main-feature-details {
        width: 100%;
    }

    h2.home-main-feature-head {
        color: #000;
        text-align: left;
    }

    .home-main-feature-subhead {
        color: #277451;
        text-align: left;
    }

    .home-main-feature-details p {
        display: block;
        text-align: left;
        color: #000;
    }

    .dots {
        display: none;
    }

}





/* Home News Feature */

#home-news-feature-header {
    margin-top: 70px;
}

#home-news-feature-header h2 {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    padding: 0 50px 0 50px;
    box-sizing: border-box;
    display: flex;
    font-size: 35px;
    line-height: 100%;
}

#home-news-feature {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px 100px 30px;
    box-sizing: border-box;
    display: flex;
}

    .home-news-feature-item {
        width: 33.33%;
        padding: 20px 20px 20px 20px;
        box-sizing: border-box;
    }

    .divider-vertical {
        width: 1px;
        background-color: #a1acab;
        align-self: stretch;
      }

    .home-news-feature-image-wrap {
        width: 100%;
        position: relative;
        padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625) */
        margin-bottom: 15px;
    }
    
    .home-news-feature-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

    .home-news-feature-item h3 {
        margin: 0;
        font-size: 22px;
        line-height: 22px;
        font-family: "Kanit", sans-serif;
    }

    .home-news-feature-item p {
        margin: 10px 0;
        font-size: 17px;
        line-height: 21px;
    }
      
    @media (max-width: 800px) {

        #home-news-feature-header h2 {
            padding: 0 50px 0 30px;
        }

        #home-news-feature {
            flex-direction: column;
        }

        .home-news-feature-item {
            width: 100%;
            padding: 20px 0 20px 0;
        }

        .divider-vertical {
            width: 100%;
            height: 1px;
        }

    }

    @media (max-width: 650px) {

        #home-news-feature-header {
            margin-top: 110px;
        }

    }





/* Home Product Feature */

#home-products-feature-wrap {
    background-color: #277451;
    border-top: 10px solid #d58628;
}

    #home-products-feature-head {
        background-color: #1f5d41;
    }

    #home-products-feature-head h3 {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 10px 30px;
        box-sizing: border-box;
        font-weight: 500;
        color: #fff;
        text-transform: uppercase;
        font-family: "Barlow Condensed", sans-serif;
        font-size: 40px;
        line-height: 40px;
    }

    #home-products-feature {
        max-width: 1260px;
        width: 100%;
        margin: 0 auto;
        padding: 30px;
        box-sizing: border-box;
    }

    .home-products-feature-product-wrap {
        float: left;
        width: 25%;
        padding: 1% 0;
        box-sizing: border-box;
    }

    .home-products-feature-product {
        position: relative;
        height: 0;
        padding-bottom: 80%;
        width: 100%;
    }

    .home-products-feature-image {
        position: absolute;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    @media (min-width: 0px) and (max-width: 800px) {
          
        .home-products-feature-product-wrap {
            width: 50%;
        }

    }





/* Home Emblem Feature */

#home-emblem-feature-wrap { 
    padding: 100px 0 100px 0;
    border-bottom: 10px solid #d58628;
    display: flex;
    justify-content: center;
}

    #home-emblem-feature {
        width: 100%;
        max-width: 1260px;
        display: flex;
        padding: 30px;
        box-sizing: border-box;
    }

    #home-emblem-feature-emblem {
        width: 200px;
    }

        #home-emblem-feature-emblem img  {
            display: block;
            width: 100%;
            height: auto;
        }

    #home-emblem-feature-content {
        flex: 1;
        padding: 0 0 0 20px;
        box-sizing: border-box;
    }

        #home-emblem-feature-content h3 {
            font-family: "Kanit", sans-serif;
            font-size: 40px;
            line-height: 40px;
            margin: 0;
        }

    @media (max-width: 600px) {

        #home-emblem-feature {
            flex-direction: column;
        }

        #home-emblem-feature-emblem {
            margin: 0 auto 30px auto;
        }

        #home-emblem-feature-content {
            padding: 0;
        }

    }



/* Home Icons Feature */


#home-icons-feature-wrap {
    padding: 100px 0 100px 0;
    background-color: #a4353b;
    border-bottom: 10px solid #d58628;
    display: flex;
    justify-content: center;
}

    #home-icons-feature {
        width: 100%;
        max-width: 800px;
        display: flex;
        padding: 30px;
        box-sizing: border-box;
    }

    #home-icons-feature-content {
        width: 50%;
        padding: 0 20px 0 0;
        box-sizing: border-box;
        color: #fff;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    
        #home-icons-feature-content .button {
            display: inline-flex;
        }

        #home-icons-feature-content h3 {
            font-family: "Kanit", sans-serif;
            font-size: 40px;
            line-height: 40px;
            margin: 0;
            color: #efb32f;
        }

    #home-icons-feature-icons {
        width: 50%;
        display: flex;
        align-items: center;
    }

        #home-icons-feature-icons img {
            display: block;
            height: 300px;
            width: auto;
        }

        @media (max-width: 600px) {

            #home-icons-feature {
                flex-direction: column;
            }

            #home-icons-feature-content {
                width: 100%;
                text-align: left;
                padding: 0;
                align-items: flex-start;
            }

            #home-icons-feature-icons {
                width: 100%;
            }

            #home-icons-feature-icons img {
                height: auto;
                width: 100%;
            }
    
        }


/* Home Globe Feature */

#home-globe-feature-wrap {
    padding: 100px 0 100px 0;
    background-color: #636c69;
    border-bottom: 10px solid #d58628;
    display: flex;
    justify-content: center;
}

    #home-globe-feature {
        width: 100%;
        max-width: 1260px;
        display: flex;
        padding: 30px;
        box-sizing: border-box;
    }

    #home-globe-feature-globe {
        width: 300px;
        display: flex;
        align-items: center;
    }
    
        #home-globe-feature-globe img  {
            display: block;
            width: 100%;
            height: auto;
        }

    #home-globe-feature-content {
        flex: 1;
        padding: 0 0 0 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        #home-globe-feature-content h3 {
            font-family: "Kanit", sans-serif;
            font-size: 40px;
            line-height: 40px;
            margin: 0;
        }

        #home-globe-feature-content .button {
            margin-top: 20px;
            display: inline-flex;
            width: fit-content;
        }

    @media (max-width: 600px) {

        #home-globe-feature {
            flex-direction: column;
        }

        #home-globe-feature-globe {
            width: 70%;
            margin: 0 auto;
        }

        #home-globe-feature-content {
            padding: 20px 0 0 0;
            align-items: center;
        }

        #home-globe-feature-content h3 {
            text-align: center;
        }

    }



/* Catalog Page */

#page-head-wrap.catalog-head-wrap {
    border-bottom: none; 
}

.catalog-cat {
    background-color: #d58628; 
}

.catalog-cat h2 {
    margin: 0 auto;
    width: 100%;
    max-width: 1260px;
    padding: 5px 30px 5px 30px;
    box-sizing: border-box;
    color: #a4353b;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 100%;
    text-transform: uppercase;
}

.catalog-wrap {
    background-color: #1f5d41;
}

.catalog {
    margin: 0 auto;
    width: 100%;
    max-width: 1260px;
    padding: 0 30px;
    box-sizing: border-box;
}

.catalog-product-wrap {
    float: left;
    width: 33.3%;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.catalog-product {
    position: relative;
    height: 0;
    padding-bottom: 105%;
    width: 100%;
    margin-top: 10%;
}

.catalog-product-img {
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding-bottom: 66%;
}

.catalog-product h3 {
    color: #fff;
    font-size: 24px;
    text-align: center;
    margin: 5px 0 0 0;
    xtransition: color 250ms;
}

.catalog-product:hover h3 {
    color: #efb32f;
}

.catalog-product p { 
    color:  #fff;
    font-size: 20px;
    margin: 10px 15px 10px 15px;
    line-height: 100%;
    text-align: center;
    font-weight: 100;
    font-family: 'Barlow Condensed', sans-serif;
}

.catalog-foot {
    background-color: #1f5d41;
    height: 50px;
}


@media (max-width: 1275px) {

    .catalog-wrap {
        background-size: auto 27.5vw;
    }

    .catalog-product h3 {
        font-size: 1.9vw;
    }

    .catalog-product p {
        font-size: 1.6vw;
    }

}

@media (max-width: 1000px) {

    .catalog-wrap {
        background-size: auto 26.5vw;
    }

}

@media (max-width: 800px) {

    .catalog-wrap {
        background-size: auto 52.2vw;
    }

    .catalog-product-wrap {
        width: 50%;
    }

    .catalog-product h3 {
        font-size: 3.8vw;
    }

    .catalog-product p {
        font-size: 3vw;
    }

}

@media (max-width: 700px) {

    .catalog-wrap {
        background-size: auto 51.5vw;
    }

}

@media (max-width: 650px) {

    .catalog-wrap {
        background-size: auto 51vw;
    }

}

@media (max-width: 600px) {

    .catalog-wrap {
        background-size: auto 50.5vw;
    }

}

@media (max-width: 550px) {

    .catalog-wrap {
        background-size: auto 50vw;
    }

}

@media (max-width: 500px) {

    .catalog-wrap {
        background-size: auto 49vw;
    }

}

@media (max-width: 450px) {

    .catalog-wrap {
        background-size: auto 48vw;
    }

}

@media (max-width: 400px) {

    .catalog-wrap {
        background-size: auto 47vw;
    }

}



/* Product Page */

#product-page-feature-wrap {
    background-image: url('style/product-bg.png');
    background-size: auto 100%;
    background-repeat: repeat-x;
}

#product-page-feature {
    width: 100%;
    max-width: 1260px;
    padding: 0 30px;
    margin: 0 auto;
    box-sizing: border-box;
}

#product-page-feature-product {
    height: 630px;
    padding-bottom: 150px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right top;
    display: flex;
    justify-content: left;
    align-items: center;
    overflow: hidden;
}

#product-page-feature-points {
    width: 40%;
}

.product-page-feature-point {
    background-color: #1f5d41;
    padding: 15px 15px 15px 35px;
    margin: 0 0 10px 0;
    background-image: url('style/square-yellow.png');
    background-position: 15px 23px;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    color: #fff;
    line-height: 100%;
    font-size: 25px;
}

#product-page-content {
    width: 100%;
    max-width: 1260px;
    margin: -135px auto 0 auto;
    padding: 30px 30px 30px 30px;
    box-sizing: border-box;
}

#product-page-cat {
    background: #a4353b;
    color: #fff;
    padding: 5px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 30px;
    line-height: 100%;
    text-transform: uppercase;
    display: inline-block;
}

#product-page-content h1 {
    font-size: 70px;
    margin: 10px 0;
}

#product-page-models {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 30px;
    color: #3f4442;
}

.product-page-lists {
    display: flex;
    gap: 20px;
}

.product-page-lists-col {
    width: 50%;    
}

#product-page-specs-heading h2 {
    padding: 0 0 0 30px;
    margin-bottom: 20px;
    background-image: url('style/square-yellow.png');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 0px 10px;
    font-size: 40px;
}

#product-page-specs-graphic img {
    display: block;
    width: 100%;
}

#product-form-button.clicked {
    background-color: #a1acab;
    color: #3f4442;
}

#product-form {
    display: none;
}

@media (max-width: 1280px) {

    #product-page-feature-product {
        height: 45vw;
        padding-bottom: 15vw;
    }

    .product-page-feature-point {
        padding: 10px 10px 10px 30px;
        margin: 0 0 5px 0;
        background-position: 10px 15px;
        background-size: 10px 10px;
        font-size: 20px;
    }

    #product-page-content {
        margin-top: -10vw;
    }

}

@media (max-width: 800px) {

    .product-page-lists {
        flex-direction: column;
    }

    .product-page-lists-col {
        width: 100%;
    }

}

@media (max-width: 700px) {

    #product-page-feature-product {
        height: 66vw;
        padding: 0;
        background-position: top center;
    }

    #product-page-feature-points {
        display: none;
    }

    #product-page-content {
        margin-top: -6vw;
    }

}



/* Logo Bottom */

#logo-endpage {
    max-width: 1000px;
    padding: 140px 30px 60px 30px;
    margin: 0 auto;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    text-align: center;
    font-size: 40px;
    line-height: 40px;
}

#logo-endpage-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 400px;
    margin: 0 auto 50px auto;
}




/* WP Forms */

div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full input[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full button[type=submit]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {
    background-color: var(--wpforms-button-background-color-alt, var(--wpforms-button-background-color));
    color: var(--wpforms-button-text-color);
}

div.wpforms-container-full input, div.wpforms-container-full select, div.wpforms-container-full textarea {
    background-color: #f0b432 !important;
    font-size: 20px !important;
}

div.wpforms-container-full button {
    background-color: #a4353b !important;
    color: #f0b432 !important;
    text-transform: uppercase !important;
    font-family: "Barlow Condensed", sans-serif !important;
    font-size: 25px !important;
    line-height: 25px !important;
    padding: 10px 10px 20px 10px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    transition: none !important;
}

div.wpforms-container-full button:hover {
    background-color: #f0b432 !important;
    color: #a4353b !important;
}

div.wpforms-container-full .wpforms-field-label {
    font-family: "Barlow Condensed", sans-serif !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    margin: 0 0 10px 0 !important;
}






/* Element Animations */

        .anim-slide-up {
            opacity: 0;
            transform: translateY(200px);
            transition: all 1s ease-out;
        }

        .anim-slide-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Slide in from right animation */
        .anim-slide-left {
            opacity: 0;
            transform: translateX(200px);
            transition: all 1s ease-out;
        }

        .anim-slide-left.visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* Slide in from left animation */
        .anim-slide-right {
            opacity: 0;
            transform: translateX(-200px);
            transition: all 1s ease-out;
        }

        .anim-slide-right.visible {
            opacity: 1;
            transform: translateX(0);
        }

        /* Fade in animation */
        .anim-fade-in {
            opacity: 0;
            transition: opacity 1.5s ease-in;
        }

        .anim-fade-in.visible {
            opacity: 1;
        }

        /* Zoom in animation */
        .anim-zoom-in {
            opacity: 0;
            transform: scale(0.25);
            transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
            transform-origin: center center;
        }

        .anim-zoom-in.visible {
            opacity: 1;
            transform: scale(1);
        }



/* Footer */

#footer {
    background-color: #277451;
    padding: 0 0 10px 0;
    margin: 100px 0 0 0;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 300;
}

#footer-top {
    height: 106px;
    background-image: url('style/footer.png');
    background-position: center top;
}

#footer-menu {
    max-width: 1260px;
    margin: 100px auto;
    padding: 0 30px;
    font-size: 25px;
    color: #fff;
    box-sizing: border-box;
}

    #footer-menu a {
        color: #fff;
        display: block;
    }

    #footer-menu a:hover {
        color: #d58628;
    }

.footer-col {
    width: 33.3%;
    float: left;
}

.footer-col-header {
    text-transform: uppercase;
    font-size: 40px;
    font-weight: 500;
    margin: 0 0 10px 0;
}

#footer-credits {
    font-size: 20px;
    text-align: center;
    margin: 40px 30px 30px 30px;
    color: #fff;
    font-weight: 200;
}

    #footer-credits a {
        color: #fff;
    }

    #footer-credits a:hover {
        color: #d58628;
    }

    @media (max-width: 700px) {

        #footer-col1 {
            display: none;
        }

        .footer-col {
            width: 50%;
        }

    }