@charset "UTF-8";
/*headline: font-family: font-family: "Lato", san-serif;
paragraph:  font-family: "Roboto Slab", serif;
*/

/*colors:
dark blue: #011126
black: #000000
white: #FFFFFF
dark yellow: #FFB20F
mediume blue: #122341
*/

/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
    background-color: #000000;
}
/* Text color for navbar and dropdown menus */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
    color: #ecf0f1;
}
/* Background and text colors for current page link and links on hover and focus */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover, 
.navbar-custom .dropdown-item:focus {
    background-color: #FFB20F;
    color: #fff;
}
/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
    border-color: #ecf0f1;
    color: #fff;
}
/* Hamburger icon - use same rgb values as previous rule for stroke */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(236,240,241, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/*navbar-brand logo*/

.navbar-brand {
    background-image: url(../images/RissaDees_logo_small%20web.png);
    background-size: 37px auto;
    background-repeat: no-repeat;
    padding-left: 42px;
}


/*header banner section*/
#home_banner {
	padding-left: 0px;
	padding-right: 0px;
	postion: relative;
}


/*3 col main section*/
.main h2 {text-align: center; 
         font-weight: 800;
                            font-size: 1.8em;
                            color: #000000;}

/* rem values are relative to thr root html element, 1rem=16px*/
#home_banner h1 {
	font-size: 3rem;
	color: #fff;
	text-shadow: 2px 1px rgba(71,71,71,0.80);
	position: absolute;
	left: 20%;
	bottom:35%;
}

 .about-container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .text-container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

        .image-container img {
            width: 100%;
            border-radius: 10px;
        }


/*footer*/
footer {text-align: center;
		line-height: 60px;
		background-color:#000000;
		color: #ecf0f1;	
}
/*media query breakpoints*/
/*X-SMALL ONLY*/
@media screen and (min-width:375px){
#home_bg h1 {
    font-size: 1rem;
    bottom: 3%;
    left: 3%;
    }    
}

/*SMALL SIZE ONLY*/
@media screen and (min-width:576px){
#home_bg h1 {
    font-size: 1rem;
    bottom: 3%;
    left: 3%;
    }      
}

/*MEDIUM SIZE ONLY*/
@media (min-width: 768px) {
  #home_bg h1 {font-size: 2rem;
               bottom: 5%;
               left: 3%;
              }
  }
	
/*LARGE SIZE ONLY*/
@media screen and (min-width:992px){
    #home_bg h1 {
        font-size: 3rem;
        bottom: 5%;
        left: 3%;
        }
}

 /* Case Study Page Styles */
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 20px;
      background-color: #f9f9f9;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    h1, h2 {
      color: #333;
    }
    .section {
      margin-bottom: 20px;
    }
    .images {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .images img {
      max-width: 100%;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            text-align: center;
            padding: 0px;
        }
        .container {
            max-width: 600px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .image-container {
            width: 250px;
            height: 250px;
            margin: auto;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid #333;
        }
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }