.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1366px;
}
body {font-family: 'Lato';}body {line-height: ;font-size: px;font-weight: ;color: ;}.oxy-nav-menu-hamburger-line {background-color: ;}h1, h2, h3, h4, h5, h6 {font-family: 'Lato';}a {color: rgba(23,108,181,0.92);text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 75px;
padding-bottom: 75px;
padding-left: 75px;
}.ct-new-columns > .ct-div-block {
padding-top: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
}.oxy-header-container {
padding-right: 75px;
padding-left: 75px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
.tabs-8932-tab:hover{
 background-color:#ffffff;
}
.tabs-8932-tab {
 background-color:#eceeef;
 padding-top:16px;
 padding-bottom:16px;
 padding-left:32px;
 padding-right:32px;
 color:#374047;
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
 border-top-color:#eceeef;
 border-right-color:#eceeef;
 border-bottom-color:#eceeef;
 border-left-color:#eceeef;
 border-top-style:solid;
 border-right-style:none;
 border-bottom-style:solid;
 border-left-style:solid;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
}
.tabs-8932-tab:not(.ct-section):not(.oxy-easy-posts),
.tabs-8932-tab.oxy-easy-posts .oxy-posts,
.tabs-8932-tab.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:center;
}
@media (max-width: 1366px) {
.tabs-8932-tab {
}
}

@media (max-width: 991px) {
.tabs-8932-tab {
 border-bottom-style:none;
 border-right-color:#dee1e3;
 border-right-width:1px;
 border-right-style:solid;
}
}

@media (max-width: 479px) {
.tabs-8932-tab {
 padding-left:16px;
 padding-right:16px;
}
}

.tabs-8932-tab-active {
 margin-left:-8px;
 background-color:rgba(23,108,181,0.22);
 border-top-color:#dee1e3;
 border-right-color:#dee1e3;
 border-bottom-color:#dee1e3;
 border-left-color:#dee1e3;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:none;
 border-bottom-style:solid;
 border-left-style:solid;
 padding-left:40px;
}
@media (max-width: 1366px) {
.tabs-8932-tab-active {
}
}

@media (max-width: 991px) {
.tabs-8932-tab-active {
 border-top-color:#dee1e3;
 border-right-color:#dee1e3;
 border-bottom-color:#dee1e3;
 border-left-color:#dee1e3;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:none;
 border-left-style:solid;
 margin-left:0px;
 padding-left:032px;
}
}

@media (max-width: 479px) {
.tabs-8932-tab-active {
 padding-left:16px;
 padding-right:16px;
}
}

.tabs-contents-8932-tab {
}
@media (max-width: 767px) {
.tabs-contents-8932-tab {
}
.tabs-contents-8932-tab:not(.ct-section):not(.oxy-easy-posts),
.tabs-contents-8932-tab.oxy-easy-posts .oxy-posts,
.tabs-contents-8932-tab.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
}
}

@media (max-width: 479px) {
.tabs-contents-8932-tab {
 padding-left:0px;
 padding-right:0px;
}
}

.oxel_dashboard_tabs {
 width:100%;
}
.oxel_dashboard_tabs:not(.ct-section):not(.oxy-easy-posts),
.oxel_dashboard_tabs.oxy-easy-posts .oxy-posts,
.oxel_dashboard_tabs.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:row;
align-items:stretch;
}
@media (max-width: 991px) {
.oxel_dashboard_tabs {
}
.oxel_dashboard_tabs:not(.ct-section):not(.oxy-easy-posts),
.oxel_dashboard_tabs.oxy-easy-posts .oxy-posts,
.oxel_dashboard_tabs.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
}
}

.oxel_dashboard_tabs__tab_icon {
color: #7f8b93;}.oxel_dashboard_tabs__tab_icon 
>svg {width: 18px;height: 18px;}.oxel_dashboard_tabs__tab_icon {
 margin-right:8px;
}
@media (max-width: 767px) {
.oxel_dashboard_tabs__tab_icon {
 margin-right:0px;
}
}

.oxel_dashboard_tabs__tab_label {
 line-height:1;
 text-transform:uppercase;
 margin-left:0.5em;
 font-weight:600;
 font-size:1.2rem;
 color:rgba(23,108,181,0.92);
 text-align:left;
}
@media (max-width: 1366px) {
.oxel_dashboard_tabs__tab_label {
}
}

@media (max-width: 767px) {
.oxel_dashboard_tabs__tab_label {
}
.oxel_dashboard_tabs__tab_label:not(.ct-section):not(.oxy-easy-posts),
.oxel_dashboard_tabs__tab_label.oxy-easy-posts .oxy-posts,
.oxel_dashboard_tabs__tab_label.ct-section .ct-section-inner-wrap{
display:none;
flex-direction:unset;
}
}

.oxel_dashboard_tabs__tab {
}
.oxel_dashboard_tabs__tab_content_container {
 width:75%;
 border-top-color:#dee1e3;
 border-right-color:#dee1e3;
 border-bottom-color:#dee1e3;
 border-left-color:#dee1e3;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:none;
 overflow:hidden;
}
@media (max-width: 991px) {
.oxel_dashboard_tabs__tab_content_container {
 width:100%;
 border-top-color:#dee1e3;
 border-right-color:#dee1e3;
 border-bottom-color:#dee1e3;
 border-left-color:#dee1e3;
 border-top-width:1px;
 border-right-width:1px;
 border-bottom-width:1px;
 border-left-width:1px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
}
}

.oxel_dashboard_tabs__tab_content--hidden {
}
.oxel_dashboard_tabs__tab_content--hidden:not(.ct-section):not(.oxy-easy-posts),
.oxel_dashboard_tabs__tab_content--hidden.oxy-easy-posts .oxy-posts,
.oxel_dashboard_tabs__tab_content--hidden.ct-section .ct-section-inner-wrap{
display:none;
flex-direction:unset;
}
@media (max-width: 479px) {
.oxel_dashboard_tabs__tab_content--hidden {
}
}

.oxel_dynamicslider {
 width:100%;
}
.swiper-container {
}
.oxel_dynamicslider__container {
 height:400px;
}
.swiper-wrapper {
}
.swiper-slide {
}
.oxel_back_to_top_container:hover{
transform:scale(1.1,1.1) translateY(-3px); background-color:rgba(23,108,181,0.65);
}
.oxel_back_to_top_container {
 width:42px;
 height:42px;
 border-radius:4px;
 position:fixed;
 z-index:1500;
 bottom:5px;
 text-align:center;
 overflow:hidden;
 transition-duration:0.3s;
 transition-timing-function:ease-in-out;
 background-color:rgba(23,108,181,0.6);
 right:5px;
 box-shadow:0px 4px 17px -10px #1e1e1e;
}
.oxel_back_to_top_container:not(.ct-section):not(.oxy-easy-posts),
.oxel_back_to_top_container.oxy-easy-posts .oxy-posts,
.oxel_back_to_top_container.ct-section .ct-section-inner-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.oxel_back_to_top_icon {
color: #ffffff;}.oxel_back_to_top_icon 
>svg {width: 23px;height: 23px;}.oxel_back_to_top_icon {
}
.f__inner-content--container {
}
.f__section--container {
}
.f__page--container {
}
.f__section--container-min-height-max {
}
.f__page-container-min-height-max {
}
.f__gap {
}
.f__overline {
}
.f__button {
}
.f__rounded {
}
.f__shadow {
}
.f__padded {
}
.f__button--secondary {
}
.f__page--container-min-height-max {
}
.f__page-child--container {
}
.f__grid {
}
.f__grid-item {
}
.f__align-center {
}
.f__justify-center {
}
.f__owl-p {
}
.f__heading {
}
.f__h1 {
}
.f__h3 {
}
.f__h2 {
}
@media (max-width: 479px) {
.f__h2 {
}
}

.f__page-child--container--disable {
}
.f__page-child--container--grid-fix {
}
.f__hero {
}
.f__hero-left {
}
.f__hero-right {
}
.f__h4 {
}
.f__h5 {
}
.f__h6 {
}
.f__triangle-clip-path {
}
.f__text-transform-capitalize {
}
.f__flex-inline-block {
}
.f__flex-row {
}
.f__header {
 box-shadow:2.5px 2.5px 10px 2.5px rgba(23,108,181,0.1);
}
.f__header-page--container {
}
.f__header-logo {
}
.f__logo {
}
.f__navigation {
}
.f__header-menu {
}
.f--width-100 {
}
.f--width-100:not(.ct-section):not(.oxy-easy-posts),
.f--width-100.oxy-easy-posts .oxy-posts,
.f--width-100.ct-section .ct-section-inner-wrap{
display:flex;
}
.f__px {
}
.f__px-lg {
}
.f__header-overlay {
}
.f__full-width {
}
.f__p-md {
}
.f__p-sm {
}
.f__owl-spacing-lg {
}
.f__no-top-margin {
}
.f__font-weight--400 {
}
.f__font-weight--500 {
}
.f__font-weight--600 {
}
.f__font-weight--700 {
}
.f__gradient-h1 {
}
.f__gradient-line {
}
.f__owl-mt-md {
}
.f__owl-spacing-md {
}
.f__no-bottom-margin {
}
.f__section-container-line {
}
.f__hero-h1-white {
}
.f__hero-section {
}
.f__line--secondary {
}
.f__bg-primary {
}
.f__hide-overflow {
}
.f__shadow-light {
}
.f__shadow-dark {
}
.f__line--primary {
 border-radius:10px;
}
.f__shape-container {
}
.f__shape--triangle-up {
}
.f__bg-background-light {
}
.f__text-transform-uppercase {
}
@media (max-width: 1366px) {
.f__text-transform-uppercase {
}
}

.f__align-start--center-responsive {
}
.f__align-start {
}
.f__align-start--center-text-responsive {
}
@media (max-width: 479px) {
.f__align-start--center-text-responsive {
}
}

.f__pro-menu--main {
 menu_off_canvas_animation:fade;
}
.f__pro-menu--main .oxy-pro-menu-mobile-open-icon svg{
width:25px;
height:25px;
}

.f__pro-menu--main .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
@media (max-width: 1366px) {
.f__pro-menu--main {
 margin-bottom:0px;
}
.f__pro-menu--main .oxy-pro-menu-off-canvas-container > div:first-child, .f__pro-menu--main .oxy-pro-menu-open-container > div:first-child{
min-width:50%;
}

.f__pro-menu--main .oxy-pro-menu-off-canvas-container{
width:50%;
}

.f__pro-menu--main .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .f__pro-menu--main .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:rgba(23,108,181,0.92);
}

.f__pro-menu--main .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item a, .f__pro-menu--main .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item a{
padding-top:1.5em;
padding-bottom:1.5em;
}

.f__pro-menu--main .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .f__pro-menu--main .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: center;
                    justify-content: center;
                }

            }

@media (max-width: 767px) {
.f__pro-menu--main {
}
.f__pro-menu--main .oxy-pro-menu-off-canvas-container > div:first-child, .f__pro-menu--main .oxy-pro-menu-open-container > div:first-child{
min-width:85%;
}

.f__pro-menu--main .oxy-pro-menu-off-canvas-container{
width:75%;
}

}

.f__footer {
}
.f__footer-grid {
}
.f__footer-child--container {
}
.f__footer--container {
}
.f__footer-child--container--grid-fix {
}
.f__footer-grid-item {
}
.f__footer-heading {
}
.f__footer-container-line {
}
.f__footer-container-line-top {
}
.f__footer-container-line-bottom {
}
.f__footer-link {
}
.f__button-container {
}
.f__animate--levitate {
}
.f__animate--mobile--typing-text {
}
.f__animate--mobile--lazy-load-text {
}
.f__animate--text-appear {
}
.f__width--100-percent {
}
.f__width--100-percent:not(.ct-section):not(.oxy-easy-posts),
.f__width--100-percent.oxy-easy-posts .oxy-posts,
.f__width--100-percent.ct-section .ct-section-inner-wrap{
display:flex;
}
.f__rounded--bottom {
}
.f__grid-item--img {
}
.f__grid-item-heading {
}
.f__p {
}
.f__text-align-justify {
}
.f__why-us--grid-item {
}
.f__why-us--grid {
}
.f__why-us--grid-item--column {
}
.f__why-us--grid-item-column--number {
}
.f__heading-light {
}
.f__why-us--grid-item-column-number-heading {
}
.f__px-s {
}
.f__ml-xs {
}
.f__why-us--grid-item-column--text {
}
.f__mt-lg {
}
.f__height--100-percent {
}
.f__bg-background-light-alt {
}
.f-btn-main {
}
.f__transition {
}
.f-btn-main-whatsapp {
}
.f-contact-btn-main {
}
.f-contact-btn-main-whatsapp {
}
.f-contact-btn-main-maps {
}
.f-contact-btn-main-facebook {
}
.f__head-primary {
}
.f__bg-background-dark-alt {
}
.f__hero-logo-slider--img {
 attachment_height:600;
 attachment_width:600;
 attachment_url:https://slateblu.co.za/wp-content/uploads/2023/07/SasolLogo.png;
 width:100%;
 height:100%;
 object-fit:cover;
}
.tabs-7707-tab {
}
.tabs-7707-tab-active {
}
.tabs-contents-7707-tab {
}
.tabs-8898-tab {
}
.tabs-8898-tab-active {
}
.tabs-contents-8898-tab {
}
.f__tabs-number--typography {
 padding-left:0.5em;
 padding-right:0.5em;
 border-top-color:rgba(23,108,181,0.92);
 border-right-color:rgba(23,108,181,0.92);
 border-bottom-color:rgba(23,108,181,0.92);
 border-left-color:rgba(23,108,181,0.92);
 border-top-width:2px;
 border-right-width:2px;
 border-bottom-width:2px;
 border-left-width:2px;
 border-top-style:solid;
 border-right-style:solid;
 border-bottom-style:solid;
 border-left-style:solid;
 border-radius:100px;
 color:rgba(23,108,181,0.92);
}
@media (max-width: 1366px) {
.f__tabs-number--typography {
}
}

.f__tab-nav-col-card {
 min-height:100%;
 overflow:hidden;
 border-bottom-left-radius:10px;
 border-bottom-right-radius:10px;
}
.f__tab-nav-col-card-head--container {
background-image: linear-gradient(90deg, rgba(83,200,210,0.92), rgba(23,108,181,0.92)); padding-top:1em;
 padding-bottom:1em;
 text-align:left;
 border-top-left-radius:10px;
 border-top-right-radius:10px;
}
.f__tab-nav-col-card-head--container:not(.ct-section):not(.oxy-easy-posts),
.f__tab-nav-col-card-head--container.oxy-easy-posts .oxy-posts,
.f__tab-nav-col-card-head--container.ct-section .ct-section-inner-wrap{
align-items:center;
}
.f__tab-nav-col-card-text--container {
 min-height:100%;
 background-color:#d9d9d9;
 padding-top:1em;
 padding-right:1em;
 padding-bottom:1em;
 padding-left:2em;
}
/** Start - CustomFramework **/
/* Info - CustomFramework

Using BEM CSS Methodology, and .f__ = stylesheet name = Framework*/

/** Variables **/
:root {

    /** Viewports **/
    /* Full Screen */
    --fs: 1367px;
    /* Page Container */
    --pc: 1366px;
    /* Less than 992px */
    --breakpoint-md: 800px;
    /* Less than 768px */
    --breakpoint-sm: 767px;
    /* Less than 480px */
    --breakpoint-xs: 479px;


    /** Font Family/Types **/

    /* Heading Text Font Family */
    --f-font-family-heading: "Lato", sans-serif;

    /* Body Text Font Family */
    --f-font-family-body: "Lato", sans-serif;

    /** Heading Sizes **/

    /* h1 */
    --f-heading-xl: clamp(2rem, 250%, 4rem);
    /* h2 */
    --f-heading-lg: clamp(1.6rem, 200%, 1.6rem);
    /* h3 */
    --f-heading-md: clamp(1.6rem, 150%, 3rem);
    /* h4 */
    --f-heading-sm: clamp(1.4rem, 175%, 1.5rem);
    /* h5 */
    --f-heading-xs: clamp(1.2rem, 150%, 1.2rem);
    /* h6 */
    --f-heading-xxs: clamp(1rem, 125%, 1rem);


    /** Body text size **/

    /* Body text size for extra small screens */
    --f-body-xs: clamp(0.6rem, 1vw, 0.8rem);

    /* Body text size for small screens */
    --f-body-s: clamp(1rem, 2vw, 1.4rem);

    /* Body text size for medium screens */
    --f-body-m: clamp(1rem, 2vw, 1.2rem);

    /* Body text size for large screens */
    --f-body-l: clamp(1.2rem, 2.4vw, 1.4rem);


    /** Spacing - owls, margins, paddings **/
    --f-xxs: 2px;
    --f-xs: 4px;
    --f-sm: 8px;
    --f-md: 16px;
    --f-lg: 32px;
    --f-p: 12px;
	
	 /** GAPS **/
    --f-space-xs: 4px;
    --f-space-s: 8px;
    --f-space-m: 16px;
    --f-space-l: 32px;


    /** Grid **/
    --f-grid-min: 230px;


    /** Ad Hoc **/
    --f-space--supersmall: calc(var(--f-space) / 8);
    --f-space: 32px;


    /** Animations **/

    --f-transition: 0.4s all ease-in-out;

    /** Color Pallet **/

    /* 1. Primary */
    --f-primary: rgba(23,108,181,0.92);
    --f-primary-rgb: 237, 32, 46;
    /* RGB values of primary color */
    --f-primary-overlay: rgba(var(--f-primary-rgb), 0.03);
    /* Semi-transparent primary color overlay */
    /* 2. Secondary */
    --f-secondary: rgba(83,200,210,0.92);
    /* 3. Background Light */
    --f-bg-light: #ffffff;
    /* 4. Background Light Alternative */
    --f-bg-light-alt: #f9f9f9;
    /* 5. Heading Dark */
    --f-heading-dark: #5e6c71;
    /* 6. Text Dark */
    --f-text-dark: #222222;
    /* 7. Heading Light */
    --f-heading-light: #ffffff;
    /* 8. Text Light */
    --f-text-light: #d9d9d9;
    /* 9. Background Dark Alternative */
    --f-bg-dark-alt: #222222;
    /* 10. Border Light */
    --f-border-light: #e8e8e8;
    /* 11. Border Dark */
    --f-border-dark: #474747;

}

/** End - CustomFramework **//* Body Text */
body {
    font-size: var(--f-body-s);
    font-family: var(--f-font-family-body);
}


/* Apply Body Text class to all text elements */
* {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

* body {
    line-height: 1.5;
}

/** Base Heading Styles **/
.f__heading {
    font-weight: bold;
    margin: var(--f-md) 0;
    line-height: 1.2;
    letter-spacing: -0.02em;

}

/** Heading Sizes **/

/* This is typically used for the main page heading or title, and should only be used once per page. */
.f__h1 {
    font-size: var(--f-heading-xl);
    line-height: 1.3;
    font-family: var(--f-font-family-heading);
    color: var(--f-primary);
	letter-spacing: -0.02em;
}

/* This is usually used for section headings, and can be used multiple times per page. */
.f__h2 {
    font-size: var(--f-heading-lg);
    line-height: 1;
    font-family: var(--f-font-family-heading);
    color: var(--f-secondary);
	letter-spacing: -0.02em;
}

/* This is often used for sub-section headings or for grouping related content together within a section. */
.f__h3 {
    font-size: var(--f-heading-md);
    line-height: 1.2;
    font-family: var(--f-font-family-heading);
}

/* H1-H6 - These are used for sub-headings and nested content within sections. */
.f__h4 {
    font-size: var(--f-heading-sm);
    line-height: 1.15;
    font-family: var(--f-font-family-heading);
}

.f__h5 {
    font-size: var(--f-heading-xs);
    line-height: 1.1;
    font-family: var(--f-font-family-heading);
}

.f__h6 {
    font-size: var(--f-heading-xxs);
    line-height: 1;
    font-family: var(--f-font-family-heading);
}

/** Font Weight Classes **/

/* Font weight 100 */
.f__font-weight--100 {
  font-weight: 100;
}

/* Font weight 200 */
.f__font-weight--200 {
  font-weight: 200;
}

/* Font weight 300 */
.f__font-weight--300 {
  font-weight: 300;
}

/* Font weight 400 */
.f__font-weight--400 {
  font-weight: 400;
}

/* Font weight 500 */
.f__font-weight--500 {
  font-weight: 500;
}

/* Font weight 600 */
.f__font-weight--600 {
  font-weight: 600;
}

/* Font weight 700 */
.f__font-weight--700 {
  font-weight: 700;
}

/* Font weight 800 */
.f__font-weight--800 {
  font-weight: 800;
}

/* Font weight 900 */
.f__font-weight--900 {
  font-weight: 900;
}

/* Text transform */
.f__text-transform-capitalize {
    text-transform: capitalize;
}

.f__text-transform-uppercase {
    text-transform: uppercase;
}

.f__text-transform-lowercase {
    text-transform: lowercase;
}



/* Letter spacing */
.f__letter-spacing-1 {
    letter-spacing: 1px;
}

.f__letter-spacing-2 {
    letter-spacing: 2px;
}

.f__letter-spacing-3 {
    letter-spacing: 3px;
}

/* Text alignment */
.f__text-align-left {
    text-align: left;
}

.f__text-align-center {
    text-align: center;
}

.f__text-align-right {
    text-align: right;
}

.f__text-align-justify {
    text-align: justify;
}

/* Text decoration */
.f__text-decoration-underline {
    text-decoration: underline;
}

.f__text-decoration-overline {
    text-decoration: overline;
}

.f__text-decoration-line-through {
    text-decoration: line-through;
}

/* Text shadow */
.f__text-shadow-1 {
    text-shadow: 0px 0px 1px var(--f-color-3);
}

.f__text-shadow-2 {
    text-shadow: 0px 0px 3px var(--f-color-3);
}

.f__text-shadow-3 {
    text-shadow: 0px 0px 5px var(--f-color-3);
}
.f__hero {
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: row;
    /* set direction to row */
    width: 100%;
    align-items: center;
    /* center vertically */
}

.f__hero-left {
    flex: 1;
    min-height: 100%;
    flex-basis: 50%;
    /* Adjust the layout and styling of the content as needed */
}



.f__hero-right {
    flex: 1;
    min-height: 70vh;
    flex-basis: 50%;
    position: relative;
    overflow: hidden;
    height: 50vh;
}

.f__triangle-clip-path {
    background-image: url('https://gbsecurityservices.co.za/wp-content/uploads/2023/05/CoverIMG.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    clip-path: polygon(49% 4%, 81% 10%, 94% 19%, 96% 34%, 50% 100%, 50% 100%, 4% 35%, 6% 21%, 16% 10%);
    height: 85%;
    width: 100%;
}



.f__hero-h1-white {
  color: #ffffff; /* White color */
}

.f__hero-section {
  background: linear-gradient(to right, var(--f-primary), var(--f-secondary)); /* Linear gradient background using primary and secondary colors */
}

@media screen and (max-width: 1366px) {
    .f__hero {
        flex-direction: column;
    }

    .f__hero-left,
    .f__hero-right {
        flex-basis: 100%;
        height: auto;
    }



    .f__triangle-clip-path {
        height: 40vh;
        width: 40vh;

    }

  
}/** Layout **/

/** Dimensions **/


/* Full Width */

.f__width--100-percent {
    width: 100%
}

.f__height--100-percent {
    height: 100%
}


/* Full Width Legacy*/

.f--width-100 {
    width: 100%
}

.f--height-100 {
    height: 100%
}


/* Owl Spacing */

/* Is more suited for lists or layouts where you need to add spacing between items */

.f__owl-spacing-sm>*+* {
    margin-top: var(--f-sm);
}

.f__owl-spacing-md>*+* {
    margin-top: var(--f-md);
}

.f__owl-spacing-lg>*+* {
    margin-top: var(--f-lg);
}




/* Is more suited for layouts with multiple columns or rows where you need consistent spacing between elements. */
.f__gap {
    gap: var(--f-space-m);
}


/** 1-14 Spacings Margin & Padding **/

/* 14 - Padding (p) */
.f__p {
    padding: var(--f-p);
}

.f__pt {
    padding-top: var(--f-pt);
}

.f__pb {
    padding-bottom: var(--f-pb);
}

.f__pl {
    padding-left: var(--f-pl);
}

.f__pr {
    padding-right: var(--f-pr);
}

.f__px {
    padding-left: var(--f-px);
    padding-right: var(--f-px);
}

.f__py {
    padding-top: var(--f-py);
    padding-bottom: var(--f-py);
}

@media (min-width: 576px) {
    .f__p-sm {
        padding: var(--f-sm);
    }

    .f__pt-sm {
        padding-top: var(--f-sm);
    }

    .f__pb-sm {
        padding-bottom: var(--f-sm);
    }

    .f__pl-sm {
        padding-left: var(--f-sm);
    }

    .f__pr-sm {
        padding-right: var(--f-sm);
    }

    .f__px-sm {
        padding-left: var(--f-sm);
        padding-right: var(--f-sm);
    }

    .f__py-sm {
        padding-top: var(--f-sm);
        padding-bottom: var(--f-sm);
    }
}

@media (min-width: 768px) {
    .f__p-md {
        padding: var(--f-md);
    }

    .f__pt-md {
        padding-top: var(--f-md);
    }

    .f__pb-md {
        padding-bottom: var(--f-md);
    }

    .f__pl-md {
        padding-left: var(--f-md);
    }

    .f__pr-md {
        padding-right: var(--f-md);
    }

    .f__px-md {
        padding-left: var(--f-md);
        padding-right: var(--f-md);
    }

    .f__py-md {
        padding-top: var(--f-md);
        padding-bottom: var(--f-md);
    }
}

@media (min-width: 992px) {
    .f__p-lg {
        padding: var(--f-lg);
    }

    .f__pt-lg {
        padding-top: var(--f-lg);
    }

    .f__pb-lg {
        padding-bottom: var(--f-lg);
    }

    .f__pl-lg {
        padding-left: var(--f-lg);
    }

    .f__pr-lg {
        padding-right: var(--f-lg);
    }

    .f__px-lg {
        padding-left: var(--f-lg);
        padding-right: var(--f-lg);
    }

    .f__py-lg {
        padding-top: var(--f-lg);
        padding-bottom: var(--f-lg);
    }
}

/* 13 - Padding Y-axis (py) */
.f__py-xxs {
    padding-top: var(--f-xxs);
    padding-bottom: var(--f-xxs);
}

.f__py-xs {
    padding-top: var(--f-xs);
    padding-bottom: var(--f-xs);
}

.f__py-sm {
    padding-top: var(--f-sm);
    padding-bottom: var(--f-sm);
}

.f__py-md {
    padding-top: var(--f-md);
    padding-bottom: var(--f-md);
}

.f__py-lg {
    padding-top: var(--f-lg);
    padding-bottom: var(--f-lg);
}

@media (min-width: 576px) {
    .f__py-sm--md {
        padding-top: var(--f-md);
        padding-bottom: var(--f-md);
    }

    .f__py-lg--md {
        padding-top: var(--f-lg);
        padding-bottom: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__py-lg--lg {
        padding-top: var(--f-lg);
        padding-bottom: var(--f-lg);
    }
}

/* Padding X-axis (px)*/

.f__px-xxs {
    padding-left: var(--f-xxs);
    padding-right: var(--f-xxs);
}

.f__px-xs {
    padding-left: var(--f-xs);
    padding-right: var(--f-xs);
}

.f__px-sm {
    padding-left: var(--f-sm);
    padding-right: var(--f-sm);
}

.f__px-md {
    padding-left: var(--f-md);
    padding-right: var(--f-md);
}

.f__px-lg {
    padding-left: var(--f-lg);
    padding-right: var(--f-lg);
}

@media (min-width: 576px) {
    .f__px-sm--md {
        padding-left: var(--f-md);
        padding-right: var(--f-md);
    }

    .f__px-lg--md {
        padding-left: var(--f-lg);
        padding-right: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__px-lg--lg {
        padding-left: var(--f-lg);
        padding-right: var(--f-lg);
    }
}

/* 11 - Padding Right (pr) */
.f__pr-xxs {
    padding-right: var(--f-xxs);
}

.f__pr-xs {
    padding-right: var(--f-xs);
}

.f__pr-sm {
    padding-right: var(--f-sm);
}

.f__pr-md {
    padding-right: var(--f-md);
}

.f__pr-lg {
    padding-right: var(--f-lg);
}

@media (min-width: 576px) {
    .f__pr-sm--md {
        padding-right: var(--f-md);
    }

    .f__pr-lg--md {
        padding-right: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__pr-lg--lg {
        padding-right: var(--f-lg);
    }
}

/* 10 - Padding Left (pl) */

.f__pl-xxs {
    padding-left: var(--f-xxs);
}

.f__pl-xs {
    padding-left: var(--f-xs);
}

.f__pl-sm {
    padding-left: var(--f-sm);
}

.f__pl-md {
    padding-left: var(--f-md);
}

.f__pl-lg {
    padding-left: var(--f-lg);
}

@media (min-width: 576px) {
    .f__pl-sm--md {
        padding-left: var(--f-md);
    }

    .f__pl-lg--md {
        padding-left: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__pl-lg--lg {
        padding-left: var(--f-lg);
    }
}

/* 9 - Padding Bottom (pb) */

.f__pb-xxs {
    padding-bottom: var(--f-xxs);
}

.f__pb-xs {
    padding-bottom: var(--f-xs);
}

.f__pb-sm {
    padding-bottom: var(--f-sm);
}

.f__pb-md {
    padding-bottom: var(--f-md);
}

.f__pb-lg {
    padding-bottom: var(--f-lg);
}

@media (min-width: 576px) {
    .f__pb-sm--md {
        padding-bottom: var(--f-md);
    }

    .f__pb-lg--md {
        padding-bottom: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__pb-lg--lg {
        padding-bottom: var(--f-lg);
    }
}

/* 8 - Padding Top (pt) */
.f__pt-xxs {
    padding-top: var(--f-xxs);
}

.f__pt-xs {
    padding-top: var(--f-xs);
}

.f__pt-sm {
    padding-top: var(--f-sm);
}

.f__pt-md {
    padding-top: var(--f-md);
}

.f__pt-lg {
    padding-top: var(--f-lg);
}

@media (min-width: 576px) {
    .f__pt-sm--md {
        padding-top: var(--f-md);
    }

    .f__pt-lg--md {
        padding-top: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__pt-lg--lg {
        padding-top: var(--f-lg);
    }
}

/* 7 - Margin (m) */
.f__m-xxs {
    margin: var(--f-xxs);
}

.f__m-xs {
    margin: var(--f-xs);
}

.f__m-sm {
    margin: var(--f-sm);
}

.f__m-md {
    margin: var(--f-md);
}

.f__m-lg {
    margin: var(--f-lg);
}

@media (min-width: 576px) {
    .f__m-sm--md {
        margin: var(--f-md);
    }

    .f__m-lg--md {
        margin: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__m-lg--lg {
        margin: var(--f-lg);
    }
}

/* 6 - Margin Y-axis (my) */

.f__my-xxs {
    margin-top: var(--f-xxs);
    margin-bottom: var(--f-xxs);
}

.f__my-xs {
    margin-top: var(--f-xs);
    margin-bottom: var(--f-xs);
}

.f__my-sm {
    margin-top: var(--f-sm);
    margin-bottom: var(--f-sm);
}

.f__my-md {
    margin-top: var(--f-md);
    margin-bottom: var(--f-md);
}

.f__my-lg {
    margin-top: var(--f-lg);
    margin-bottom: var(--f-lg);
}

@media (min-width: 576px) {
    .f__my-sm--md {
        margin-top: var(--f-md);
        margin-bottom: var(--f-md);
    }

    .f__my-lg--md {
        margin-top: var(--f-lg);
        margin-bottom: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__my-lg--lg {
        margin-top: var(--f-lg);
        margin-bottom: var(--f-lg);
    }
}

/* Owl 5 - Margin X-axis (mx) */
.f__mx-xxs {
    margin-left: var(--f-xxs);
    margin-right: var(--f-xxs);
}

.f__mx-xs {
    margin-left: var(--f-xs);
    margin-right: var(--f-xs);
}

.f__mx-sm {
    margin-left: var(--f-sm);
    margin-right: var(--f-sm);
}

.f__mx-md {
    margin-left: var(--f-md);
    margin-right: var(--f-md);
}

.f__mx-lg {
    margin-left: var(--f-lg);
    margin-right: var(--f-lg);
}

@media (min-width: 576px) {
    .f__mx-sm--md {
        margin-left: var(--f-md);
        margin-right: var(--f-md);
    }

    .f__mx-lg--md {
        margin-left: var(--f-lg);
        margin-right: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__mx-lg--lg {
        margin-left: var(--f-lg);
        margin-right: var(--f-lg);
    }
}

/* 4 - Margin Right (mr) */

.f__mr-xxs {
    margin-right: var(--f-xxs);
}

.f__mr-xs {
    margin-right: var(--f-xs);
}

.f__mr-sm {
    margin-right: var(--f-sm);
}

.f__mr-md {
    margin-right: var(--f-md);
}

.f__mr-lg {
    margin-right: var(--f-lg);
}

@media (min-width: 576px) {
    .f__mr-sm--md {
        margin-right: var(--f-md);
    }

    .f__mr-lg--md {
        margin-right: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__mr-lg--lg {
        margin-right: var(--f-lg);
    }
}

/* 3 - Margin Left (ml) */
.f__ml-xxs {
    margin-left: var(--f-xxs);
}

.f__ml-xs {
    margin-left: var(--f-xs);
}

.f__ml-sm {
    margin-left: var(--f-sm);
}

.f__ml-md {
    margin-left: var(--f-md);
}

.f__ml-lg {
    margin-left: var(--f-lg);
}

@media (min-width: 576px) {
    .f__ml-sm--md {
        margin-left: var(--f-md);
    }

    .f__ml-lg--md {
        margin-left: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__ml-lg--lg {
        margin-left: var(--f-lg);
    }
}





/* 2 - Margin Bottom (mb) */
.f__mb-xxs {
    margin-bottom: var(--f-xxs);
}

.f__mb-xs {
    margin-bottom: var(--f-xs);
}

.f__mb-sm {
    margin-bottom: var(--f-sm);
}

.f__mb-md {
    margin-bottom: var(--f-md);
}

.f__mb-lg {
    margin-bottom: var(--f-lg);
}

@media (min-width: 576px) {
    .f__mb-sm--md {
        margin-bottom: var(--f-md);
    }

    .f__mb-lg--md {
        margin-bottom: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__mb-lg--lg {
        margin-bottom: var(--f-lg);
    }
}

/* 1 - Margin Top (mt) */
.f__mt-xxs {
    margin-top: var(--f-xxs);
}

.f__mt-xs {
    margin-top: var(--f-xs);
}

.f__mt-sm {
    margin-top: var(--f-sm);
}

.f__mt-md {
    margin-top: var(--f-md);
}

.f__mt-lg {
    margin-top: var(--f-lg);
}

@media (min-width: 576px) {
    .f__mt-sm--md {
        margin-top: var(--f-md);
    }

    .f__mt-lg--md {
        margin-top: var(--f-lg);
    }
}

@media (min-width: 768px) {
    .f__mt-lg--lg {
        margin-top: var(--f-lg);
    }
}


/** Remove Margin Classes **/

/* Remove top margin */
.f__no-top-margin {
  margin-top: 0;
}

/* Remove bottom margin */
.f__no-bottom-margin {
  margin-bottom: 0;
}

/* Remove left margin */
.f__no-left-margin {
  margin-left: 0;
}

/* Remove right margin */
.f__no-right-margin {
  margin-right: 0;
}

/* Remove top and bottom margins */
.f__no-vertical-margin {
  margin-top: 0;
  margin-bottom: 0;
}

/* Remove left and right margins */
.f__no-horizontal-margin {
  margin-left: 0;
  margin-right: 0;
}

/* Remove all margins */
.f__no-margin {
  margin: 0;
}
/** Utility Classes **/



.f__rounded {
    border-radius: var(--f-space-s);
}

.f__rounded--bottom {
	 border-bottom-left-radius: var(--f-space-s);
  border-bottom-right-radius: var(--f-space-s);
}

.f__shadow-light {
  box-shadow:
    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}

.f__shadow-dark {
  box-shadow:
    6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
    22.3px 22.3px 17.9px rgba(255, 255, 255, 0.042),
    100px 100px 80px rgba(255, 255, 255, 0.07);
}

.f__padded {
    padding: var(--f-space-m);
}


.f__transition {
    transition: var(--f-transition);
}

.f__hide-overflow {
  overflow: hidden;
}

/** Component Classes **/
.f__overline {
    font-size: var(--f-sub-heading);
    letter-spacing: 2px;
}

.f__button {
    font-size: var(--f-body-s);
    padding: var(--f-space-s);
    background: #5e6c71;
    color: white;
    border-radius: var(--f-space-s);
    border: 1px solid transparent;
    transition: var(--f-transition);
    text-transform: capitalize;
    font-weight: 700;
	cursor: pointer;
}


.f__button:hover {
    scale: 1.1;
    opacity: 0.95;
}


.f__button--secondary {
    font-size: var(--f-body-s);
    padding: var(--f-space-s);
    background: transparent;
    border-color: #5e6c71;
    color: #5e6c71;
    border-radius: var(--f-space-s);
    border: 2px solid #5e6c71;
    transition: var(--f-transition);
    text-transform: capitalize;
    font-weight: 700;
cursor: pointer;
}

.f__button--page-nav:hover {
    scale: 1.1;
    opacity: 0.95;
}

.f__button--page-nav {
    font-size: var(--f-body-s);
    padding: var(--f-space-s);
    background: transparent;
    border-color: #5e6c71;
    color: #5e6c71;
    border-radius: var(--f-space-s);
    border: 1px solid;
    transition: var(--f-transition);
    text-transform: capitalize;
    font-weight: 700;
cursor: pointer;
}

.f__button--secondary:hover {
    scale: 1.1;
    opacity: 0.95;
}

.f__section-container-line {
  position: relative;
}

.f__section-container-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--f-space-m);
  background: linear-gradient(to right, var(--f-primary), var(--f-secondary));
}

/* Heading Underline Shape */

.f__line--white {
  background: #ffffff; /* Solid white background */
	 width: 100%;
  min-height: var(--f-space-s)!important;
}

.f__line--primary {
  background: rgba(23,108,181,0.92); /* Solid white background */
	 width: 100%;
  min-height: var(--f-space-s)!important;
}

.f__line--secondary {
  background: rgba(83,200,210,0.92); /* Solid white background */
	 width: 100%;
  min-height: var(--f-space-s)!important;
}/** 1 - Template Stuff CSS **/
.f__inner-content--container {
    overflow: hidden;
}


/** 2 - Section CSS **/
.f__section--container {
    background-color: #ffffff;
    width: 100%;
}


.f__page--container {
    max-width: 1366px;
    width: 100%;
	margin: auto;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 2.5em;
	padding-top: 2.5em;

}

.f__page--container-min-height-max {

    min-height: 90vh;
    /* Fallback for older browsers */
    min-height: 90svh;
    background-color: transparent;
    display: flex;
    flex-direction: column;
}

.f__page-child--container {
    background-color: transparent;
    flex: 1;
    /* match-parent-height */
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* The container will have a minimum height of 100% of the viewport height, done so responsively. So as the viewport height decreases, the container will adjust its height accordingly and become taller to accommodate the content inside it by using the flex column method. */

/** Media queries for different screen sizes **/

/* Note: Using percentage values for padding that correspond to the percentage of the container's width. Rounded to two decimal places to avoid uneven padding on some screens due to rounding errors. */

/* Full Screen */
@media (min-width: 1367px) {
    .f__page--container {
        max-width: 1366px;
        width: 100%;
        box-sizing: border-
    }
}

/* Page Container (1366px) and below */
@media (max-width: 1366px) {
    .f__section--container .f__page--container {
        max-width: 100%;
        min-width: 100%;
        box-sizing: border-box;

    }
}

/* Less than 992 */
@media (max-width: 991px) {
    .f__page--container {
        box-sizing: border-box;

    }
}

/* Less than 768 */
@media (max-width: 767px) {
    .f__page--container {
        box-sizing: border-box;

    }
}

/* Less than 480px */
@media (max-width: 479px) {
    .f__page--container {
        box-sizing: border-box;

    }
}


/* Section Container (1366px) and below */
@media (max-width: 1366px) {
    .f__section--container {
        box-sizing: border-box;
        padding: 0 2%; /* 5% side padding */
    }
}



/** Grid Safari Fix **/
.f__page-child--container--grid-fix {
    display: block;
}


.f__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* default: 4 columns */
    grid-gap: 25px;
    flex: 1;
    flex-direction: row;
    width: 100%;
}

.f__grid-item {
	height: 100%;
    flex-basis: calc(25% - 15px);
	background-color: #ffffff;
    /* set the width of grid items to 25% */
z-index: 1

}

.f__grid-item-heading {
	color: var(--f-secondary);
}

.f__grid-item--img {
	height: 100%;
	background-size: cover;
  background-repeat: no-repeat;
	border-top: 4px solid rgba(0,0,51,0.1)
	
}

/* Full Screen */
@media (max-width: 1367px) {
    .f__grid {
        grid-template-columns: repeat(3, 1fr);
        /* set 4 columns */
    }
}

/* Page Container */
@media (max-width: 1366px) {
    .f__grid {
        grid-template-columns: repeat(3, 1fr);
        /* set 4 columns */
    }
}

/* Less than 992px */
@media (max-width: 991px) {
    .f__grid {
        grid-template-columns: repeat(3, 1fr);
        /* set 3 columns */
    }
}

/* Less than 768px */
@media (max-width: 767px) {
    .f__grid {
        grid-template-columns: repeat(2, 1fr);
        /* set 2 columns */
    }
}

/* Less than 480px */
@media (max-width: 479px) {
    .f__grid {
        grid-template-columns: repeat(1, 1fr);
        /* set 1 column */
    }
}

.f__header {
    background-color: rgba(0, 0, 0, 0); /* Transparent background */
  width: 100%;
	padding: var(--f-space-s) 2%;
}

.f__header-overlay {
  position: unset;
  top: 0;
  left: 0;
  right: 0;
  background-color: var--f-bg-light); /* Semi-transparent primary color overlay */
  z-index: 9999; /* Make sure it's above other elements */
}


/* Media query for below 1366px */
@media (max-width: 1366px) {
    .f__header-overlay {
    
    }
}


.f__header-page--container {
	width: 100%;
    max-width: 1366px;
	
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/*
.f__header-logo {
    width: 50%;
}
*/

.f__header-menu {
    width: 100%;
	
    
}


.f__header-logo {
    width: 150px !important;
    /* adjust the width as needed */
    height: auto !important;
    /* maintain aspect ratio */
    display: block;
    /* make sure the image is centered properly */
	justify-content: center;
	align-content: center;

}.f__shape-container {
    width: 100%;
    height: 20vh;;
    overflow: hidden;
	
}

.f__shape--triangle-up {
    width: 100%;
    height: 100%;

    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

.f__shape--triagle-upsidedown {
    width: 100%;
    height: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}.f__bg-primary {
  background-color: var(--f-primary);
}

.f__head-primary {
  color: var(--f-primary);
}

.f__bg-secondary {
  background-color: var(--f-secondary);
}


.f__heading-light {
  color: var(--f-heading-light);
}

.f__bg-background-light {
  background-color: var(--f-bg-light);
}



.f__bg-background-light-alt {
  background-color: var(--f-bg-light-alt);
}

.f__bg-background-dark-alt {
  background-color: var(--f-bg-dark-alt);
}

/* Color Pallet



RGB values of primary color

--f-primary-overlay: rgba(var(--f-primary-rgb), 0.03);

 Semi-transparent primary color overlay



1. Primary

    --f-primary: #ed202e;

    --f-primary-rgb: 237, 32, 46;

2. Secondary
    --f-secondary: rgba(83,200,210,0.92);
   
3. Background Light
    --f-bg-light: #ffffff;
    
4. Background Light Alternative 
    --f-bg-light-alt: #f9f9f9;
    
5. Heading Dark 
    --f-heading-dark: #5e6c71;
    
6. Text Dark 
    --f-text-dark: #222222;
    
7. Heading Light 
    --f-heading-light: #ffffff;
    
8. Text Light 
    --f-text-light: #d9d9d9;
    
9. Background Dark Alternative 
    --f-bg-dark-alt: #222222;
     
10. Border Light 
    --f-border-light: #e8e8e8;
     
11. Border Dark 
    --f-border-dark: #474747;


*/.f__gradient-h1 {
  background: linear-gradient(to right, var(--f-primary), var(--f-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.f__gradient-line {
  width: 100%;
  min-height: var(--f-space-s)!important;
  background: linear-gradient(to right, var(--f-primary), var(--f-secondary));
}/** Utility Classes - flex direction **/

.f__flex-row {
    flex-direction: row;
    /* set the main axis to run horizontally from left to right */
}

.f__flex-row-reverse {
    flex-direction: row-reverse;
    /* set the main axis to run horizontally from right to left */
}

.f__flex-column {
    flex-direction: column;
    /* set the main axis to run vertically from top to bottom */
}

.f__flex-column-reverse {
    flex-direction: column-reverse;
    /* set the main axis to run vertically from bottom to top */
}

.f__flex-inline-block {
    display: inline-block;
    /* Moves elements next to each other in a div */
}

/** Utility Classes - align content of elements vertically **/


.f__justify-start {
    justify-content: flex-start;
    /* align content to the start of the container */
}

.f__justify-end {
    justify-content: flex-end;
    /* align content to the end of the container */
}

.f__justify-center {
    justify-content: center;
    /* center content horizontally within the container */
}

.f__justify-between {
    justify-content: space-between;
    /* distribute content evenly with space between them */
}

.f__justify-around {
    justify-content: space-around;
    /* distribute content evenly with equal space around them */
}


/** Utility Classes - align content of elements vertically **/


.f__align-start {
    align-items: flex-start;
    /* align items to the start of the container */
}

.f__align-end {
    align-items: flex-end;
    /* align items to the end of the container */
}

.f__align-center {
    align-items: center;
    /* center items vertically within the container */
}

.f__align-baseline {
    align-items: baseline;
    /* align items to their baseline */
}

.f__align-stretch {
    align-items: stretch;
    /* stretch items to fill the container vertically */
}



/** Utility Classes - flex wrapping **/

.f__flex-wrap {
    flex-wrap: wrap;
    /* wrap the child elements if they exceed the width of the container */
}

@media (max-width: 1366px) {
  .f__align-start--center-responsive {
    align-items: center;
    /* align items to the center of the container on screens less than 992px */
  }
}


@media (max-width: 1366px) {
  .f__align-start--center-text-responsive {     text-align: center;
	  align-items: center;
    /* align items to the center of the container on screens less than 992px */
  }
}.oxy-pro-menu-list li:last-child {
    /*   border: 5px solid black; */

}

.oxy-pro-menu-list {
 /*   border: 5px solid gray; 
    align-content: */
}

.oxy-pro-menu {
  /*  border: 5px solid pink; */
}


.f__pro-menu--main {
    width: 100%;
}

.oxy-pro-menu .oxy-pro-menu-list .menu-item {
    width: unset;
}




/* Align menu items to the right */
.oxy-pro-menu-list {
    display: flex;
    justify-content: flex-end;
    font-weight: 600;
    
}

/* Add spacing between menu items */
.oxy-pro-menu-list li:not(:last-child) {
    margin-right: 2%;
	
	
    /* Adjust the value as needed */
}

/* Push the last child to the end */
.oxy-pro-menu-list li:last-child {
    margin-left: auto;
}

/* Push the first child to the end, before last child's mrgin*/
.oxy-pro-menu-list li:first-child {
    margin-left: auto;
}


.oxy-pro-menu-list li:last-child {
    background-color: rgba(23,108,181,0.92);
	border: 2px solid #ffffff;
}

/* Style for all menu items except the last child */
.oxy-pro-menu-list li:not(:last-child) a {
    color: rgba(23,108,181,0.92);
}

/* Style for the last child menu item */
.oxy-pro-menu-list li:last-child a {
    color: #ffffff;
}


.oxy-pro-menu-list li:last-child {
    padding: var(--f-space-s);
    border-radius: var(--f-space-s);
    /* Replace with your border radius variable */
}


/** CTA ANIMATE BUTTON **/


.oxy-pro-menu-list li:last-child {


    text-transform: capitalize;
    font-weight: 600;

}

.oxy-pro-menu-list li:last-child:hover {
    /* Apply hover effect */
    transform: scale(1.1);
    transition: var(--f-transition);

}

/* Align menu to the right below 1366px */

@media (max-width: 1366px) {
    .f__pro-menu--main {
        display: flex;
        justify-content: flex-end;
    }

}

/* Mobile menu elements */

.oxy-pro-menu-mobile-open-icon,
.oxy-pro-menu-mobile-open-icon svg {
  color: var(--f-primary);
}

.oxy-pro-menu-mobile-open-icon span {
  color: var(--f-primary);
}

/** ANimate Menu Items **/

.oxy-pro-menu-list li:not(:last-child):hover {
	  /* Apply hover effect */
    transform: scale(1.1);
    transition: var(--f-transition);
}



/* Footer section */
.f__footer {
    background-color: #222222;
    width: 100%;
    padding: 10svh 2%;
    /* Increased top/bottom padding */
    /* top, right, bottom, left */
    padding: 10vh 2%;
    /* fallback to vh if svh fails */

}

/* Footer container */
.f__footer--container {
    max-width: 1366px;
    width: 100%;
    margin: auto;
}

/* Footer child container */
.f__footer-child--container {
    background-color: transparent;
    flex: 1;
    /* match-parent-height */
    width: 100%;
    display: flex;
    flex-direction: column;
}

/** Footer grid **/

.f__footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 25px;
    flex: 1;
    flex-direction: row;
    width: 100%;
}

/* Full Screen */
@media (max-width: 1366px) {
    .f__footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Less than 992px */
@media (max-width: 991px) {
    .f__footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Less than 768px */
@media (max-width: 767px) {
    .f__footer-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* Less than 480px */
@media (max-width: 479px) {
    .f__footer-grid {
        grid-template-columns: repeat(1, 1fr);
        /* set 1 column */
    }
}

/** Grid Safari Fix **/
.f__footer-child--container--grid-fix {
    display: block;
}


.f__footer-heading {
    font-weight: bold;
    margin: var(--f-md) 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--f-heading-light)
}

.f__footer-container-line-top {
    position: relative;
}

.f__footer-container-line-top::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--f-space-m);
    background: var(--f-primary);
}

.f__footer-link {
    /* Footer link styles */
    color: var(--f-heading-light);
    text-transform: capitalize;
    line-height: 2;
    transition: var(--f-transition);
}

.f__footer-link::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--f-heading-light);
    /* Use the same color as the link */
    margin-right: 8px;
    /* Adjust the spacing as needed */
}


.f__footer-link:hover {
    transform: scale(1.1);
}

.f__footer-grid-item {
    align-items: flex-start;
}

/* Less than 992px */
@media (max-width: 991px) {
  .f__footer-grid-item {
    align-items: center;
  }
}


/** BUTTON CTA **/

.f__footer {
    position: relative;
    /* Add positioning context */
}

.f__button-container {
    position: absolute;
    /* Position the container */
    top: -25px;
    /* Adjust the top value as needed */
    left: 50%;
    /* Position it in the center horizontally */
    transform: translateX(-50%);
    /* Move it back by 50% of its own width */
    z-index: 3;
}

.f__footer-button {
    font-size: var(--f-body-s);
    padding: var(--f-space-m);
    background: rgba(23,108,181,0.92);
    color: white;
    border-radius: var(--f-space-s);
    border: 1px solid transparent;
    transition: var(--f-transition);
    text-transform: capitalize;
    font-weight: 700;
    border: 4px solid white;
}

.f__footer-button:hover {
    transform: scale(1.1);
    /* Use transform instead of scale property */
    opacity: 0.95;
}


.f__footer-button--Business-Profile {
    font-size: var(--f-body-s);
    padding: var(--f-space-m);
    background: #ffffff;
    color: #222222;
    border-radius: var(--f-space-s);
    border: 1px solid transparent;
    transition: var(--f-transition);
    text-transform: capitalize;
    font-weight: 700;
    border: 4px solid white;
}

.f__footer-button--Business-Profile:hover {
    transform: scale(1.1);
    /* Use transform instead of scale property */
    opacity: 0.95;
}
/** TEXT **/

/* Typing Text */



/* Lazy Load Text */


/* Text Appear Animation */
@keyframes textAppear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.f__animate--text-appear {
  opacity: 0;
  animation: textAppear 1s ease forwards;
}


/* Levitation */
@keyframes levitation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.f__animate--levitate {
  animation-name: levitation;
  animation-duration: 4s; /* Adjust the duration as needed */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/** Grid Safari Fix **/
.f__page-child--container--grid-fix {
    display: block;
}


.f__why-us--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* default: 4 columns */
    grid-gap: 10vh;;
    flex: 1;
    flex-direction: row;
    width: 100%;
	margin-top: 10vh;
}


.f__why-us--grid-item {
	height: 100%;
    flex-basis: calc(25% - 15px);
	background-color: #ffffff;
    /* set the width of grid items to 25% */
z-index: 1
}


.f__why-us--grid-item--column {
	width: 100%;
	display: flex;
	flex-direction: row;
}

/* Less than 480px */
@media (max-width: 479px) {
  .f__why-us--grid-item--column {
    flex-direction: column;
  }
}


.f__why-us--grid-item-column--number {
	min-width: 20%;
	padding: 16px 32px;
	background-color: var(--f-primary);
	display: flex;
	align-items: center;
}

/* Less than 480px */
@media (max-width: 479px) {
  .f__why-us--grid-item-column--number {
    width: 100%;
  }
}

.f__why-us--grid-item-column-number-heading {
	font-weight: 700;
	font-size: 4rem;
}

.f__why-us--grid-item-column--text {
	padding-left: var(--f-sm) ;
	padding-right: var(--f-sm) ;
}



/* Full Screen */
@media (max-width: 1367px) {
    .f__why-us--grid {
        grid-template-columns: repeat(2, 1fr);
        /* set 4 columns */
    }
}

/* Page Container */
@media (max-width: 1366px) {
    .f__why-us--grid {
        grid-template-columns: repeat(2, 1fr);
        /* set 4 columns */
    }
}

/* Less than 992px */
@media (max-width: 991px) {
    .f__why-us--grid {
        grid-template-columns: repeat(2, 1fr);
        /* set 3 columns */
    }
}

/* Less than 768px */
@media (max-width: 767px) {
    .f__why-us--grid {
        grid-template-columns: repeat(1, 1fr);
        /* set 2 columns */
    }
}

/* Less than 480px */
@media (max-width: 479px) {
    .f__why-us--grid {
        grid-template-columns: repeat(1, 1fr);
        /* set 1 column */
    }
}

/*  */

/* https://oxygen4fun.supadezign.com/tutorials/how-to-style-a-contact-form-7-form/ */

/* Width & font

First thing first, let's change the width for all the elements so it can be responsive. */


.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=url],
.wpcf7 input[type=tel],
.wpcf7 input[type=number],
.wpcf7 input[type=submit],
.wpcf7 .wpcf7-select,
.wpcf7 textarea {
	width: 100%;
	font-family: var(--f-font-family-heading);
}

/* Style the Input

Very basic styling. We remove the ugly default borders and replace them by a background color instead. We add some paddings and some font stuff. I have also added a transition, as it will be useful later. */

.wpcf7 input {
	padding: 20px;
	margin-bottom: 6px;
	border: none;
	background-color: whitesmoke;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.2px;
	transition: 0.3s ease background, color;
	color:black;
	border-radius: 4px;
}

/* Placeholders & Focus

I won't explain in detail what they are doing, it's pretty self-explanatory, but check this page if you want to know more:
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

Note that the transition we've added previously, is useful here, as we are changing the color and background when we click in one of the input. 

Click in the YOUR NAME input and change it to see the result in action: */


.wpcf7 ::placeholder {
	color: black;
}
.wpcf7 :focus {
	color: rgba(23,108,181,0.92);
	background-color: #ffffff;
}
.wpcf7 :focus::placeholder {
	color: white;
}

/* An example about what we can do with the focus and placeholder and how they work: */

.wpcf7 input {
	color: rgba(83,200,210,0.92)
}
.wpcf7 input::placeholder {
	color: rgba(83,200,210,0.92)
}
.wpcf7 input::focus {
	color: rgba(23,108,181,0.92)
}
.wpcf7 input::focus::placeholder {
	color: rgba(83,200,210,0.92)
}


/* Textarea

I just want the Textarea to have the same style as the inputs, but with a different height and not re-sizable: */

.wpcf7 input, .wpcf7 textarea {
	padding: 20px;
	margin-bottom: 6px;
	border: none;
	background-color: whitesmoke;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1.2px;
	transition: 0.3s ease background, color;
	color:black;
	
}
.wpcf7 textarea {
	height: 150px;
	resize: none;
		
}

/* The Submit button

It's time to take care of the Submit button. Not much to do here, except changing the colors and adding a pointer: */

.wpcf7 input[type="submit"] {
	background-color: rgba(23,108,181,0.92);
	color: white;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
	background-color: black;
	color: white;
	
}

/* Fixing some little things

I hate the border that shows up when we click in a button or in an input box: 

So to remove it, we simply have to add a outline:0 to the pseudo-class focus:
*/

.wpcf7 :focus {
	color: rgba(23,108,181,0.92);
	background-color: #ffffff;
	outline:0;
}

/* The Checkbox doesn't look great but it's much more complicated to style (there are plenty of examples online). I just change the margin: */


.wpcf7 span.wpcf7-list-item {
	margin: 0 0 10px 0;
}


/* Warning messages

Click on the SEND button and you will see the warning messages: 

The default colors or the position doesn't always look good, so we can also style them:

Click on the SEND button below to try it:
*/

.wpcf7 .wpcf7-validation-errors,
.wpcf7 .wpcf7-acceptance-missing {
	border: 5px solid rgba(23,108,181,0.92);
	margin-top: -30px;
}
.wpcf7 span.wpcf7-not-valid-tip {
	background-color: #ffffff;
	color: white;
	font-size: 12px;
	padding: 5px;
}
.wpcf7 .wpcf7-mail-sent-ok {
	border: 5px solid white;
	margin-top: -30px;
}


.wpcf7 a {
	color: rgba(23,108,181,0.92);
}

/*  */

/*
.f__contact-button-effects {
	display: flex;
	flex-direction: row;
	justify-content: center;
 align-items: flex-start;
	background-color: var(--f-bg-light);
		font-weight: 600;
	text-transform: uppercase;
	border-radius: var(--f-xs);
	box-shadow:  6.7px 6.7px 5.3px rgba(255, 255, 255, 0.028),
    22.3px 22.3px 17.9px rgba(255, 255, 255, 0.042),
    100px 100px 80px rgba(255, 255, 255, 0.07);
}

*/

.f-contact-btn-main:hover {
    transform: translateY(-5px);
    border-bottom-color: color(undefined);
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;

    box-shadow: 0px 7px 25px -10px rgba(0, 0, 0, 0.5);
}

.f-contact-btn-main {
    border-radius: 7px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    text-transform: capitalize;
    letter-spacing: 1px;
    border-top-color: #1ea9a0;
    border-right-color: #1ea9a0;
    border-bottom-color: #1ea9a0;
    border-left-color: #1ea9a0;
    text-align: center;
font-weight: 500;
    
    box-shadow: 0px 10px 20px -15px rgba(0, 0, 0, 0.5);
}

  .f-contact-btn-main-whatsapp {
        color: #46c655;
  background-image: linear-gradient(to bottom, rgba(70, 198, 85, 0.08), rgba(70, 198, 85, 0.08));
    }

  .f-contact-btn-main-maps {
        color: #ed5748;
 background-image: linear-gradient(to bottom, rgba(237, 87, 72, 0.07), rgba(237, 87, 72, 0.07));
    }

  .f-contact-btn-main-facebook {
        color: #0ca3ff;
background-image: linear-gradient(to bottom, rgba(12, 163, 255, 0.08), rgba(12, 163, 255, 0.08));
    }

.f-contact-btn-main:not(.ct-section):not(.oxy-easy-posts),
.f-contact-btn-main.oxy-easy-posts .oxy-posts,
.f-contact-btn-main.ct-section .ct-section-inner-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .f-contact-tn-main {
        font-size: 13px;
    }
}

@media (max-width: 479px) {
    .f-contact-btn-main {
        width: 100%;
    }
}