#blog-post-container{
    display: flex;
    margin-left: 15%;
    gap: 10%;
    margin-top: 10%;
}
.servicesfourth{
    margin-top: 3%;
    border-radius: 20px;
    background-color: #3cd476;
  }



#blog-post-container{
    font-family: "Constantia Bold";
}.subtitle-block-post-bellow{
    font-family: "Constantia Bold";
}.subtitle-block-post-bellow-bellow{
    font-family: "Constantia Bold";
}.subtitle-block-post-left{
    font-family: "Constantia Bold";
}
#blog-img-para-main-cointainer{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    color: white;
    font-family: "Constantia Bold";
    margin-left: 3%;
    margin-top: 8%;
    gap: 5%;
    margin-bottom: 25%;
    cursor: pointer;
}.subtitle-block-post{
    color: white;
    cursor: pointer;
    margin-right: 20%;
    margin-left: 5%;
}.heading-blog-post{
    cursor: pointer;
    color: white;
    margin-right: 20%;
    font-size: 32px;
    margin-left: 5%;
}.date-month-time{
    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;
}
#image-post-blog:hover{
    transform: scale(1.01);
}
.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%;
}

button {
   
}#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;
}

/* CSS for blog post container */
.blog-post {
    margin-bottom: 50px;
    opacity: 0; /* Initially hide the element */
    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 */
    }
}.subtitle-block-post-bellow{
    color: white;
    cursor: pointer;
    margin-right: 18%;
    margin-left: 15%;
    margin-top: 5%;
}.subtitle-block-post-bellow-bellow{
    color: white;
    cursor: pointer;
    margin-right: 18%;
    margin-left: 15%;
    margin-top: 5%;
}#side-text-project-second{
    writing-mode: vertical-rl; /* Set vertical writing mode */
    font-size: 28px;
    color: red;
    transform: rotate(180deg); /* Rotate the text 180 degrees */
    transform-origin: top left; /* Set the rotation origin to the top left corner */
    /* margin-b: 20%; */
    position: relative;
   margin-top: 9%;
    left: 13%;
  }#line-para{
    display: flex;
  }.subtitle-block-post-left{
    color: white;
    cursor: pointer;
    margin-right: 38%;
    margin-left: 9%;
    margin-top: 3%;
}.servicesese {
    font-family: "Auralyess Free Trial";
    font-size: 55px;
    margin-top: 1%;
    margin-left: 15%;
    background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
  }@media (max-width: 767px) {
    .heading-blog-post{
        margin-top: 5%;
        margin-right: -2%;
        margin-left: -8%;
        /* display: none; */
    }#image-post-blog{
        margin-left: -20%;
        width:50%;
        margin-bottom: 20%;
    }#blog-post-container{
        display: block;
        /* margin-left: 15%;
        gap: 10%;
        margin-top: 10%; */
    }.subtitle-block-post-left{


        margin-right: -5%;
        margin-left: -18%;
        margin-top: 15%;
    }#side-text-project-second{
        position: relative;
       margin-top: 42%;
        left: 3%;
        font-size: 35px;
      }.servicesese {
        font-size: 40px;
        margin-right: -10%;
        margin-top: 1%;
        margin-left: 10%;
      }.left-box{
        display: none;
      }.right-box {
        width: 95%; /* Set width to 65% of the parent container */
    }#submmit-button{
        margin-left: 10%;
        margin-top: 15%;
    } #paragraph12345{
        text-align: center;
        margin-left: 10%;
      }
  } @media (max-width: 480px) {
        
      }#image-post-blog{
        width: 120%;
      }.main-heading {
        font-size: 1.5em; /* Adjust font size as needed */
        color: aqua; 
        margin-top: 20px;
    }.sub-heading {
        font-size: 1.2em; 
        color: #345e37; 
        margin-top: 10px;
        margin-bottom: 10px;
    }.colon-heading {
        font-size: 1.2em; /* Adjust font size as needed */
        color: orange; /* Change to your desired color */
        margin-top: 15px;
    }
    #floting-image{
        margin-left: 25%;
      }@media (max-width: 767px) {
        #floting-image{
            margin-left: 2%;
            margin-top: 20%;
          }
      }