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

html {
    font-size: 16px; /* Set the base font size for the root element */
}


/* about company start */

.about-company{
    /* border: 1px solid red; */

    /* padding-top: 50px;
    padding-bottom: 50px; */

    margin-top: 50px;

}

.about-company .about-section{

    /* border: 1px solid blue; */

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    background-color: #fff;

    min-height: 70vh;

    padding: 50px;

    
}

.about-company .about-section .about-images{
    width: 49%;

    /* border: 1px solid red; */

    height: 50vh;

    position: relative;
}

.about-company .about-section .about-images .below-img{
    position: absolute;
    right: 0%;

    width: 80%;
    height: 100%;

    object-fit: cover;

    z-index: 1;
}

.about-company .about-section .about-images .up-img{
    
    position: absolute;
    top: 25%;
    left: 0%;
    
    width: 40%;
    height: 50%;

    object-fit: cover;

    z-index: 2;
}

.about-company .about-section .about-intro{
    width: 49%;
    height: 50vh;

    /* border: 1px solid green; */

    position: relative;
}

.about-company .about-section .about-intro .heading{
    font-size: 1.6rem;
    font-weight: 400;
    color: #0b4f0b;
    margin-bottom: 10px;

    position: absolute;
    top: 10%;
    left: 0%;

    transform: translate(0%, -10%);
}

.about-company .about-section .about-intro .message{
    color: #000000;
    margin-bottom: 20px;

    position: absolute;
    top: 22%;
    left: 0%;

    transform: translate(0%, -22%);
}

.about-company .about-section .about-intro .desc{
    color: #000000;
    font-size: 1rem;
    word-spacing: 3px;
    letter-spacing: 0.5px;
    font-weight: 600;
    line-height: 25px;

    position: absolute;
    top: 50%;
    left: 0%;

    transform: translate(0%, -50%);
}

.about-company .about-section .about-intro .desc2{
    color: #000000;
    font-size: 1rem;
    word-spacing: 3px;
    letter-spacing: 0.5px;
    font-weight: 600;
    line-height: 25px;

    position: absolute;
    top: 70%;
    left: 0%;

    transform: translate(0%, -70%);
}

.about-company .about-section .about-intro .btn{
    text-decoration: none;
    padding: 8px;
    padding-left: 20px;
    padding-right: 20px;

    border-radius: 5px;

    color: #fff;
    background-color: #0b4f0b;

    position: absolute;
    top: 100%;
    left: 0%;

    transform: translate(0%, -100%);
}

/* about company end */

/* Our History Start */

.history{
    padding: 50px;
}

.history .content{
    background-color: #F0F1F1;
    padding: 150px;
    word-spacing: 5px;
    letter-spacing: 2px;

    font-size: 1.2rem;

    margin-top: 100px;
    /* height: 140vh; */
}

.history .content .heading{
    font-size: 1.6rem;
    font-weight: 400;
    color: #0b4f0b;
    margin-bottom: 10px;

    text-align: center;
}

.history .content .info{
    font-size: 1.8rem;
    margin-bottom: 60px;

    text-align: center;
}

.history .content .message{
    text-align: left;
}

.history .content .message p{
    color: #000000;
    font-size: 1rem;
    word-spacing: 3px;
    letter-spacing: 0.5px;
    font-weight: 600;
    line-height: 25px;
}

.history .cards{
    display: flex;
    justify-content: space-around;
    align-items: center;

    /* margin-top: -170px; */

    margin-top: -100px;
}

.history .cards .card{
    
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* align-items: center; */

    -ms-flex: 35%; /* IE10 */
    flex: 35%;
    max-width: 35%;
    padding: 0 4px;

    padding: 20px;

    border-radius: 8px;

    margin-right: 15px;

    background-color: #fff;

    /* width: 130px; */
    /* height: 160px; */

    box-shadow: 0px 0px 5px 1px #6fa42e71;
}

.history .cards .card .inner-icon{
    font-size: 60px;
    margin-bottom: 15px;
    color: #0b4f0b;
}

.history .cards .card .name{
    font-size: 1.6rem;
    margin-bottom: 25px;
}

.history .cards .card .message{
    color: #000000;
    font-size: 1rem;
    word-spacing: 3px;
    letter-spacing: 0.5px;
    font-weight: 600;
    line-height: 25px;
}

/* Our History End */

/* Gallery Start */

.gallery{
    margin-top: 100px;
}

/* .gallery .head{
    
} */

.gallery .head .heading{
    font-size: 1.6rem;
    font-weight: 400;
    color: #0b4f0b;
    margin-bottom: 10px;

    text-align: center;
}

.gallery .head .info{
    font-size: 1.8rem;
    margin-bottom: 60px;

    text-align: center;
}

.gallery .navigation{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.gallery .navigation a{
    text-decoration: none;
    padding: 15px;
    padding-left: 25px;
    padding-right: 25px;
    color: #000000;
    border-radius: 5px;
    margin-right: 50px;
}

.gallery .navigation a:hover, .gallery .navigation .active{
    background-color: #0b4f0b;
    color: #fff;
    cursor: pointer;
}

                                                    /* pictures album start */

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery .album{
    width: 100%;
    height: 80vh;

    overflow: hidden;
    overflow-y: scroll;

    /* border: 1px solid #0b4f0b; */

    width: 100%;
    align-self: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.gallery .album .row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
     
    padding: 15px;

    transition: all .5s ease-in-out;

    /* border: 1px solid yellow; */
}
  
.gallery .album .column {
    -ms-flex: 33.33%; /* IE10 */
    flex: 33.33%;
    max-width: 33.33%;
    padding: 15px;


    

    /* border: 1px solid green; */
}

.transition-effect {
    opacity: 0;
}
  
.gallery .album .column img {
    /* margin-top: 8px; */
    vertical-align: middle;
    width: 100%;

    height: 25vw;

    object-fit: cover;

    padding-bottom: 30px;
    

    /* margin: 10px; */

    /* border: 1px solid blue; */
}

.gallery .album .column .video {
    vertical-align: middle;
    width: 100%;
    height: 23.05vw;

    object-fit: contain;

    position: relative;

    /* padding-bottom: 30px; */
    margin-bottom: 30px;

    /* border: 1px solid blue; */
}

.gallery .album .column .video .play-icon {
    vertical-align: middle;

    position: absolute;
    width: 30%;
    height: 30%;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* border: 1px solid blue; */
}

.gallery .album .column .video .play-icon img {
    vertical-align: middle;
    width: 100%;
    height: 100%;

    object-fit: contain;

    /* border: 1px solid green; */
}

.gallery .album .column .video .play-icon img:hover {
    cursor: pointer;
}

.gallery .album .column .video video {
    vertical-align: middle;
    width: 100%;
    height: 100%;

    position: absolute;
    
    overflow: hidden;
    border: none;
    outline: none;

    /* object-fit: cover; */

    object-fit: fill;

    box-shadow: none;
    outline: none;
    border: none;
    overflow: hidden;
    padding: 1px;

    /* background-color: #000000; */

    /* border: 1px solid #0b4f0b; */
}

.gallery .album .column .video iframe {
    vertical-align: middle;
    width: 100%;
    height: 100%;

    position: absolute;
    
    overflow: hidden;
    border: none;
    outline: none;

    object-fit: contain;

    /* border: 1px solid #0b4f0b; */
}

video:focus {
    box-shadow: none;
    outline: none;
    border: none;
    overflow: hidden;
}

video:hover {
    box-shadow: none;
    outline: none;
    border: none;
    overflow: hidden;
}

video::-webkit-media-controls-panel{
    box-shadow: none;
    border: none;
    outline: none;
    overflow: hidden;
}
   
.gallery .album{ /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* .gallery .album .row {
    display: -ms-flexbox; 
    display: flex;
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap;
    padding: 0 4px;
} */


                                                    /* pictures album End */

.gallery .pagination{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    

    margin-top: 50px;
    margin-bottom: 50px;
}

.gallery .pagination .btn{
    width: 40px;
    height: 40px;

    border-radius: 50%;
    color: #0b4f0b;
    border: 1px solid #0b4f0b;

    margin-right: 20px;

    position: relative;
}

.gallery .pagination .btn:hover, .gallery .pagination .active{
    cursor: pointer;
    background-color: #0b4f0b;
}

.gallery .pagination .number{
    color: #0b4f0b;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gallery .pagination .btn:hover .number, .gallery .pagination .active .number{
    color: #fff;
}

.gallery .container{
    position: relative;
}

.fetch-loading{
    width: 50px;

    display: block;

    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* z-index: 1000; */
}

#empty-msg{
    color: red;

    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 90%;
    text-align: center;
}

/* Gallery End */