/* 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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    background-color: #fffff7;
 
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    color: inherit;
}

.card-title,
.title,
.info-title {
    font-family: "Roboto";
    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-weight: 400;
}    

.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;
}


.flex-column {
    max-width: 260px;
}

/* 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;
    }
    
    /* 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;
}


.container-treatment {
       background: #f9f9f9;  
        }
        
        
    .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 5px; /* Adds space between images */
        }

        .image-container figure {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin: 0;
        }

        /* Left pair - Smaller */
        .left-pair {
            flex: 1 1 25%; /* Slightly smaller */
            max-width: 25%;
        }

        /* Right pair - Larger */
        .right-pair {
            flex: 1 1 60%; /* Slightly larger */
            max-width: 60%;
        }

        .image-container img {
            width: 100%;
            height: auto;
            border-radius: 5px;
        }

        .image-container figcaption {
            font-size: 15px;
            color: #2a4d9c;
            margin-top: 5px;
            font-weight:700;
        }

        @media (max-width: 768px) {
            .left-pair, .right-pair {
                flex: 1 1 100%; /* Stacks on small screens */
                max-width: 100%;
            }
        }       

.date-display {
    font-size:.60em;
    color:#00ff00;
}


/* from <style> index */ 

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    /* Adds space between images */
}

.image-container figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
}

/* Left pair - Smaller */
.left-pair {
    flex: 1 1 25%;
    /* Slightly smaller */
    max-width: 25%;
}

/* Right pair - Larger */
.right-pair {
    flex: 1 1 60%;
    /* Slightly larger */
    max-width: 60%;
}

.image-container img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.image-container figcaption {
    font-size: 15px;
    color: #2a4d9c;
    margin-top: 5px;
    font-weight: 700;
}

/* top nav text links */

.nav-link {
    position: relative;
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    transition: color 0.2s ease;
}

/* //  transition: width 0.25s ease; */

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: rgba(255,255,255,0.9);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}



/* lighter blue #7fbce1 */

a.nav-link:hover {    
    color: #ffffff;
/*	background-color: #7fbce1; */
}

.nav-link:hover::after {
    width: 100%;
}

/* header and footer branding */
.header-brand {
    font-family: "Roboto", serif;
    font-weight: 400;
    letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 0.92);
}

.footer-brand {
    font-family: "Roboto", serif;
    font-weight: 400;
    letter-spacing: 0.4em;
    color: rgba(255, 255, 255, 0.92);
}


/* last updated 3/11/2026 */