:root{
    --main-background:rgb(12, 116, 43);
    --green-color:rgb(12, 116, 43);
    --light-color:#fff;
    --main-font-size:20px;
    --font-20-size:20px;
    --font-size-18:18px;
    --font-35-size:35px;
    --font-30-size:30px;
    --font-13-size:13px;
    --font-15-size:15px;
}


.first_container{
  background-color: var(--light-color);
  text-align: center;
  color: var(--light-color);
}
.first_con_text{
    font-size:var(--font-13-size);
    color: var(--green-color);
    font-weight: bolder;
    text-transform: uppercase;

}
.carousel-inner{
    background-color: var(--light-color);
    border-radius: 10px;
}
.image_style{
    backdrop-filter: blur(6px);
    transition: 1s ease-in-out;
}
.image_style:hover{
    transform: scale(+0.9);  
   cursor: pointer;
}
.carousel-caption{
    background-color: var(--green-color);
   backdrop-filter: blur(6px);
   opacity: 0.7;
   color: var(--light-color);
   transition: 1s ease-in-out;
}
.carousel-caption:hover{
    transform: translateY(50px);
    background-color: rgba(1, 37, 10, 0.7);
   cursor: pointer;
   color: var(--light-color);
   height: 130px;
   backdrop-filter: blur(0px);
}
.second_con_head{
    font-size: var(--font-15-size);
    font-weight: bolder;
    text-transform: uppercase;
}
.second_con_text{
    font-size: 13px;
}
.head
{
    font-size: 25px;
    font-weight: bolder;
    color: var(--green-color);   
}
.head_2{
    font-size: 15px;
    font-weight: bolder;
    color: var(--green-color); 
    cursor: pointer;  
}
.text_label{
    font-size: 15px;

}
.text_label_2{
    font-size: 13px;
    cursor: pointer;

}
#img_animation{
    transition: 2s linear;
    cursor: pointer;
   
}
#img_animation:hover{
    transform: scale(0.9);  
}
.slide_container{
    background-color: rgb(221, 253, 221);
}
.owl-nav{
    display: none;
}

.upcoming_slide{
    background: 
        linear-gradient(
            rgba(12, 116, 43,0.5), 
        rgba(31, 104, 31, 0.8)
    ),
        url('../img/governor\ 3.jpg') no-repeat;
    background-size: cover; 
    width: 100%;
    height:300px;
    position: relative;   
    box-shadow: 0 5px 10px rgba(255, 255, 255, 0.6);
    
}
 .upcoming_slide:hover{
    background: 
    linear-gradient(
        rgba(12, 116, 43,0.9), 
    rgba(2, 112, 20, 0.9)
),

    url('../img/governor\ 3.jpg') no-repeat;
     
   backdrop-filter: blur(6px);
       background-size: cover; 
       width: 100%;
       height:300px;
       position: relative; 
       cursor: pointer;
       box-shadow: 0 3px 5px rgba(255, 255, 255, 0.6);
 } 
 
 .number_of_container {
    background:
linear-gradient(rgba(183, 250, 230, 0.7),
    rgba(2, 112, 20, 0.5),
    rgba(12, 116, 0.8)),
url('../img/governor\ 2.jpg') no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 300px;
}

.number_of_num {
    font-size: 40px;
    color: var(--light-color);
}
 
.number_of_text {
    color: var(--light-color);
    font-size: 13px;
}


@media (max-width:576px){
    .head
    {
        font-size: 20px;
        font-weight: bolder;
        color: var(--green-color);   
    }
    .text_label{
        font-size: 13px;
    
    }
    .image_style{
        width: 100%;
        height: 100px;
    }
    .number_of_container {
        background:
    linear-gradient(rgba(183, 225, 250, 0.7),
        rgba(2, 112, 20, 0.5),
        rgba(12, 116, 0.8)),
    url('../img/governor\ 2.jpg') no-repeat;
       width: 100%;
        background-size: cover;
        /* background-attachment: fixed; */
        height: 400px;
    }
    
}



@media (min-width:577px) and (max-width:1030px){
    .image_con{
        margin-top: 8em;
    }
    .head
    {
        font-size: 20px;
        font-weight: bolder;
        color: var(--green-color);   
    }
    .text_label{
        font-size: 13px;
    
    }
    .image_style{
        width: 100%;
        height: 100px;
    }
    .number_of_container {
        background:
    linear-gradient(rgba(183, 225, 250, 0.7),
        rgba(2, 112, 20, 0.5),
        rgba(12, 116, 0.3)),
    url('../img/governor\ 2.jpg') no-repeat;
        background-position: center;
        width: 100%;
        background-size: cover;
        /* background-attachment: fixed; */
        height: 400px;
    }
}