/*
Theme Name: BlankSlate
Theme URI: https://opencollective.com/blankslate
Author: Bryan Hadaway
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/bhadaway/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2024.2
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2024
BlankSlate is distributed under the terms of the GNU GPL
*/
.slider-wrapper {
    margin: 20px auto; /* Adjust the margin (top, bottom, left, right) as needed */
    padding: 20px; /* Adjust the padding (top, bottom, left, right) as needed */
    width: 90%; /* Adjust width to maintain a responsive layout */
    max-width: 1200px; /* Optional: limit max width */
}
.carousel-item img {
    /* width: 100%;
    height: 500px; Adjust height as needed */
    object-fit: cover;
    border-radius: 15px; /* Rounded corners for a softer look */
	border: 5px solid rgba(255, 255, 255, 0.5); /* Soft white border */ 
}
.carousel-container {
    width: 90%; /* Adjust as needed */
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden; /* Prevent unwanted resizing */
}

.carousel-inner {
    display: flex;
    align-items: center;
}

.carousel-item {
    text-align: center;
}

.carousel-item img {
    width: 100%; /* Ensures image scales */
    height: 500px; /* Fixed height for all images */
    object-fit: cover; /* Crop images while maintaining aspect ratio */
}

body{
  margin: 0;
  font-family: 'Lato', sans-serif;
background: rgb(2,0,36);
background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 27%, rgba(0,212,255,1) 100%);	
	padding: 0;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
}

.header{
  //relative position header
  position: relative;
  
  //fixed position header
  //position: fixed;
  //top: 0; left: 0; right: 0;
  transition: all .3s ease;
  .top{
    /*background-image: radial-gradient(circle at 50% 50%, #ca2f33, #772b2a);*/
background: rgb(65,19,19);
background: radial-gradient(circle, rgba(65,19,19,1) 0%, rgba(48,19,19,1) 50%, rgba(0,0,0,1) 100%);	  
    /* height: 110px; */
    transition: all .3s ease;
    //collapse header
    &.scrolled{
      height: 55px;
      .logo{
       margin: 0 5%;
        width: 80px;
      }
      .right-wrapper{
        margin: 8px 5% 0 5%;
      }
    }
    .logo{
      /*margin: 42.5px 5%;*/
      margin-right: 0;
      transition: all .3s ease;
    }
    .right-wrapper{
      height: 40px;
      float: right;
      margin: 50px 5%;
      transition: all .3s ease;
      .app-name-wrapper{
        display: inline-block;
        vertical-align: top;
        height: 40px;
        .app-icon{
          margin: 11.5px 8px 11.5px 0;
        }
        .app-name{
          display: inline-block;
          vertical-align: top;
          font-size: 14px;
          color: #fff;
          margin: 11.5px 0;
          letter-spacing: 1.5px;
          text-transform: uppercase;
        }
      }
      .profile-pic{
        width: 40px;
        height: 40px;
        position: relative;
        display: inline-block;
        margin: 0 32px;
        
        .picture{
          width: 40px;
          height: 40px;
          position: relative;
          display: inline-block;
          border-radius: 20px;
          overflow: hidden;
          background-color: #fff;
          &:hover + .profile-name{
            opacity: 1;
            transform: translate(0, 0);
          }
        }
        .profile-name{
          -moz-transition: all .3s ease;
          -ms-transition: all .3s ease;
          -o-transition: all .3s ease;
          -webkit-transition: all .3s ease;
          transition: all .3s ease;
          opacity: 0;
          transform: translate(0, -15px);
          background-color: white;
          position: absolute;
          top: 50px;
          right: 0;
          text-align: right;
          white-space: nowrap;
          padding: 10px 20px 10px 20px;
          border-radius: 15px;
          &::after{
            content:"";
            width: 10px;
            height: 10px;
            background-color: white;
            position: absolute;
            top: -5px; right: 15px;
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
          }
        }
      }
      .app-menu{
        vertical-align: top;
        margin: 12px 0;
        cursor: pointer;
      }
    }
  }
  .navbar{
    background-color: #e1e1e1;
    position: relative;
    width: 100%;
    height: 70px;
    white-space: nowrap;
    overflow: hidden;
    .navbar-item{
      display: inline-block;
      font-size: 14px;
      padding: 26.5px 27px;
      color: #a7a7a7;
      text-decoration: none;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      &:hover{
        color: #3e3e3e;
      }
      &:first-child {
        padding-left: calc(5% + 5px);
      }
      &.active{
        color: #333;
      }
    }
    .hamburger-menu{
      display: none;
      margin-top: 28px;
      margin-left: calc(5% + 5px);
      cursor: pointer;
      &:hover{
        line{
          stroke: #333;
        }
      }
      line{
        fill: none;
        stroke: #7d7d7d;
        stroke-linecap: round;
        stroke-miterlimit: 10;
        stroke-width: 1.5px;
      }
    }
    .search-wrapper{
      position: absolute;
      top: 0; right: calc(5% - 20px);
      padding: 16px 20px;
      .search-input{
        font-family: 'Lato', sans-serif;
        border: none;
        background-color: #eeeeee;
        color: #3e3e3e;
        height: 18px;
        width: 280px;
        border-radius: 30px;
        padding: 10px 18px 10px 18px;
        font-size: 14px;
        transition: width .3s ease;
        &:focus{
          outline: none;
          background-color: #fff;
        }
        //make search placeholder have letter spacing on all browsers
        &::-webkit-input-placeholder{
          letter-spacing: 1.5px;
        }
        &::-moz-placeholder{
          letter-spacing: 1.5px;
        }
        &:-ms-input-placeholder{
          letter-spacing: 1.5px;
        }
      }
      .search-icon{
        position: absolute;
        top: 28px; right:calc(5% + 18px);
        cursor: pointer;
      }
    }
    .sidebar{
      position: fixed;
      top: 0; bottom: 0; left: -300px;
      width: 300px;
      background-color: white;
      transition: all .3s ease;
      &.active{
        left: 0;
        box-shadow: -11px 0 20px 10px gray;
      }
      .hamburger-menu{
        position: absolute;
        left: 250px;
        top: 25px;
        display: block;
        cursor: pointer;
        line{
          fill: none;
          stroke: #3e3e3e;
          stroke-linecap: round;
          stroke-miterlimit: 10;
          stroke-width: 3px;
        }
      }
    }
    &.first-breakpoint{
      .search-input{
        width: 0px;
        height: 18px;
        transition: width .3s ease;
        &:focus{
          width: 280px;
        }
        &::-webkit-input-placeholder{
          visibility: hidden;
        }
      }
      .search-icon{
        right: calc(5% + 28px);
      }
    }
    &.second-breakpoint{
      .hamburger-menu{
        display: block;
      }
      .navbar-item-wrapper{
        position: fixed;
        left: -300px; top: 50px;
        transition: all .3s ease;
        &.active{
          left: 0;
          z-index: 10;
        }
        .navbar-item{
          display: block;
          padding: 10px 25px;
        }
      }
      .sidebar{
        .close-sidebar.hamburger-menu{
          position: absolute;
          top: 20px;
          left: 250px;
          margin: 0;
          opacity: 0.6;
          &:hover{
            opacity: 1;
          }
          line{
            fill: none;
            stroke: #333;
            stroke-linecap: round;
            stroke-miterlimit: 10;
            stroke-width: 1.5px;
          }
        }
      }
    }
  }
}


//responsive
@media only screen and (max-width : 600px) {
  .header{
    .top{
      overflow: auto;
      background-image: radial-gradient(circle at 50% 50%, #ca2f33, #772b2a);
      height: 70px;
      &.scrolled{
        .logo{
          margin: 0 auto;
        }
      }
      .logo{
        display: block;
        margin: 7px 25px;
        width: 70px;
        float: left;
      }
      .right-wrapper{
        margin: 15px 5%;
        .app-name-wrapper, .profile-pic{
          display: none;  
        }        
      }
    }
    .navbar{
      height: 50px;
      overflow: hidden;
      .hamburger-menu{
        margin-top: 18px;
      }
      .search-wrapper{
        padding: 6px 16px;
        .search-icon{
          top: 19px;
          right:calc(5% + 24px);
        }
      }
      .navbar-item{
        padding: 16.5px 27px;
      }
    }
  }
}
/* Ensure the card headers retain their original background colors */
.card-header {
    background-color: transparent !important; /* Prevent global overriding */
}

.card.bg-primary .card-header {
    background-color: #007bff !important; /* bg-primary header color */
}

.card.bg-secondary .card-header {
    background-color: #6c757d !important; /* bg-secondary header color */
}

/* Footer Styles */
.site-footer {
    font-family: 'Arial', sans-serif;
    padding: 40px 0;
}

/* Cards */
.card {
    border: none;
    border-radius: 8px;
}

.card-body {
    padding: 20px;
}

.card-body p, .card-body ul {
    font-size: 16px;
    color: #f8f9fa;
}

.card-body a {
    color: #007bff;
    text-decoration: none;
}

.card-body a:hover {
    text-decoration: underline;
}

.copyright {
    color: #FFFFFF;
}