/*
 Theme Name:     Oksi
 Theme URI:     https://oksi.ai/
 Description:    Child Wordpress Theme for Oksi custom theme based on Divi
 Author:         Stirling Brandworks
 Author URI:     https://www.stirlingbrandworks.com
 Template:       Divi
 Version:        1.0.0
*/

/*Import Custom Font*/
@import url("https://use.typekit.net/xmq7ddt.css");

/*Import Archivo*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;800&display=swap');


/* Variables */
:root {
    --color-light-blue: #B5D1E2;
    --color-blue: #0171BA;
    --color-dark-blue: #00243F;
    --color-light-gray: #EFEFEF;
    --color-gray: #405467;
    --color-dark-gray: #15202B;
    --color-borders: #e5e7eb;
	--font-family-heading: 'Archivo', sans-serif;
    --font-family-special: 'space-grotesk-variable', sans-serif;
    --breakpoint-small: 640px;
    --breakpoint-medium: 768px;
    --breakpoint-large: 1024px;
    --breakpoint-xlarge: 1280px;
    --breakpoint-xxlarge: 1536px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-heading) !important;
    font-weight: 800 !important;
}

h1{
    font-size: 68px;
    font-weight: 800;
}

h2 {
    font-size: 48px;
    font-weight: 800;
}

h3 {
    font-size: 38px;
    font-weight: 800;
}

h4 {
    font-size: 30px;
    font-weight: 800;
}

h5 {
    font-size: 22px;
    font-weight: 800;
}

h6 {
    font-size: 16px;
    font-weight: 800;
}

a {
	color: var(--color-blue);
}

.font-special {
	font-family: var(--font-family-special) !important;
}

/*Custom Containers*/
@media (min-width: 640px){
    .menu-container,
    .wrap-container {
        max-width: 640px;
        width: 640px;
    }
}

@media(min-width:768px){
    .menu-container,
    .wrap-container{
        max-width: 768px;
        width: 768px;
    }
}

@media (min-width: 1024px){
    .menu-container,
    .wrap-container {
        max-width: 1024px;
		width: 1024px;
    }
    .wrap-container--small{
        max-width: 768px;
        width: 768px;
    }
}

@media (min-width: 1280px){
    .menu-container,
    .wrap-container {
        max-width: 1280px;
        width: 1280px;
    }

    .wrap-container--small{
        max-width: 1024px;
        width: 1024px;
    }
}

@media (min-width: 1536px){
    .menu-container,
    .wrap-container {
        max-width: 1536px;
        width: 1536px;
    }

    .wrap-container--small{
        max-width: 1024px;
        width: 1024px;
    }
}

/*Sliders*/
.pagination-link.active .pagination-button{
    background-color: #fff!important;
    color: var(--color-dark-blue)!important;
}

.pagination-button img {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

.pagination-link.active .pagination-button img{
    filter: invert(0%);
    -webkit-filter: invert(0%);
}

/*Pagination on News Page*/
.page-numbers{
    border: 1px solid #ddd;
    padding: 0.5rem 1rem;
    text-align: center;
    border-radius: 3px;
    background-color: #fff;
    color: #333;
    font-weight: bold;
    transition: 0.25s all ease;
    text-transform: uppercase;
}

.page-numbers:active,
.page-numbers:hover{
    color: var(--color-blue);
    border-color: var(--color-blue);
}

.page-numbers.current{
    color: #fff !important;
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

/*Menu Overrides*/
#et-top-navigation{
    padding: 0.75rem 0 !important;
    width: 100%;
}

#top-menu-nav{
    width: 100%;
}

@media(min-width:1280px){
    #top-menu-nav {
        width: auto;
    }

    #et-top-navigation{
        padding: 2rem 0 1rem 0 !important;
        margin-bottom: 1rem;
        width: auto;
    }
}

@media(min-width:1800px){
    .et_menu_container{
        width: 80% !important;
    }
}



/*Forms*/
.form-wrapper .gform_wrapper{
    margin-top: 0;
}

.form-wrapper .ginput_container input,
.form-wrapper .ginput_container textarea{
    opacity: 0.75;
    border-radius: 0.2rem;
    transition: 0.25s all ease;
}

.form-wrapper .ginput_container input:active,
.form-wrapper .ginput_container input:focus,
.form-wrapper .ginput_container textarea:active,
.form-wrapper .ginput_container textarea:focus{
    opacity: 1;
}

.form-wrapper .gform_wrapper .gform_footer input.button {
    background-color: var(--color-blue);
    border: 1px solid var(--color-blue);
    border-radius: 0.2rem;
    color: #fff;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 600;
    padding: 1rem 2rem;
    transition: 0.25s all ease;
}

.form-wrapper .gform_wrapper .gform_footer input.button:hover,
.form-wrapper .gform_wrapper .gform_footer input.button:focus{
    background-color: var(--color-dark-blue);
    border: 1px solid var(--color-blue);
}

/*Animation on Scroll Indicator*/
.scroll-icon {
    animation: bounce 1.5s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/*Swiper Navigation*/
.swiper-button-next:after, 
.swiper-button-prev:after{
    font-size: 1.2rem !important;
}


/*Header Customizations*/

/*Hide ET default menu since were using our own*/
#et_mobile_nav_menu{
    display: none;
}

/*hide logo on smaller screens*/
.logo_container--responsive{
    display: none;
}

@media(min-width: 1280px){
    .logo_container--responsive{
        display: block;
    }
}

/* Capability Page Elements */


/* Blue Bar Titles */
/* Adding this CSS class (column-w-title-bar) to a text module 
will add the blue bar underneath it's h3 or h4 titles */

.column-w-title-bar h3,
.column-w-title-bar h4 {
    position: relative;
}

.column-w-title-bar h3:after,
.column-w-title-bar h4:after{
    content: '';
    display: block;
    background: var(--color-blue);
    height: 3px;
    width: 1.3rem;
    margin: 15px auto 0 auto;
}


/* Mobile Full-Width Columns */
/* Add this class (stack-columns-on-mobile) to rows to force columns 
to always be full width on mobile regardless of number of columns */

@media(max-width: 767px){
    .stack-columns-on-mobile .et_pb_column {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* Footer Styling */
/* Bottom Menu*/
ul#menu-footer-sub-menu{
    display:flex;
   justify-content: center;
}
.footer-sub-menu .sub-menu li:not(:first-child)::before {
    content: "//";
    margin-right: 5px; 
    margin-left: 5px; 
}

/* Bottom Menu Mobile Styling*/
@media(min-width: 1001px){
  ul#menu-footer-sub-menu{
    position: absolute;
    right: 0;
  }
}
/* Main Footer Mobile Styling*/
.footer-widget{
    padding: 0 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
}

@media(min-width:768px){
    .footer-widget{
      padding: 0;
      text-align: left;
    }
}

/* Main Footer Title */
.footer-widget .title{
    text-transform: uppercase;
    color: white;
    font-weight: 800;
}

/* Main Footer Links */
#footer-widgets .footer-widget li a{
    color: var(--color-light-blue) !important;
}

/* Removing Bullet Before Link */
#footer-widgets .footer-widget li{
    padding-left: unset;
}

#footer-widgets .footer-widget li:before {
    display:none;
}
/* contact us button */
.footer-widget .button-white{
    padding: 5px;
    background: #FFFFFF;
    border-radius: 2px;
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #00243F;
    margin-bottom:25px;
    }