#blog-img-para-main-container{
    /* display: flex; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* color: white;
    font-family: "Constantia Bold"; */
    margin-left: 3%;
    margin-right: 5%;
    margin-top: 8%;
    gap: 5%;
    /* margin-bottom: 25%;
    cursor: pointer; */
}.subtitle-block-post{
    font-family: "Constantia Bold";
    color: white;
    cursor: pointer;
    margin-right: 20%;
    margin-left: 5%;
}.heading-blog-post{
    font-family: "Constantia Bold";
    color: white;
    cursor: pointer;
    margin-right: 20%;
    font-size: 32px;
    margin-left: 5%;
}.date-month-time{
    color: white;
    margin-top: 4%;
    margin-left: 5%;
}.heading-blog-post:hover,
.heading-blog-post:hover + .subtitle-block-post {
    /* Styles to apply on hover */
    color: yellow; /* Change text color on hover */
}.subtitle-block-post:hover {
    color: aqua;
}

#comment-box{
  margin-top: 60%;
    width: 90%;
    height: 650px;
}.comment-container {
    display: flex; /* Use flexbox layout */
    justify-content: space-between; /* Distribute space between child elements */
     margin-left: 5%;
    
}

/* Style for the left box inside comment-box */
.left-box {
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    width: 33%; /* Set width to 33% of the parent container */
    background-color: red; /* Example background color */
    /* Adjust other styles as needed */
}

/* Style for the right box inside comment-box */
.right-box {
    width: 65%; /* Set width to 65% of the parent container */
    background-color: rgba(21, 20, 20, 0.931); /* Example background color */
    padding: 20px; /* Add padding for spacing inside the box */
    color: white; /* Text color for input labels and button */
}

.input-group {
    margin-bottom: 15px; /* Spacing between input groups */
    position: relative; /* Enable relative positioning */
}

label {
    position: absolute; /* Position the label absolutely */
    top: -15px; /* Move the label above the input border */
    left: 0; /* Align the label to the left */
    color: white; /* Label text color */
    font-weight: bold; /* Make label text bold */
}

input[type="text"] {
    width: 70%; /* Full width of parent container */
    padding: 10px; /* Add padding inside the input box */
    border: none; /* Remove default border */
    border-bottom: 2px solid white; /* Add bottom border */
    background-color: transparent; /* Transparent background */
    color: white; /* Text color */
    box-sizing: border-box; /* Include padding in width calculation */
    outline: none; /* Remove default focus outline */
    margin-top: 10px; /* Adjust top margin */
}input[type="email"] {
    width: 85%; /* Full width of parent container */
    padding: 10px; /* Add padding inside the input box */
    border: none; /* Remove default border */
    border-bottom: 2px solid white; /* Add bottom border */
    background-color: transparent; /* Transparent background */
    color: white; /* Text color */
    box-sizing: border-box; /* Include padding in width calculation */
    outline: none; /* Remove default focus outline */
    margin-top: 10%; /* Adjust top margin */
}#email-label{
    margin-top: 10%;
}

#submmit-button{
    margin-left: 60%;
    padding: 10px 60px; /* Padding for button */
    color: white; /* Button text color */
    border: none;
    cursor: pointer; /* Show pointer cursor on hover */
    margin-top: 15px; /* Adjust top margin for button */
    background-color: red;
}

#submmit-button:hover {
    background-color: transparent; /* Transparent background */
    border: 1px solid gray; /* Button border */
}

#top-input-box{
    display: flex;
    /* margin-left: 10%; */
}

#left-box-para {
    font-size: 46px;
    color: white;
    text-align: center;
    /* margin-right: 45%; */
    margin: auto;
    font-weight: bolder;
}#top-main-header{
    margin-top: 25%;
    margin-left: 10%;
}.span{
    color: red;
}
.servicesfourth{
    margin-top: 3%;
    border-radius: 20px;
    background-color: #3cd476;
  }.servicesfifth{
    margin-top: 3%;
    border-radius: 20px;
    background-color: #edc124;
  }
/* CSS for blog post container */
.blog-post {
    /* margin-bottom: 50px; */
    transition: opacity 0.6s ease-in-out; /* Smooth transition for opacity */
    transform: translateY(50px); /* Start position below */
    
}

/* CSS for animation when element is scrolled into view */
.animated {
    animation: flyIn 3s forwards;
    opacity: 1;
    transform: translateY(0); /* Slide up to original position */
}

/* Hide overflow to prevent early animation trigger */
body {
    overflow-x: hidden;
    overflow-y: scroll;
}
@keyframes flyIn {
    0% {
        transform: translateY(-50px); /* Start off-screen */
        opacity: 0; /* Initially hidden */
    }
    100% {
        transform: translateY(0); /* Fly in */
        opacity: 1; /* Fully visible */
    }
}@media (max-width: 767px) {
 .left-box{
        display: none;
      }#comment-box{
        margin-top: 400%;
        width: 95%;
        height: 400px;
    }.right-box {
        width: 95%; /* Set width to 65% of the parent container */
    }#submmit-button{
        margin-left: 10%;
        margin-top: 15%;
    } 
        #blog-img-para-main-container{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          margin-right: 15%;
          margin-top: 8%;
      }.subtitle-block-post{
        font-family: "Constantia Bold";
        margin-right: 2%;
        margin-bottom: -20%;
    }.heading-blog-post{
      margin-right: 10%;
      font-size: 28px;
      margin-left: 5%;
  }
  }
      .blog-img{
        width: 100%;
        /* height: 100%; */
        margin-left: 5%;
        
      }.blog-img:hover{
        cursor: pointer;
      }.loader {
        margin-left: 100%;
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid yellow;
        width: 120px;
        height: 120px;
        animation: spin 2s linear infinite;
        display: none; /* Hide the loader initially */
      }
  
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      @media (max-width: 767px) {
        .loader{
          margin-left: 45%;
          margin-top: 10%;
          /* justify-content: center;
          align-items: center; */
        }
    
      }