/*Style_Sheet_For_Article*/

/* Container for Image Gallery */
        .gallery {
            display: flex;
         	 /* display:grid; */
            grid-template-columns:auto auto;
            gap:0px;
            flex-wrap: wrap;
            justify-content: center;
            margin:0px;
            padding-bottom:0px;
        }

        /* Style for Each Image Box */
        .box {
            position:relative;
            width: 180px;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-evenly;
            height: 180px;
            margin-top: 20px;
            margin-right: 15px;
            margin-left: 15px;
            overflow: hidden;
            border-radius: 10px;
            flex-shrink:0;
            cursor: pointer;
            transition: transform 0.3s ease-in-out;
        }

        /* Center the Image */
        .box img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;

        }
        .box2 {
            position:relative;
            width: 180px;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-evenly;
            height: 180px;
            margin-top: 20px;
            margin-right: 15px;
            margin-left: 15px;
            overflow: hidden;
            border-radius: 10px;
            flex-shrink:0;
            cursor: pointer;
            transition: transform 0.3s ease-in-out;
        }

        /* Center the Image */
        .box2 img{
            width: 100%;
            height: 100%;
            object-fit:cover;
            object-position: center center;
        }

.col{
	display:grid;
	grid-template-columns: auto;
	gap:0px;
	margin:0;
	padding-top: 20px;
	padding-bottom: 50px;
	justify-content: center;
	align-items:center;
	z-index:3;
}

.block{
	position:relative;
	width:800px;
	height:100%;
    font-weight: 300;
	border-radius:10px;
	margin-bottom:20px;
	overflow:hidden;
	background-color:#f1f4f4;
	z-index:3;
	opacity:1;
	
}
img{
	width:600px;
	height:auto;
    border-radius: 10px;
	padding:0;
}
.img2{
	width:290px;
	height:auto;
    border-radius: 10px;
    margin: 5px;
	padding:0;

}

.text_title{
	font-size:40px;
	color:#21282a;
	text-align:center;
	padding:0;

}
.text_subtitle{
	font-size:30px;
	color:#21282a;

}
.text_body{
	font-size:18px;
	color:#21282a;
	text-align: justify;

	margin-left:100px;
	margin-right:100px;
}

        /*BACK_BUTTON*/

            /*position*/
            .back_button {
/*                margin-top:0px;
                padding-bottom:100px;*/
                margin: 0 auto;
                padding-bottom:100px;
                display:flex;
                justify-content:center;
                align-items: center;
                position:relative;

            }

            .back_button a{
                margin: 0 10 px;

                position:relative;
                display:inline-block;
                text-decoration:none;
                color:inherit;
            }

            .back_button img{
                /*img box dim*/
                width:80px;
                height:55px;
                /*button border*/
                border-radius:15px;
                border: 5px solid #1c1c1c;
            }

            .back_button_text{
                position: absolute;
                bottom:0px;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
                color:#ffffff;
                font-size: 25px;
                opacity:0;
                transition: opacity 0.3s ease-in-out;
            }

            .back_button a:hover .back_button_text{

                opacity:1; 
                color:#ffffff;
            }

            .hover_overlay{
                position:absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                width:90px;
                height:60px;
                border-radius:15px;
                background-color: rgba(0,0,0,0.3);
                opacity:0;
                transition: opacity 0.3s ease-in-out;
            }

            .back_button a:hover .hover_overlay{
                opacity:.8;
            }

/* Media Query for Smaller Screens */
  @media (max-width: 768px) {
            .block {
                width: 400px; /* width on mobile */
                height:100%;
            }
            .box{
                width: 80px;
                height: 80px;
                margin-top: 5px;
                margin-right: 3px;
                margin-left: 3px;
            }
            .text_title{
            	font-size:30px;
            }
            .text_body{
            	font-size:15px;
            	margin-left:30px;
            	margin-right:30px;
            	text-align: left
            }
            
            img{
            	width:340px;
            	height:auto;
            }
            .img2{
                width:340px;
            	height:auto;
            }
            .back_button {
                width: auto;
                height:auto;
                margin:0;


            }
}