/* Basic Styles */

.lg-padding{

    padding:50px;

}

.md-padding{

    padding:25px;

}

.sm-padding{

    padding:10px

}

.relative{

    position: relative;

}

.is-0{

    padding: 0;

}

.bot-margin{

    margin-bottom: 25px;

}

.smbot-margin {

    margin-bottom: 15px;

}

.mdbot-margin{

    margin-bottom: 2rem;

}

.lgbot-margin{

    margin-bottom: 5rem;

}

.top-margin{

    margin-top: 25px;

}

.lgtop-margin{

    margin-top: 5rem;;

}

.smtop-margin{

    margin-top: 15px;

}

.lg-margin{

    margin: 50px;

}

.main-content{

    max-width: 1400px;

    display: block;

    margin: 0 auto;

}

.main-wrapper{

    padding: 0 50px

}

.is-center {

    text-align: center;

    margin-left: auto;

    margin-right: auto;

}

.primary-purple{

    color: #2e4099 !important;

}

.secondary-blue{

    color: #1c7cbe !important;

}

.h1, h1 {
    font-size: calc(1.99rem + 1.5vw);
}


.middle {

    align-items: center;

    display: flex;

}

.row-reverse {

    display: flex;

    flex-direction: row-reverse;

}

.styled-hr {

    margin: 1rem 0;

    background: linear-gradient(to left bottom, #10acf2, #0d9ce7, #168bda, #207bcd, #2a6bbf, #2d62b7, #2f5aaf, #3251a7, #314da4, #3049a0, #2f449d, #2e4099);

    opacity: 1 !important;

    width: 45px;

    height: 5px;

    border: none !important;

    border-radius: 50px;

}

/* callout styles */

.callout {

    position: relative;

    z-index: 1;

    margin: 4rem 0;

    padding: 3rem 0;

    color: #fff

}

.callout::before {

    content: '';

    position: absolute;

    top: 0;

    bottom: 0;

    z-index: -1;

    left: -100vw;

    width: 200vw;

    /* background: #2e4099; */

    background: linear-gradient(to left bottom, #10acf2, #0d9ce7, #168bda, #207bcd, #2a6bbf, #2d62b7, #2f5aaf, #3251a7, #314da4, #3049a0, #2f449d, #2e4099);

}

.callout h2, .callout h3{

    color: #ffffff

}

.grey::before {

    background: #f3f8fa;

    }

.callout.grey p {

    color: #212529;

}

.callout.is-layout-flex,

.callout.wp-block-group {

    margin: auto auto;

}

.flush-top {

    margin-top: -5% !important;

}

/* font styling*/

.tagline {

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #2e4099 !important;

    font-weight: 400 !important;

}

h1, h2{

    font-weight: 600;

}

.home h4 {

    color: #10acf2 !important;
}
h4 {

    color: #10acf2;

    text-transform: uppercase !important;

    letter-spacing: 1px !important;

    font-weight: 700 !important;

}


b, strong {

    font-weight: bolder;

    color: #2e4099;

}


.all-cap {

    text-transform: uppercase;

    letter-spacing: 3px;

}

/* navigation styling */

.navbar img.is-transparent {

    display: none;

}

.transparent-header{

    background: none !important;

}

.transparent-header .main-menu a {

    color: #2e4099;

    font-weight: 600;

}

.transparent-header .logo-default{

    visibility: hidden;

    opacity: 0;

}

.transparent-header .is-transparent{

    display: block !important;

    visibility: visible;

    opacity: 1;

    position: absolute;

    left: 0;

    top: 0;

    max-width: 400px;

    height: auto;

    margin: 5px 0;

}

.navbar {

    position: fixed;

    top: 0;

    right: 0;

    width: 100%;

    padding: 1rem 2rem;

    z-index: 9;

    transition: background .2s linear;

    background: #ffffff;

}

.navbar-brand{

    max-width: 400px;

    height: auto;

    position:relative;

}

.navbar-brand img {

    width: 100%;

    transition: visibility 0.15s linear, opacity 0.15s linear;

}

.navbar-expand-lg .navbar-collapse {

    flex-direction: row-reverse;

}

ul#menu-primary-menu {

    list-style: none;

    display: flex;

    flex-direction: row;

}

.main-menu li {

    margin-left: 25px;

    font-size: 1.3em;

    text-transform: capitalize;

    font-weight: 500;

}

.main-menu a {

    color: #2e4099;

    text-decoration: none;

    font-weight: 600;

}

.page-wrapper{

    background: rgb(231 247 254 / 48%);

    position: relative;

    z-index: 1;

    overflow: hidden;

}

/* hero styles  */

.hero-container{

    min-height: 100vh;

    height: auto;

    position: relative;

}

.hero-bg{

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

    overflow: hidden;

    background-image: url('https://suenoskc.com/staging/3599/wp-content/uploads/2025/04/Suenos-KC-bg-1.png');

    background-size: cover;

    background-position: bottom;

    background-repeat: no-repeat;

}

.hero-overlay{

    min-height: 100vh;

    height: auto;

    background: linear-gradient(91deg, #2e4099 0%, #1c7cbee8 35%, rgba(255, 255, 255, 0) 65%);

    color: #ffffff;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}

.hero-push {

    height: 50px;

}

.hero-txt{

    text-shadow: 1px 1px 10px rgb(0 0 0 / 50%), 1px 1px 5px #b1afaf21;

}

a.cta-hero-button {

    background: #1971ad;

    margin: 20px;

    padding: 25px;

    display: inline-block;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 18px;

    letter-spacing: 2px;

    font-weight: 600;

    border-radius: 50px;

}

.hero-accents{

    position: relative;

    display: inline-block

}

.hero-accents:before {

    content: '';

    background-image: url(https://suenoskc.com/staging/3599/wp-content/uploads/2025/04/stars_1.png);

    position: absolute;

    top: -100px;

    right: -100px;

    width: 100px;

    height: 100px;

    background-size: contain;

}

.hero-accents:after {

    content: '';

    background-image: url(https://suenoskc.com/staging/3599/wp-content/uploads/2025/04/stars_1.png);

    position: absolute;

    bottom: -100px;

    left: -100px;

    width: 100px;

    height: 100px;

    background-size: contain;

}

.hero-container:before {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    background-image: url(https://suenoskc.com/staging/3599/wp-content/uploads/2025/04/left.png);

    background-size: contain;

    width: 485px;

    height: 425px;

    background-repeat: no-repeat;

}

.hero-container:after {

    content: '';

    position: absolute;

    bottom: 0;

    right: 0;

    background-image: url(https://suenoskc.com/staging/3599/wp-content/uploads/2025/04/right.png);

    background-size: contain;

    width: 485px;

    height: 425px;

    background-repeat: no-repeat;

}

.cta-button {

    background: #1971ad;

    margin: 15px 0;

    padding: 15px;

    display: inline-block;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 12px;

    letter-spacing: 2px;

    font-weight: 600;

    border-radius: 50px;

}


/*home page */

.about_us_sec,

.experience_sec,

.client_sec,

.services_sec{

    margin: 150px 0

}

img.cc_img_1 {

    max-width: 100%;

    width: 100%;

    position: relative;
    margin-bottom: 15px;

}

.box1 {

    background: #ffffff;

    border-radius: 25px;

    padding: 50px 20px 0 20px;

}

/* home-page client cards */

.client-card{

    background: #ffffff;

    padding: 25px;

    height: 100%;

    border-radius: 25px;

}

.client-card h3 {

    font-size: 25px;

    margin-bottom: 25px

}

img.service-icon {

    max-width: 100%;

    width: 75px;

    margin-bottom: 25px;

}

.color-filter{

    filter: brightness(0) saturate(100%) invert(53%) sepia(15%) saturate(5069%) hue-rotate(167deg) brightness(101%) contrast(90%);

}

/* service page */

.service-card {

    background: #ffffff;

    padding: 25px;

    margin: 10px;

    border-radius: 25px;

    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; */

}

.service-card img {

    max-width: 60px;

}

.offerings .wp-block-image img {

    width: 65px !important;

    max-width: fit-content !important;

    margin-right: 15px;

}

.offerings .ss-1:not(:last-child){

    margin-bottom: 50px;

}

.offerings {

    background: #ffffff;

    border-radius: 25px;

    padding: 50px 25px;

    margin-bottom: 100px;

}
.offerings p.has-medium-font-size {
    margin-bottom: 50px;
}


/* footer styles */

.logo-box {

    max-width: 350px;

    margin-bottom: 25px;

}

.logo-box img {

    width: 100%;

    height: auto;

}

footer {

    background: #2e4099;

    color: #ffffff;

}

@media (min-width: 1200px) {

    .h2, h2 {

        font-size: 2.5rem;

    }

}
@media (min-width: 800px){

  .is-md-right {

      text-align: right;

      margin-left: auto;

      margin-right: 0;

  }

}

@media (min-width: 800px){

  .is-md-left {

      text-align: left;

      margin-left: 0;

      margin-right: auto;

  }

}

/* mobile */
@media (max-width: 1200px) {

.about_us_sec, .experience_sec, .client_sec, .services_sec {
    margin: 100px 25px;
}
    .container, .container-md, .container-sm {
        max-width: 1200px;
        padding: 0 25px;
    }
}

@media (max-width: 991px) {

    nav#site-header {

        background: #ffffff !important;

    }

    .show .navbar-expand-lg .navbar-collapse {

        display: flex;

        position: relative;

        height: 100vh;

        flex-direction: column;

    }

    ul#menu-primary-menu {

        list-style: none;

        display: flex;

        flex-direction: column !important;

        align-items: center;

        margin: 40px 0 !important;

        padding: 0 !important;

    }

    .main-menu li {

        font-size: 1.5em !important;

        font-weight: 500;

        margin: 15px 0 !important;

    }

    .hero-container:before,

    .hero-container:after {

        width: 291px !important;

        height: 255px !important;

    }

    a.cta-hero-button {

        margin: 15px !important;

        padding: 15px !important;

        font-size: 14px !important;

    }

    .container, .container-md, .container-sm {
        max-width: 920px;
        padding: 0 25px;
    }

}



@media (max-width: 767px) {

    .about_us_sec, .experience_sec, .client_sec, .services_sec {

        margin: 75px 25px;

    }

    .main-wrapper {

        padding: 0 25px;

    }

    .navbar-brand {
        max-width: 300px;

    }
        .container, .container-md, .container-sm {
        max-width: 720px;
        padding: 0 25px;
    }

}



@media (max-width: 480px) {

    .md-padding{

        padding: 15px;

    }
    .navbar {

        padding: 1rem 1rem;
    }
    .navbar-brand {
        max-width: 250px;
    }
    .hero-container:before, .hero-container:after {
        width: 194px !important;
        height: 170px !important;
    }
        .container, .container-md, .container-sm {
        max-width: 420px;
        padding: 0 25px;
    }
}