/* Blog Post nav Bar */

.blgnav{
font-size: 25px;
}
 
 /* Blog Post Old back Button */

.blgbckbtn {
    margin-bottom: 30px;
    height: 50px; 
    width: 140px; 
    cursor:pointer; 
    font-size: 30px; 
    color: white;
 }
 .blgbckbtn:hover {
    color: #3566d0;
 }

 .blgbckbtnicon {
    float:left;
    font-size: 50px;
 }

 .blgbckbtnhr {
   width: 100%; 
   margin-top: 5px; 
   margin-bottom: 20px; 
   border:1px dashed#3566d0 ;
}
 /* END Blog Post Old back Button */


 /* Blog Post back Button Spacer */

 .blog_post_title {
    margin-top: 50px;
    }

 /* Blog Title */

 .blgtlicon {
    float: left;
    font-size: 30px;
    color: #3566d0;
    margin-top: 10px;
    margin-right: 5px;
 }

 .blgpsttl {
    padding-top: 3px;
 }


 /* Blog post new back button */
 .brand-button {
   --font-color: #fefefe;
   --bg-color: #1e1e1f;
   --main-color: #3566d0;
   width: auto;
   padding-right: 10px;
   height: 40px;
   border-radius: 5px;
   border: 2px solid var(--main-color);
   background-color: var(--bg-color);
   box-shadow: 4px 4px var(--main-color);
   font-size: 17px;
   font-weight: 600;
   color: var(--font-color);
   cursor: pointer;
 }
 
 .brand-button:hover {
   --font-color: #3566d0;
   --bg-color:#1e1e1f ;
   --main-color: #3f3f40;
 }

 .brand-button:active {
   box-shadow: 0px 0px var(--main-color);
   transform: translate(3px, 3px);
 }
        
 
 /* Media query for screens with a maximum width of 600 pixels (adjust as needed) */
 @media only screen and (max-width: 600px) {
  #dynamicButton {
      /* Styles for small screens */
  }
  #dynamicHeaderImage {
    /* Styles for small screens */
}
}

 /* Offset for the ion-icon on the download button */
 .dlionicon{   
  float: left;
  font-size: 25px;
  margin-left: 15px;
  padding-right: 10px; 

 }
 
 /* Blue link for <a> */
 .bluelink{
display: inline;
color:#3566d0 ;
 }

 .bluelink:hover {
color:#6796fd ;
 }



/* Style for the collapsible section */
.collapsible {
  --font-color: #fefefe;
  --bg-color: #1e1e1f;
  --main-color: #3566d0;
  width: auto;
  padding-right: 10px;
  padding-left: 10px;
  height: 40px;
  border-radius: 5px;
  border: 2px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 17px;
  font-weight: 600;
  color: var(--font-color);
  cursor: pointer;
    }

    .collapsible:hover {
      --font-color: #3566d0;
      --bg-color:#1e1e1f ;
      --main-color: #3f3f40;
    }
    

   
       /* Style for the button in its active state */
       .collapsible.active {
      --font-color: #3566d0;
      --bg-color:#1e1e1f ;
      --main-color: #3f3f40;
    }
   
   
       /* Style for the content inside the collapsible section */
       .collapsible-content {
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease-out; /* Smooth transition for max-height */
       }





       .rounded-box {
        position: relative;
        width: 100%;
        padding: 30px;
        border-radius: 15px;
        display: grid;
        grid-template-columns: 50% 50%;
        border: 3px solid #3566d0;
        transition: box-shadow 0.3s; /* Set the transition duration */
        margin-bottom: 30px;
      
        /* Gradient background */
        background: rgb(0, 2, 43);
        background: linear-gradient(
          311deg,
          rgba(0, 2, 43, 1) 0%,
          rgba(0, 14, 15, 1) 25%,
          rgba(0, 15, 27, 1) 46%,
          rgba(2, 10, 37, 1) 73%,
          rgba(1, 29, 40, 1) 100%
        );
      }
      
      .rounded-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: auto 100%;
        background-repeat: repeat;
        background-image: url('./background/pattern2.svg'); /* Replace with the actual path to your SVG pattern */
        border-radius: 15px;
      }
      
      .rounded-box:hover {
        box-shadow: 0 0 30px #152b5c;
      }
      
      

.rounded-box img {
  width: 80%;
  height: auto; /* Maintain aspect ratio */
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.header-image-container {
  display: inline-block; /* Ensures the container takes up only as much width as necessary */
  transition: transform 0.3s ease; /* Add a smooth transition to the transform property */
  z-index: 2;
}

.header-image-container:hover {
  transform: scale(1.5); /* Zoom in by 10% on hover */
}

.text-content {
  overflow: hidden; /* Clear the float from the image */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  text-align: center;
}


.glassblur{

background: rgba(99, 99, 99, 0.2);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);

padding-left: 30px;
padding-right: 30px;
border-radius: 15px;

}

.text-content p {
  color: #fff;
  margin: 0;

}