*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body{
    background-color: black;
}

.navbar ul li a{
color: white;
font-size: larger;
font-family: sans-serif;
font-weight: bolder;
margin: 0 5px;
}

.navbar ul li a:hover{
    color: #077b32;
    text-shadow: 0 0 20px #077b32, 0 0 20px #077b32, 0 0 30px #077b32;
    text-decoration: underline;
}
.navbar-brand{
    /* color: white; */
    color: white;
    font-size: 30px;
    font-family: sans-serif;
    font-weight: bolder;
}

.navbar-brand:hover{
    color: white;
}

.sir_name,.name,.Data {
    color: #077b32;
    text-shadow: 0 0 10px #077b32, 0 0 20px #077b32, 0 0 30px #077b32;
}


.offcanvas .navbar-nav .nav-link:hover {
    color: red;
    background-color: blueviolet;
    border-radius: 10px;
}

.offcanvas .navbar-nav .nav-link.active {
    color: #a47239;
}

.offcanvas .navbar-nav .nav-item a {
    color: rgb(9, 9, 9);
    font-weight: bold;
}



.headings{
    color: white;
    font-family: sans-serif;
    font-weight: bolder;
}

.about-me p{
    color: white;
    font-family: sans-serif;
    font-weight: bolder;
}

#read-more,#read-less{
    background: none;
    color: #077b32;
    font-family: sans-serif;
    font-weight: bolder;
    border: none;
}


.icons i {
    margin: 0 20px; /* Adds 20px of space on the left and right of each icon */
    font-size: 2rem; /* Adjusts the size of the icons */
    cursor: pointer; /* Adds a pointer cursor to make icons interactive */
    color: #077b32;
    transition: transform 0.5s ease, box-shadow 0.5s ease; /* Include box-shadow transition */
}


.icons i:hover {
    transform: scale(2); /* Scale up the icon */
    box-shadow: 0 0 50px rgba(7, 123, 50, 0.7); /* Glowing effect */
}



.container-content{
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 90%;
}
















/* Projects page css */
.glowing-card {
    box-shadow: 0px 0 80px rgba(7, 123, 50, 0.7) !important; /* Glowing green effect */
    transition: transform 0.5s ease; /* Smooth scaling */
    position: relative;
}

.glowing-card:hover {
    transform: scale(1.05); /* Slight scaling on hover */
}

/* Apply background animation only on the card-body */
.glowing-card .card-body {
    position: relative;
    overflow: hidden; /* Ensure the green background doesn't spill out */
    background-color: white; /* Default background */
    z-index: 0;
    transition: background-color 0.5s ease, color 0.5s ease; /* Smooth background and text color transition */
}

/* Background color animation */
.glowing-card .card-body::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #077b32; /* Green color on hover */
    transition: top 0.5s ease; /* Controls the speed of the background fill */
    z-index: -1; /* Ensure the background stays behind the content */
}

/* When hovering over the whole card, animate the background of card-body */
.glowing-card:hover .card-body::before {
    top: 0; /* Animate background from bottom to top */
}

/* When hovering, change text, button, and time colors */
.glowing-card:hover .card-body {
    background-color: #077b32; /* Set green background */
    color: #ffffff; /* Change text color to white */
}

.glowing-card:hover .card-text {
    color: #ffffff; /* Change card-text to white */
}

/* Button styling on hover */
.glowing-card .btn-outline-secondary {
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* Change button background to white and text to green on card hover */
.glowing-card:hover .btn-outline-secondary {
    background-color: #ffffff; /* Button background changes to white */
    color: #077b32; /* Button text color changes to green */
    border-color: #ffffff; /* Button border changes to white */
}

/* Additional hover on button to change background to grey */
.glowing-card .btn-outline-secondary:hover {
    background-color: #6c757d; /* Grey color on button hover */
    color: white; /* Change button text to white */
    border-color: #6c757d; /* Change border to match grey background */
}

/* Change the color of the time text */
.glowing-card .text-muted {
    transition: color 0.5s ease; /* Smooth transition for the time text */
}

.glowing-card:hover .text-muted {
    color: #ffffff; /* Time text changes to white */
}







/* Contact Us */
.contact-parent{
    background: #fff;
    box-shadow: 0px 0 80px rgba(7, 123, 50, 0.7) !important;
    display:flex;
    margin:80px 0;
}

.contact-child{
    display:flex;
    flex:1;
    box-shadow:0px 0px 10px -2px rgba(0,0,0,0.75);
}

.child1{
    background:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("https://cdn.pixabay.com/photo/2024/03/17/21/58/ai-generated-8639839_960_720.jpg");
    background-size:cover;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    color:#fff;
    padding:100px 0;
}

.child1 p{
    padding-left:20%;
    font-size:20px;
    text-shadow:0px 0px 2px #000;
}
 
.child1 p span{
    font-size:16px;
    color:#9df2fd;
}

.child2{
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
}

.inside-contact{
    width:90%;
    margin:0 auto;
}
 
.inside-contact h2{
    text-transform:uppercase;
    text-align:center;
    margin-top:50px;
}
 
.inside-contact h3{
    text-align:center;
    font-size:16px;
    color:#0085e2;
}

.inside-contact input, .inside-contact textarea{
    width:100%;
    background-color:#eee;
    border:1px solid rgba(0,0,0,0.48);
    padding:5px 10px;
    margin-bottom:20px;
}

.inside-contact input[type=submit]{
    background-color:#000;
    color:#fff;
    transition:0.2s;
    border:2px solid #000;
    margin:30px 0;
}

.inside-contact input[type=submit]:hover{
    background-color:#fff;
    color:#000;
    transition:0.2s;
}

@media screen and (max-width:991px){
    .contact-parent{
        display:block;
        width:100%;
    }
 
    .child1{
        display:none;
    }
 
    .child2{
        background-image:linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)), url("https://cdn.pixabay.com/photo/2024/03/17/21/58/ai-generated-8639839_960_720.jpg");
        background-size:cover;
    }
 
    .inside-contact input, .inside-contact textarea{
        background-color:#fff;
    }
}




/* Posts page  */
/* Post title initial state */
/* Initial state for the card */
.card-container {
    transition: transform 0.5s ease-in-out;
}

/* Initial state for post-title background animation */
.post-title {
    position: relative;
    background: linear-gradient(to right, #077b32 50%, #ffffff 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: background-position 0.5s ease-in-out, color 0.5s ease-in-out;
}

/* Hover effect for the entire card */
.card-container:hover {
    transform: scale(1.05); /* Increase scale */
}

/* Hover effect for both the thumbnail and post-title */
.card-container:hover .post-title {
    background-position: left bottom; /* Background color fills from right to left */
}


.post-title a{
    color: #000;
    font-weight: bolder;
    text-decoration: none;
}
/* Change text color of h3 and p when hovering */
.card-container:hover .post-title h3, 
.card-container:hover .post-title p,
.card-container:hover .post-title a{
    color: #fff;
}
.post-title h1{
    font-size: 30px;
}

.main_card {
    position: relative;
    overflow: hidden;
}

.img-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(30%); /* Simulate the dark overlay */
}

.main_card .col-md-6 {
    position: relative;
    z-index: 1; /* Ensure the text stays on top of the image */
}

.main_card h1,
.main_card p,
.main_card a {
    color: white;
}


.thumbnail {
    width: 200px; /* Ensure the width matches the SVG dimensions */
    height: 250px; /* Ensure the height matches the SVG dimensions */
    overflow: hidden; /* Crop any overflow from the image */
}

.thumbnail img {
    object-fit: cover; /* Ensure the image fills the container while maintaining aspect ratio */
    width: 100%;
    height: 100%;
    display: block; /* Ensure the image is a block-level element to avoid spacing issues */
}





/* Single Post */

.heading h1{
    text-align: center;
    font-weight: bolder;

}

.post-box{
    box-shadow: 0 0 50px #077b32;
    border-radius: 25px;
}

.desc p{
    font-family: sans-serif;
    font-weight: bolder;
}






/* Login Form style */

.form-signin {
    
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 60px #077b32;
  }


.Login_container{
    margin-top: 110px;
}