/* SophiaSolutions home custom CSS for Bootstrap 4 */


/*
#0B3C5D Prussian Blue
#328CC1 Sky Blue
#D9B310 Gold Leaf > gold
#1D2731 Ivory Black
 */
/*
body {
    padding-top: 54px;
}
    */
/*
@media (min-width: 992px) {
    body {
        padding-top: 56px;
    }
}
*/

/* crate a neutral backround to prevent flash between slides. */

.carousel-item {
    height: 65vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.carousel-inner>.item {
    /*disables white flash*/
    -webkit-transition: -webkit-transform .5s ease-in-out;
    -o-transition: -o-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
}

.carousel-inner {
    background: #333;
}

.gray {
    color: #666;
}

.portfolio-item {
    margin-bottom: 30px;
}

a.soso {
    font-family: Gruppo;
}

a.soso:link {
    color: gold;
}

a.soso:visited {
    color: gold;
}

a.soso:hover {
    color: #328cc1;
}

a.soso-rss:link {
    color: gold;
}

a.soso-rss:visited {
    color: gold;
}

a.soso-rss:hover {
    color: #fff;
}


/* #328CC1 #00BBD3 */

.soso {
    font-family: Gruppo;
}


/* background #EfEfFF font color: #171817; */

body {
    font-family: Roboto;
    font-weight: 400;
    background-color: #fffff7;
    color: #000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Questrial";
    color: #2a4d9c;
}

h1 {
  font-size: 2.25rem;  /* 36px */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.875rem; /* 30px */
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.875rem;
}

h3 {
  font-size: 1.5rem;   /* 24px */
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

h4 {
  font-size: 1.25rem;  /* 20px */
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.6rem;
}

h5 {
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

h6 {
  font-size: 1rem;     /* 16px */
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.4rem;
}






.card-title,
.title,
.info-title {
    font-family: "Questrial";
    font-weight: 400;
}

.border-hecho {
    border-width: 3.5px !important;
    border-color: #51E2F5;
}


/* #328CC1 sky blue */

   /* background: linear-gradient(60deg, #0b3c5d), #328cc1; */
    /*  background: linear-gradient(60deg, #eee, #bdbdbd); */

.card-header {
    border-radius: 3px;
    padding: 1rem 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -30px;
    border: 0;
    background: linear-gradient(90deg, #0b3c5d,#328cc1); 


    color: #fff;
    font-family: Questrial;
    font-weight: 400;
}

.navbar-brand {
    font-family: "Playfair Display";
    font-weight: 500;
    color: #fff !important;
}


/* dashboard logo Gruppo */

.logo-brand {
    margin-right: 1em;
    font-size: 1em;
    color: #fff;
    font-family: "Playfair Display";
  font-weight: 700;
    line-height: 48px !important;
    width: 18em !important;
}

.text-center {
    font-family: Roboto;
}

.gold {
    color: gold;
}

ul.nav a:hover {
    color: #fff !important;
}

ul.nav a:hover {
    background-color: #fff !important;
}


/* a.nav-link:hover {background-color: #ff00ff} */


/* a.nav-link:hover {background-color: #9938B2} */


/* lighter blue #7fbce1 */

a.nav-link:hover {
    background-color: #7fbce1;
}

a.active {
    background-color: #7fbce1;
}

.navbar.bg-dark {
    background-color: #1d2731 !important;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -font-feature-settings: 'liga';
}


/* footer-menu.css */

.questrial {
    font-family: Questrial;
}

.gruppo {
    font-family: Gruppo;
}

#footer-main {
    clear: both;
    margin: 0 auto;
    background-color: #373D42;
    padding-top: 10px;
}

#navSuppWrapper {
    margin: 10px 5px 0;
    padding: 0;
    background-color: #2a4d9c;
    color: white;
    font-family: Questrial;
    font-weight: 700;
    line-height: 18px;
}

#navSuppWrapper a {
    color: #ffffff;
    font-weight: 700;
}

dl {
    margin: 0 0 3px 0;
    padding: 0;
    clear: both;
    height: 160px;
    width: 100%;
}


/*Adjust the height and width of the menu*/

dt {
    margin-bottom: .3em;
    font-weight: bold;
}

dd {
    margin: 0;
    padding: 0;
    float: left;
    width: 24.3%;
}


/*Column width of the menu - currently set for 4 columns*/

dd ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

dd li {
    margin: 0;
    padding: 0;
}

dd li {
    margin: 0;
    padding-left: 2em;
    display: block;
}

dd li a:hover {
    background: #7FBCE1;
    color: #fff;
}

.footerMenuTitle {
    margin: 0;
    padding-bottom: .8em;
    text-align: center;
    font-size: .9em;
    color: #fff;
}

.first,
.second,
.third {
    border-right: 1px dashed #fff;
    font-size: .7em;
}

.fourth {
    font-size: .7em;
    color: #fff;
}

#siteinfoLegal {
    padding: .5em 0 0;
    font-size: 0.7em;
    /*text-align:right;*/
    width: 80%;
    line-height: normal;
    clear: both;
    color: #fffffd;
    margin-left: 20px;
    float: left;
    background-color: #000;
}

#siteinfoLegal a {
    padding: 0 0.5em 0 0.5em;
    color: #5dc9e2;
    font-weight: bold;
    white-space: nowrap;
}

#siteinfoLegal a:hover {
    color: #fffffd;
}

.twitter-image {
    margin-right: 10px;
}

#social-media {
    float: right;
    margin-right: 15px;
    margin-top: -20px;
    margin-bottom: 20px;
}

#bannerSix {
    margin-top: 0px;
    margin-bottom: 30px;
}

#siteinfoIP {
    background-color: #edf9fb;
    padding-top: 20px;
}

.modules {
    width: 95.7%;
}

.soso-logo {
    font-family: michroma;
    color: gold;
    background-color: #000;
    font-weight: 300;
}

.pix-credit {
    font-size: 1em;
    font-style: italic;
    float: right;
    color: #000;
}

.pix-caption {
    font-size: 15px;
    float: left;
}

.hide {
    display: none;
}

.introtext {
    font-size: 20px;
}

.white-container {
    background-color: #fff;
}

.darker-blue {
    color: #2a4d9c;
}


.container-flexbox {
    background: #f9f9f9;
}

.flex-column {
    max-width: 260px;
}

img {
    margin: 5px;
}

.scale {
    transform: scaleY(1.05);
    padding-top: 5px;
}

/* drop down buttons */
div.luxe {
    background-color: #fff !important;
    font-family: Roboto !important;
    color: #2a4d9c !important;
    font-weight: 400 !important;
}

a.luxe {
    font-family: Roboto !important;
    color: #2a4d9c !important;
}


/* logo image background */

.lucille-background {
    background: url("../images/MCH.png") no-repeat center center;
    background-size: contain;
    height: 200px; /* Adjust height as needed */
    }



/* Constrain logo container to max-width: 768px and center it */
    .logo-container-main {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important ;
    }
    
    /* Navbar Styles */
    .navbar {
    z-index: 1030;
    }
    
    .questrial {
    font-family: Questrial;
    color: #17a2b8;
    }
    
    .navbar-nav .nav-link {
    color: white !important; /* Default color */
    background-color: transparent !important; /* No background by default */
    transition: color 0.3s ease, background-color 0.3s ease;
    }
    
    .navbar-nav .nav-link:hover {
    color: #17a2b8 !important; /* Change to the hover color (adjust as needed) */
    background: transparent !important; /* Ensure no background change */
    }
    
    .navbar-nav .nav-item .nav-link {
    color: white !important;
    background-color: transparent !important;
    border: none !important;
    transition: color 0.3s ease, background-color 0.3s ease;
    }
    
    /* Ensure active link does not override styles */
    .navbar-nav .nav-item .nav-link.active,
    .navbar-nav .nav-item .nav-link:focus {
    color: white !important;
    background-color: transparent !important;
    box-shadow: none !important; /* Remove Bootstrap focus effects */
    }
    
    /* Change color on hover */
    .navbar-nav .nav-item .nav-link:hover {
    color: #17a2b8 !important; /* Hover color */
    border-bottom: 2px solid #17a2b8 !important; /* Underline appears */
    background-color: transparent !important;
    }
    
    /* Active & Focused State */
    .navbar-nav .nav-item .nav-link.active,
    .navbar-nav .nav-item .nav-link:focus {
    color: white !important;
    background-color: transparent !important;
    border-bottom: 2px solid white !important;
    }
    
    /* Centered Logo */
    .container-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .device-label {
  font-weight: bold;
  padding: 0 0 0 10px;
  color:#90CDF4;
}
    
    /* Button Styling */
    .btn {
    margin-top: 10px;
    }
    
    /* Adjust Dropdown */
    /*
    .dropdown-menu {
    min-width: 200px;
    }
    */
    
    /* Adjust Navbar Spacing */
    .top-row {
    padding: 8px 0;
    }
    
    /* Ensure Image Doesn't Overlap */
    .mt-5 {
    margin-top: 80px !important;
    }
    
    
    p {
      font-weight: 500;
    }
    
    /* Visions Homes */

    .grayhope {
        color: #999;
    }
    
    .romeo {
        text-align: center;
    }
    
    .rookie {
        font-size: 1.6em;
    }
    
    .smaller {
        color: #999;
        font-size: 0.7em;
    }
    
    card-text {
        font-weight: 500;
        font-size:1.7em;
    }
    
    /* Parent Wrapper */
    .wrapper {
        display: flex;
        /* Aligns containers side by side */
        justify-content: center;
        /* Centers them horizontally */
        gap: 20px;
        /* Adds spacing between circles */
        padding: 20px;
    }
    
    /* Circular Containers */
    .circle {
        width: 400px;
        height: 400px;
        background-size: contain;
        /* Ensures full image is visible */
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%;
        /* Makes it circular */
        border: 5px solid #333;
        /* Optional: Border for visibility */
    }
    
    /* Background Images */
    .circle-1 {
        background-image: url("../images/visions-homes/img-1121.jpg");
        /* Replace with your image */
        background-size: contain;
        height: 400px;
    }
    
    .circle-2 {
        background-image: url("../images/visions-homes/Screenshot-2023-03-18.jpg");
        /* Replace with another image */
        height: 400px;
        background-size: contain;
    }
    
    /* Responsive Fix for Smaller Screens */
    @media (max-width: 850px) {
        .wrapper {
            flex-direction: column;
            /* Stack circles on smaller screens */
            align-items: center;
        }
    }

 
/* Style for thumbnails */
.gallery-thumbnail {
  width: 160px;
  height: auto;
  border-radius: 6px;
}

.gradient-button {
      background: linear-gradient(60deg, #0b3c5d,#328cc1); 
      color:#fff;
      
}

.gradient-header {
      background: linear-gradient(60deg, #0b3c5d,#328cc1); 
      color:#fff;
      
}

/*for screen readers */

.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* prevent line breaks */
  border: 0;
}