/* variables */
:root {
    --primary: #ddd;
    --darkColor2: #dd3300;
    --darkColor: #660066;
    --dark: #333;
    --light: #fff;
    /*--shadow: 1px 3px rgba(153,153,153,0.8); */
    --pastel-one: #ffff99;
    --pastel-two: #cc99cc; /* 3498db */
    --pastel-three: #55aadb;
    --pastel-four: #99cc99;  
    --pastel-five:#ff9999;
    --pastel-six:#9999ff;
}

html {
    box-sizing:border-box;
    font-family: 'Arial', sans-serif;
    color:var(--dark);
}

body{
    height: 100%;   
    justify-content: center;
    align-items: center;
    background-color: #000000; /* Light background for contrast */
    position: relative; /* Ensure absolute positioning works */
}

.btn {
    background: var(--dark);
    color: var(--light);
    padding: 0.6rem 1.3rem;
    text-decoration:none;
    border: 0;
    border-radius: .25em;
}

.btn:hover {
    background-image: linear-gradient(to bottom right, #990000, #000099);
}
img {
    max-width: 100%;
    border-radius: .25em;

}

.galleryWrapper img {
    max-width: 100%;
    border-radius: .25em;
    border:10px solid white;
    margin-right:15px;
    margin-bottom:15px;
    background-color:white;
    cursor: pointer; 
    
}

h1, h2 {
    margin-top:0;
}
.portfolio img:hover {  
    opacity: 0.5;
}
.wrapper { 
    display: grid;
    grid-gap: 10px;
}

/* Navigation */
.main-nav ul, .footer-nav ul {
    display:grid;
    grid-gap:10px;
    padding: 10px 0;
    list-style-type:none;
    grid-template-columns:repeat(5,1fr);
}

.main-nav a, .footer-nav a {
    background: var(--primary);
    display:block;
    text-decoration:none;
    text-align:left;
    color: var(--dark);
    text-transform: uppercase;
    font-size:1.1rem;
    box-shadow: var(--shadow);
    border-radius: 25px 0px 0px 25px;
    position:relative;
    height:25px;
}

.main-nav a:hover, .footer-nav a:hover{
    background-image: linear-gradient(to bottom right, #ccaa99, #cc99c5);
    color: var(--light);
}
.main-nav a::before, .footer-nav a::before, .item4 li::before {
    content: ' ';
    display: inline-block; 
    height:25px;
    width:25px; 
    background-image: url('img/nemBullet.jpg');
    background-repeat: no-repeat;
    background-position: top;
    background-color: white;
    border-radius: 50%;
    border: 3px solid var(--primary);;
    background-position-y: center;
    vertical-align:middle;
    margin-left:0px;
    top:0px;
}

.hidden {
    display:none;
}

.top-container {
    display: grid;
    /* xxxborder-radius: .5em; */
    width:100%;
    grid-template-areas:
        'showcase';
}

.showcase {
    grid-area: showcase;
    min-height: 300px;
    xxxxbackground: url('img/yinYang1.jpg');
    
    background: url('img/800px_COLOURBOX1744836.jpg');
    background: url('img/sacRiver2.jpeg');
    background-size:cover;
    background-position: center;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: var(--shadow);
    border-radius: 0; /*.25em;*/
    
}

.showcase h3 {
    font-style: italic;
    padding: 10px;
    text-shadow: #6666cc 1px 0 10px;
}

.glow {
    text-shadow: #6666cc 1px 0 10px;
}
.glow-white {
    text-shadow: #fff 1px 0 10px;
}
.galleryWrapper img.inner-border {
    padding: 1px;  /* Adjust the padding as needed */
    background-color: skyblue;  /* Optional: Set a background color for the padded area  */
    box-shadow: inset 0 0 0 5px lightgray;
    border: 9px solid white;
    border-width: 9px;
  
}
#intro {
    border-radius:0 0 0 0;
}
.top-box {
    background: var(--primary);
    display: grid;
    align-items: center;
    justify-items: center;
    box-shadow: var(--shadow);
}
.top-box .price {
    font-size: 2rem;
}
.top-box-a {
    grid-area: top-box-a;
}

.top-box-b {
    grid-area: top-box-b;
}
.boxes {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* .boxes ul {
    list-style-type: ">> ";
} */

.box {
    background: var(--primary);
    text-align: center;
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow);
    xxxborder-radius: .5em;
    background-image: linear-gradient(to bottom right, white, #ddf);
    border-radius:0px;
    

}

.info {
    background: var(--primary);
    box-shadow: var(--shadow);
    display:grid;
    grid-gap:30px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    text-align: center;
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow);
    xxxborder-radius: .5em;
}


.portfolio {
    background: var(--primary);
    background-image: linear-gradient(to bottom right, white, #ddddff);
    box-shadow: var(--shadow);
    padding: 1rem;
    xxxborder-radius: 0.5em;
    display: grid; /* or block, depending on your layout */
    grid-template-columns: 50px auto;
    width: 100%; /* Ensure it takes the full width of its parent container */
    margin: 0 auto; /* Center the portfolio if needed */
    box-sizing: border-box; /* Include padding and border in the element's width and height */
  }

/* Additional CSS to help with layout */
.wrapper{
    display: grid; /* Ensure this doesn't enforce height on children */
    grid-gap: 10px;
    align-items: start; 
}
.galleryWrapper {
    text-align:left;
    display:inline;
}

.galleryWrapper > div {
    text-align:left;
    display:inline;
}
.gallery {
    padding: .5rem .5rem;
    box-shadow: var(--shadow);
    xxxborder-radius: .5em;
    margin-right: 1rem;
    margin-bottom: 1rem;
    background-color: white;
}

footer {
    margin-top: 2rem;
    /* background: var(--dark);
    color: var(--light); */
    text-align: center;
    padding: 1rem;
    border-radius: .5em;
}

@media(max-width: 700px) {
    .top-container {
        /* grid-template-areas:
            'showcase';
         may add more */
    }

    .main-nav ul {
        grid-template-columns: 1fr;
    }
    
    .info  .btn {
        text-align: center;
        margin: 0;
        border-radius: .5em;
    }
}
 
.showcase h1 {
    color: var(--darkColor);
    xxxxtext-shadow: 1px 1px 8px rgba(255,255,200,1);
}

#intro {
    color: var(--dark);
    background-color: rgba(255,255,255, .9);
    padding:15px;
    /* max-width:1200px; */
    min-width:250px;
    width:100%;
}


div {
    border-radius: 0rem;
}

.portfolio-title {
    width: 50px;
    min-height: 86px;
    height: 100%;
    float: left;
    position: relative; /* Ensure that the h3 can be positioned relative to this */
    text-align:right;
}

.portfolio-title h3 {
    position: absolute;
    top: 50%; /* Start positioning from the vertical center */
    left: 50%; /* Start positioning from the horizontal center */
    transform: translate(-50%, -50%) rotate(-90deg); /* Center the h3 and rotate it */
    padding: 0 0 10px 0; /* Adjust padding as needed */
    margin: auto 10px 0 auto;
    text-align: left;
    white-space: nowrap; /* Prevent text wrapping */
}

#main-logo, #lower-logo {
    width: 280px;
    height: 92px;
    opacity: 0.9;
    border-radius: .5em;
}

.oval {
    background-color: white;
    border-radius: 50%; /* Make it an oval or circle */
    padding: 10px; /* Optional padding */ 
    /* Flexbox centering */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    /* Size of the oval */
    width: 300px; /* Adjust to your needs */
    height: 150px; /* Adjust to your needs */
    border:2px solid rgb(170, 130, 126);
}

#lower-logo {
    max-width: 100%; /* Ensure the logo fits within the oval */
    max-height: 100%; /* Ensure the logo fits within the oval */
    display: block; /* Remove any extra space below the image */
    object-fit: contain; /* Ensure the logo maintains its aspect ratio */
}

#services {
    text-align: left;
    
}
.info {
    background-image: linear-gradient(to bottom right, white, #ddddff);
}

.lighter {
    color:#999999;
}

.hide {
    display:none;
}

.address {
    white-space: pre;
   }

.left {
    text-align: left;
}

#icon1 {
    color:var(--pastel-six);
}
  
#icon2 {
    color:var(--pastel-five);
}
#icon3 {
    color:var(--pastel-four);
}
#icon4 {
    color:var(--pastel-three);
}
#icon5 {
    color:var(--pastel-two);
}
#icon6 {
    color:var(--pastel-one);
}
.about {
    text-align:left;
    background-image: linear-gradient(to bottom right, white, #ddddff);
}

#about-us, #address {
    text-align:left;
    float: left;
    line-height:20pt;
}

.center {
    text-align:center;
}

/* M E D I A   Q U E R I E S -------------------------------------- */

@media(max-width: 1200px) {
   
    #main-logo, #lower-logo {
        width: 200px;
        height: 68px;
    }
    #lower-logo {
        padding:.5rem;
    }
    #portfolio-title {
        min-height:86px;
        height: 100%;
    }
    .grid-container > div {
        font-size:12px;
    }
}

/* PORTFOLIO LAYER */
#portfolioWrapper {
    z-index:2000;
    xxxxxheight:100%;
    width:100%;
    margin:0;
    background-color: rgb(0,0,0,.25);
    visibility:hidden;
}

.container {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-x: auto; /* Allow horizontal scrolling if necessary */
}
.item {
    flex: 0 0 200px; /* Fixed width for each item */
    box-sizing: border-box;
    padding: 10px;
}
.item-content {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-container {
    display: grid;
    grid-template-areas:
      "header menu right"
      /* "main main right" */
      "footer footer right";
    grid-template-columns: 400px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    width: 100%;
  }
  
  .item1 { grid-area: header; }
  .item2 { grid-area: menu; 
    visibility:hidden;}
  .item3 { grid-area: main; 
    height:100%;
    visibility:hidden;}
  .item4 { grid-area: right; 
    color:white;
    font-weight: normal;
    background-color: rgba(0,0,0,.8); 
   }
    
  .item5 { grid-area: footer; 
    color:white;
    font-weight: normal;
    background-color: rgba(0,0,0,.8);
    }

#logoDiv {
    
    color:white;
    font-weight: normal;
    padding: 35px;
}
  
  .grid-container > div {

    text-align: left;
    padding: 20px 0;
    font-size: 18px;
    padding: 12px;
  }

  /* Unordered list styles */
ul {
    list-style-type: none;
    padding-left: 0;
    margin-block-start:0px;
    margin-block-end:0px;
  }
  
  /* List item styles */
  ul li {
    position: relative;
    padding-left: 0px;
    xxxxmargin-bottom: 10px;
  }

  .item4 ul li {
    margin-bottom: 10px;
    min-width:200px;
  }

  .fading-div {
    padding:40px;
    background-image: radial-gradient(
    ellipse,
    #ffffff 0%,
    #ffffff 10%,
    rgba(255, 255, 255, 1 ) 50%, 
    rgba(255, 255, 255,.0) 65%, 
    rgba(255, 255, 255, 0) 80%,
    rgba(255, 255, 255, 0) 100%
   
  ); 
  } 
  #paddingX {
    padding:40px;
  }
  #logoDiv {
    
    text-align:center;
}
 /* Media query for phones (e.g., max-width: 767px) */
@media (max-width: 767px) {
    .grid-container {
      grid-template-areas:
        "header"
        "menu"
        "main"
        "right"
        "footer";
      grid-template-columns: 1fr;
      grid-template-rows: auto auto 1fr auto auto;
    }
  
    .grid-container > div {

        text-align: left;
        padding: 10px 0;
        font-size: 12px;
        padding: 12px;
      }

    .item1,
    .item2,
    .item3,
    .item4 {
        grid-column: 1;
        min-width:200px;
      }
    .item5 {
      grid-column: 1;
      min-width:200px;
    }
    .item3 {
        display:none;
    }

    .bottom-nav {
        visibility:hidden;
    }
  }
  #overlay {
    z-index: 1000;
    background-color: white;
    visibility: hidden; /* Hidden by default */
    border: 4px solid black;
    width: 50%;
    height: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex; /* Use flexbox for content alignment */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow */
    padding:30px;
    border-radius:5px;
    vertical-align: top;
}
    #overlay ul li {
        list-style-type: circle; 
        margin-left:40px;
    }
    #overlayContent {
        width:100%;
        height:100%;
        vertical-align:top;
        text-align:left;

    }
button {
    margin-top: 20px; /* Space between the heading and button */
    padding: 10px 20px; /* Button padding */
    background-color: var(--pastel-six); /* Button background color */
    border: none; /* No border */
    color: var(--pastel-one); /* Text color */
    cursor: pointer; /* Pointer on hover */
    font-size: 16px; /* Font size */
}

button:hover {
    background-color: var(--pastel-three); /* Darker on hover */
}

@media(max-width: 480px) {
    .showcase p {
        font-size: 12px; 
    }
    .showcase h1 {
        font-size: 1rem;    
    }
    .large-only {
        display:none;
    }
    #portfolio-title {
        min-height:80px;
    }
    body{
        margin: 3px 3px 3px 3px;
        background-color:black;
    }
    .portfolio, #portfolio, .info, .gallery {
        padding: .5rem .5rem;
    }
    img {
        max-width: 200px;
    }
    #main-logo {
        width:175px;
        height:59px;
    }
    #logoDiv {
        padding:10px;
    }
    .content-container {
        font-size:8pt;
        overflow-y:hidden;
        
        max-height:250px;
    }

}

.left {
    list-style-type: none; /* Remove default bullet points */
    padding-left: 0; /* Remove default padding */
}

.left li {
    position: relative;
    padding-left: 1.5em; /* Space for the icon */
}

.left li i {
    position: absolute;
    left: 0; /* Position the icon to the left */
    top: 0.1em; /* Adjust this for vertical alignment */
    color: green; /* Customize the icon color */
}

.left li {
    text-indent: -1.5em; /* Align the first line with the icon */
    padding-left: 1.5em; /* Indent wrapped lines */
    line-height: 1.5; /* Adjust line-height if needed */
}

/* #img11 {
    border:2px solid white;
    border-radius:6px;
    padding:10px;
    display:block;
} */

.img-frame {
    padding:10px;
    background-color:white;
    width:72px;
}

.service-list-list {
    list-style-type:circle;
    margin-left:20px;
}

a {
    text-decoration:none;
    color:#000099;
}

a.buttonized:hover {
    text-decoration:none;
    xxbackground-image: linear-gradient(to bottom right, white, skyblue);
    background-color:white;
}

a.buttonized {
    border: 1px solid darkgray;
    background-color:#eee;
    padding:2px 6px;
    border-radius:10px;
}

#icon2 {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Shadow effect */
}

#icon3 {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Shadow effect */
}

#icon4 {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Shadow effect */
}

#icon5 {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Shadow effect */
}

#icon1 {
    
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Shadow effect */
}

/*fader*/

body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #0066cc; /* Blue background */
}

.logo-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    animation: fadeOut 2s ease-out 2s forwards; /* Start fading out after 8 seconds */
}

.logo {
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    animation: revealLogo 2s ease-out forwards; /* Logo appears over 3 seconds */
}

@keyframes revealLogo {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none;
    }
}


.header-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    width:100%;
}

.image-container {
    flex: 0 0 auto;
    margin-right: 20px;
}

.image-container img {
    max-width: 200px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.title-container {
    flex: 1 1 auto;
}

.title-container h1 {
    color: #2c3e50;
    margin: 0;
}

.content-container p {
    line-height: 1.6;
    margin-bottom: 20px;
}

.content-container ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.content-container li {
    margin-bottom: 10px;
    line-height: 1.4;
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2980b9;
}