/*
Theme Name: MS BRAINS
Theme URI: http://xxx.com/
Template: builder
Version: 3.4
Updated: 10/10/2024
Description: Builder with drag and drop elements using wireframe kit design.
Tags: wordpress, bootstrap, wireframe, acf
*/

/*------------------------------------------
    #MARK: REMOVE
------------------------------------------*/
/* #region */

.mh { 
    min-height: 2000px; 
}

body:not(.wp-admin) {
    background: url(upload/bg-1.jpg) top center no-repeat;
}

/* #endregion */

/*------------------------------------------
    #MARK: ROOT
------------------------------------------*/
/* #region */

:root {

    --font-size: 17px;
    --font-1: "Open Sans";
    --font-2: "Merriweather";


    --color1: #333;
    --color2: #003663;
    --color3: #2F80DB;
    --color4: #af602b;

    /*
    --h1: 80px;
    --h2: 54px;
    --h3: 44px;
    --h4: 32px;
    --h5: 24px;
    --h6: 18px;
    */

    --color10: black;
    --color11: white;

    --a: #DDA15E;
    --hover: #A1AEB7;       

    --darktitle:white;
    --darktext:white;
}

/* #endregion */

/*------------------------------------------
    #MARK: GENERAL
------------------------------------------*/
/* #region */


/* #endregion */

/*------------------------------------------
    #MARK: FIELD SET
------------------------------------------*/
/* #region */

.mtitle {
    font-family: var(--font-2);
    font-size: 46px;
}

.btitle {
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 300;
}

section .dinfo hr {
    border-top: 3px solid var(--color3);
    max-width: 80px;
    margin: 20px 0 0 0;
}

.dtitle {
    /* font-size: inherit; */
}

.atitle {
    /* font-size: inherit; */
}

.d-icon {
    /* 
    width: 40px; 
    */
}

.dtext {
    font-weight: 300;
    line-height: 1.7;
}

.dtext strong {
    /* 
    font-weight: 600; 
    */
}

.ptext {
    /* 
    font-size: 17px;
    line-height: 180%; 
    */ 
}

.btn-loop { 
    /*  
    margin-top: 30px;
    */
}

.element .wrap {
    padding: 60px 0;
}

.dinfo .mtitle strong {
    
}

/* #endregion */

/*------------------------------------------
    #MARK: BUTTONS
------------------------------------------*/
/* #region */

.btn {
    padding: 8px 20px;
    border-radius: 0;
}

.btn span {

}

.btn-1 {
    background-color: var(--color3);
    border: 1px solid var(--color3);
}

.btn-2 {
    background-color: var(--color2);
    border: 1px solid var(--color2);
}

.btn-3 {
    background-color: transparent;
    border: 1px solid #479EFF;
}

.btn-1::after,
.btn-1:hover { 
    background-color: var(--color2);
}

.btn-1 span,
.btn-2 span,
.btn-3 span {
    color: white;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}

.btn-3 span {
    color: #479EFF;
}

.btn-1:hover span,
.btn-2:hover span,
.btn-3:hover span {
    color: white;
}

.btn-2::after,
.btn-2:hover { 
    background-color: var(--color3);
}

.btn-3::after,
.btn-3:hover { 
    background-color: var(--color3);
}

/* other buttons */

.btn-n {
    background-color: transparent !important;
    border: 1px solid var(--color3) !important;
    padding-left: 40px !important;
}

.btn-n img {
    filter: brightness(0) saturate(100%) invert(42%) sepia(12%) saturate(2471%) hue-rotate(172deg) brightness(90%) contrast(90%);
    max-height: 20px;
}

.btn-n:hover img {
    filter: brightness(0) invert(1);
}

.btn-n::after,
.btn-n:hover { 
    background-color: var(--color2) !important;
}

.btn-n span {
    color: #53A4FF;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}

.btn-n:hover span {
    color: white;
}

.btn-2 { }
.btn-2 span { }

.btn-3 { }
.btn-3 span { }

.btn-4 { }
.btn-4 span { }

.link-text, .link-more { }
.btn-icon { }
.btn-n { }
.w-icon[data-icon="pre"] { }
.w-icon[data-icon="post"] { } 


/* #endregion */

/*------------------------------------------
    #MARK: TOP SECTION
------------------------------------------*/
/* #region */

.top-section {
    background-color: #08172d;
    font-size: 13px;
    padding: 13px 0;
    color: white;
}

.top-section .company-about {

}

.top-section .flexic {
    justify-content: space-between;
    align-items: center;
}

.top-section .comp {
    display: flex;
    gap: 35px;
}

    .top-section .comp .ssc {
        
    }

    .top-section .comp .ssc .sc-ba,
    .top-section .comp .ssc .sc-contact {
        opacity: 0.7;
        text-decoration: none;
        cursor: pointer;
    }

    .top-section .comp .ssc .sc-contact:hover {
        color: #396CA6;
    }

    .top-section .comp .sc-ba {
        margin-right: 5px;
        font-weight: 700;
        color: #59A7FF;
    }

    .top-section .comp .d-icon {
        width: 13px;
        margin-right: 10px;
        transform: scaleX(-1);
        max-height: 14px;
        filter: brightness(0) saturate(100%) invert(42%) sepia(12%) saturate(2471%) hue-rotate(172deg) brightness(90%) contrast(90%);
    }

    .top-section .comp a {
        color: white;
    }

.top-section .social-icons .soc-link {
    background-color: transparent;
    width: 20px;
    height: 20px;
}

.top-section .social-icons .soc-link img {
    width: 20px;
    filter: none;
    opacity: 1;
}

.top-section .sc-div {
    align-items: center;
}

/* #endregion */

/*------------------------------------------
    #MARK: HEADER
------------------------------------------*/
/* #region */

.navbar-brand {
    width: 240px;
}

header .navbar-brand { 
    filter: brightness(0) invert(1);
}

header .menu_wrap {
    padding: 30px 0 0;
}

header.sticky-head .menu_wrap {
    /* background-color: rgba(0,0,0,0.1); */
}




/* #endregion */

/*------------------------------------------
    #MARK: MENUS
------------------------------------------*/
/* #region */

.main-menu .navbar-nav {
    /* gap */
}

.main-menu .navbar-nav  .nav-link {
    padding: 0;
}

.main-menu .nav-link span {
    text-transform: uppercase;
    color: white;
    font-weight: 600;
    font-size: 15px;
}

.main-menu .menu-item {
    /* padding */
}

.main-menu .menu-item.active .nav-link span,
.main-menu .menu-item .nav-link:hover span {
    color: #53A4FF;
}

#navbar-home .navbar-nav {
    gap: 30px;
}

#navbar-home .menu-extension {
    /* margin-left: 30px; */
}

header.sticky-head .menu_wrap {
    padding: 10px 0;
    background-color: white;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

header.sticky-head .navbar-brand {
    filter: none;
}
header.sticky-head .main-menu .nav-link span {
    color: var(--color2);
}

header.sticky-head .btn-n,
header.sticky-head .btn-n { 
    border: 1px solid transparent !important;
    background-color: var(--color3) !important;
}

header.sticky-head .btn-n span {
    color: white;
}

header.sticky-head .btn-n img {
    filter: brightness(0) invert(1);
}

/* #endregion */

/*------------------------------------------
    #MARK: FOOTER
------------------------------------------*/
/* #region */
footer {
    text-align: center;
}

footer.element .wrap {
    padding: 30px 0;
}

/* #endregion */

.section-cluster {
    position: relative;
}

/*------------------------------------------------------------------------------------*/

/*------------------------------------------
    #MARK: HERO 01
------------------------------------------*/
/* #region */

.heroopt-01 .wrap {
    padding-top: 70px;
    height: 700px;
}

.heroopt-01 .overlay.color {
    background-color: rgba(0,0,60,0.7);
}

.heroopt-01 .overlay-bg img {
    object-position: center 63%;
}

.heroopt-01 {
    text-align: center;
}

.heroopt-01 .mtitle {
    line-height: 1.3;
    letter-spacing: 1px;
    max-width: 95%;
}

.heroopt-01 [data-margin] .btitle + .mtitle {
    margin-top: 10px;
}

.heroopt-01 .btn-loop {
    margin-top: 50px;
}

/*
.heroopt-01 .overlay img {
    width: 110%;
    transition: 10s;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}


body.pageload .heroopt-01 .overlay img { width: 100%; }
*/

/* #endregion */

/*------------------------------------------
    #MARK: TITLE ROW 01
------------------------------------------*/
/* #region */

.titler-02 .mtitle {
    font-size: 40px;
    line-height: 1.3;
}

.titler-02 .atitle {
    margin-top: 10px;
    font-weight: 400;
    font-size: 19px;
    font-family: var(--font-2);
}


/* #endregion */

/*------------------------------------------
    #MARK: HERO 01
------------------------------------------*/
/* #region */

.section-cluster {
    /* background-color: rgb(247,247,247); */
    position: relative;
}
.section-cluster:not(.misa) .bg-img {
    transform: scaleX(-1);
    max-width: 72%;   
}

.section-cluster.misa .bg-img {
    opacity: 0.4;
}
.section-cluster.misa .overlay.color1 {
    background-color: rgba(20,20,80,0.7);
}


/* #endregion */

/*------------------------------------------
    #MARK: HERO 01
------------------------------------------*/
/* #region */

.count-01 {
    text-align: center;
}



.count-01 .item {
    padding-bottom: 20px;
}

.count-01 .ititle {
    font-family: var(--font-2);
    font-size: 20px;
}

.count-01 .cpre,
.count-01 .cpos {
    font-size: 50px;
    font-weight: 800;
}
.count-01 .count_up {
    display: flex;
    align-items: center;
    justify-content: center;
}
.count-01 .ct {
    font-size: 70px;
    margin: 0 5px;
    color: var(--color3);
    font-weight: 800;
}

/* #endregion */

/*------------------------------------------
    #MARK: TITLE OPT 01
------------------------------------------*/
/* #region */

.titleopt-01 .wrap {
    padding-bottom: 0;
}
.titleopt-01 .dinfo hr {
    margin: 30px auto;
}

.titleopt-01 .btitle + .mtitle {
    margin-top: 20px;
}

.titleopt-01 .mtitle {
    letter-spacing: 1px;
}

.misa .titleopt-01 .btitle {
    color: white;
}

.misa .titleopt-01 .mtitle {
    color: white;
}


/* #endregion */

/*------------------------------------------
    #MARK: CLIENTS 01
------------------------------------------*/
/* #region */

.clients-01 .wrap {}

.clients-01 .flexic {
    margin: 0 -2px;
    row-gap: 4px;
}
.clients-01 .flex-item {
    padding: 0 2px;
    flex: 0 0 25%;
    position: relative;
}

.clients-01 .flex-item .item {
    padding-bottom: 100%;
    position: relative;
    background-color: var(--color3);
    display: block;
    overflow: hidden;
}

.clients-01 .overlay.color {
    background-color: rgba(20,20,20, 0.75);
}

.clients-01 .dfront,
.clients-01 .overlay-bg,
.clients-01 .overlay.color {
    transition: 0.5s;
    z-index: 2;
}

.clients-01 .dfront,
.clients-01 .dback {
    position: absolute;
    transition: 0.5s;
}

.clients-01 .dback { 
    padding: 20px;
    opacity: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
}

    .clients-01 .ititle {
        margin-top: 10px;
        letter-spacing: 0.03em;
        font-family: var(--font-2);
        color: white;
        line-height: 1.5;
    }

    .clients-01 .ptext,
    .clients-01 .dtext {
        font-size: 90%;
        color: #eee;
        margin-top: 10px;
    }

.clients-01 .dfront {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

    .clients-01 .dfront img {
        width: auto;
        max-width: 90%;
        height: auto;
        filter: brightness(0) invert(1);
        max-height: 65px;
    }

    .clients-01 .dfront.landscape img {
        max-height: unset;
        max-width: 170px;
    }

    .clients-01 .dfront.portrait img {
        max-height: 100px;
        max-width: unset;
    }

/**/
.clients-01 .item:hover .dback {
    opacity: 1;
}

.clients-01 .item:hover .dfront {
    top: -25%;
    opacity: 0;
}

.clients-01 .item:hover .overlay.color,
.clients-01 .item:hover .overlay-bg {
    opacity: 0;
}

.clients-01 .item:hover .bg-img {
    opacity: 0;
}

/* #endregion */

/*------------------------------------------
    #MARK: CARDS 01
------------------------------------------*/
/* #region */

.cardsflex-01 { 
    text-align: center;
    background-color: transparent;
}

.cardsflex-01 .btitle {
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 700;
}

.cardsflex-01 .ititle {
    font-size: 30px;
    letter-spacing: 0.3px;
    font-family: var(--font-2);
    margin-top: 5px;
    font-weight: 700;
}



.cardsflex-01 .div-link {
    border: 1px solid rgba(47, 128, 219, 0.5);
    /* background-color: rgba(1, 39, 81, 0.5); */
    padding: 30px 20px;
    display: block;
}

.cardsflex-01 .abtn-loop {
    margin-top: 40px;
}

.cardsflex-01 .d-iicon {
    height: 60px;
    margin-bottom: 15px;
}
.cardsflex-01 .d-iicon img {
    max-width: 60px;
    filter: brightness(0) saturate(100%) invert(49%) sepia(42%) saturate(5925%) hue-rotate(195deg) brightness(94%) contrast(82%);

}

.cardsflex-01 .flex-item:nth-child(2)  .div-link  {
    /* background-color: rgba(47, 128, 219, 0.5); */
}
.cardsflex-01 .flex-item:nth-child(3)  .div-link  {
    /* background-color: rgba(147, 147, 147, 0.5); */
}



/* #endregion */

/*------------------------------------------
    #MARK: HERO 01
------------------------------------------*/
/* #region */

.rowaccordion-01 .mtitle {
    font-size: 36px;
}

.d-accordion {
    margin-top: 30px;
    margin-bottom: 0;
}

.d-accordion .ihead {
    padding: 10px 15px;
    border: 1px solid rgba(0,0,0,.1);
    margin-bottom: 20px;
    background-color: var(--color2);
    transition: 0.3s;
}

.d-accordion .ihead.collapsed:hover {
    background-color: var(--color2);
}

.d-accordion .ihead.collapsed:hover .ititle {
    color: white;
}

.d-accordion .ihead.collapsed:hover .acc-indicator {
    color: white;
}

.d-accordion .ihead.collapsed {
    background-color: transparent;
}


.d-accordion .col-info {
    padding-right: 40px;
}

.d-accordion .acc-indicator,
.d-accordion .ititle {
    color: white;
    font-family: var(--font-2);
    text-transform: capitalize;
}

.d-accordion .ihead.collapsed .acc-indicator,
.d-accordion .ihead.collapsed .ititle {
    color: var(--color2)
}

.d-accordion .pad {
    padding: 0px 0px 20px;
}

.acc-indicator {
    font-weight: 600;
}



/* #endregion */

/*------------------------------------------
    #MARK: HERO 01
------------------------------------------*/
/* #region */

.rowxmedia-01 .mtitle {
    font-size: 36px;
    line-height: 1.5;
}

.rowxmedia-01 .d-icon {
    width: 100%;
}

.rowxmedia-01 .diconn {
    max-width: 160px;
}

.rowxmedia-01 .ssc {
    align-items: flex-start;
    margin-bottom: 10px;
}

.rowxmedia-01 .contact-info {
    margin-top: 30px;
}

.rowxmedia-01 a {
    color: var(--color2);
}

.rowxmedia-01 .ssc .sc-icon {
    margin-top: 7px;
}

.rowxmedia-01 .lic {
    margin-bottom: 20px;
}

.rowxmedia-01 iframe {
    border: 1px solid rgba(0,0,0,0.1);
    padding: 5px;
    filter: grayscale(70%);
}

/* #endregion */

/*------------------------------------------
    #MARK: HERO 01
------------------------------------------*/
/* #region */


/* #endregion */