/********************************************
Header
*/

:root {
	--twitter: #00acee;
	--facebook: #3b5998;
	--linkedin: #0072b1;
	--instagram: #cd486b;
	--google: #de5246;
	--youtube: #FF0000;
}
@media screen and (max-width: 991.98px) {
    /* Horizontal collapse */
    .navbar-collapse {
        display: flex;
        flex-direction: row; /* children in a row instead of column */
        flex-wrap: nowrap;   /* keep items in a single line */
        justify-content: flex-end; /* align items to the right */
        width: 0;            /* start collapsed */
        overflow: hidden;
        transition: width 0.4s ease;
    }

    /* Expanded state */
    .navbar-collapse.show {
        width: 300px; /* or whatever width you want for the menu */
    }
    .nav-item > a, .nav-item > a:visited {
        text-align: center;
    }
    #masthead a.nav-link:after {
        margin-left: auto;
        margin-right: auto;
    }
}
.navbar
.nav-item > a,.nav-item > a:visited {
    font-family: var(--primary-font-text-font-family) !important;
    font-size: var(--primary-font-text-font-size) !important;
    font-weight: 700 !important;
    line-height: var(--pagelayer-font-text-line-height) !important;
    letter-spacing: px !important;
    word-spacing: px !important;
    color:black;
}
#masthead a.nav-link:hover:after, #masthead a.nav-link.active:after {
    transform: scale(1);
    opacity: 1;
    width: 100%;
    background-color: var(--text-color-secondary);
    border-color: var(--text-color-secondary);
    max-width: 75px;
}
/* Extra large navbar height */
.navbar-xl {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
}
#masthead a.nav-link:after {
    position: relative;
    display:flex;
    content: '';
    left: 0px;
    top: 100%;
    height: 3px;
    width: 0px;
    transform: scale(0);
    opacity: 0;
    background-color: #2154CF;
    transition: all 500ms ease;
    transform-origin: left bottom;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    border-width: 0px;
}
/***********************************************
footer
***********************************************/
.border-none{
    border:none !important;
}
.bg-transparent{
    background-color:transparent;
}
/******************************
socials
******************************/
.facebook {
        transition: all .5s ease-in-out;
        color: var(--facebook) !important;
}

.google {
        transition: all .5s ease-in-out;
        color: var(--google) !important;
}

.instagram {
        transition: all .5s ease-in-out;
        color: var(--instagram) !important;
}

.linkedin {
        transition: all .5s ease-in-out;
        color: var(--linkedin) !important;
}

.twitter {
        transition: all .5s ease-in-out;
        color: var(--twitter) !important;
}

.youtube {
        transition: all .5s ease-in-out;
        color: var(--youtube) !important;
}

nav .social-links a {
        color: white;
        background-color: transparent !important;
        border-color: transparent !important;
}

nav .social-links a:hover {
        border-color: transparent !important;
}

.btn-lg-square {
        font-size: 9px !important;
}


/**********************************************************************
clouds
**********************************************************************/
.cloud-container {
    background: var(--hero-cloud-color-primary);
    padding-bottom: 150px;
}
.hero-cloud-row, .hero-cloud-inner_row, .hero-cloud-row-holder, .hero-cloud-col, .hero-cloud-col-holder {
    box-sizing: border-box;
    display: flex
;
    flex: 1 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    align-content: stretch;
    position: relative;
}
.hero-cloud-row-stretch-auto > .hero-cloud-row-holder, .hero-cloud-row-stretch-full > .hero-cloud-row-holder.hero-cloud-width-auto {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cloud-row, .hero-cloud-inner_row, .hero-cloud-row-holder, .hero-cloud-col, .hero-cloud-col-holder {
    box-sizing: border-box;
    display: flex
;
    flex: 1 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    align-content: stretch;
    position: relative;
}
.fill-white{
  fill: white;
}
.fill-light{
    fill:rgba(248, 249, 250, 1);
}
.active .d-none{
    display:block !important;
}

#values .card:hover {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
    #values .card{
        border:none !important;
        text-align: left;
    }
    #values .icon-circle {
  width: 60px;              /* size of circle */
  height: 60px;
}
.half-width{
    max-width: 674px;
}


    .hero-cloud-row-shape {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 0;
    overflow: hidden;
}
.hero-cloud-row-svg {
    position: relative;
    height: 100%;
}
.p-gxv3720 .hero-cloud-row-svg .hero-cloud-svg-bottom {
    width: 100%;
    height: 100px;
    transform: rotateY(180deg);
}

.hero-cloud-row-svg svg.hero-cloud-svg-bottom {
    bottom: -1px;
}
.hero-cloud-row-svg svg {
    width: 100%;
    position: absolute;
}
.hero-cloud-bottom {
  width: 100%;
  height: 150px; /* adjust cloud height */
  overflow: hidden;
}

.hero-cloud-bottom svg {
  width: 100%;
  height: 100%;
}

/* Optional gentle drifting animation */
.hero-cloud-bottom path {
  animation: floatCloud 20s ease-in-out infinite alternate;
}

@keyframes floatCloud {
  0%   { transform: translateX(0px) translateY(0px); }
  50%  { transform: translateX(10px) translateY(-5px); }
  100% { transform: translateX(0px) translateY(0px); }
}

/**************************************
newsletter 
**************************************/
.transform-180{
    transform:rotate(180deg);
}
.btn-form-height{
    height:calc(3.5rem + calc(var(--bs-border-width) * 2));
}
.newsletter-btn{
    max-width:200px;
    width:20%;
    margin-left: 1.2rem;
}
.newsletter-email{
    max-width:400px;
    width:40%;
}
.container-newsletter{
    display:flex ;
}
@media only screen and (max-width: 767px) {
    .container-newsletter{
        display:block ;
    }
    .newsletter-btn{
        width:100%;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
        margin-top: 1.2rem;
    }
    .newsletter-email{
        width:100%;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }
}