/* =====================================
GLOBAL RESET
===================================== */

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

html,body{
height:100%;
width:100%;
font-family:"Noto Sans Tamil",sans-serif;
overflow:hidden;
}


/* =====================================
BACKGROUND
===================================== */

body{
background-image:url('../images/Background.png');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:100vh;
}


/* dark overlay */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.25);
z-index:-1;
pointer-events:none;
}


/* =====================================
LANDSCAPE ROTATE MESSAGE
===================================== */

#rotate-message{
position:fixed;
inset:0;
display:none;
z-index:9999;
background:#000;
color:#fff;

justify-content:center;
align-items:center;
flex-direction:column;
text-align:center;
padding:20px;
}

.rotate-icon{
width:120px;
margin-bottom:15px;
}

#rotate-message p{
font-size:22px;
font-weight:bold;
}

/* portrait block */

@media (orientation:portrait){

#rotate-message{
display:flex;
}

.main-wrapper{
display:none;
}

}


/* =====================================
INDEX PAGE BUTTON ROW
===================================== */

.button-row{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
margin:20px;
}


/* icons */

.btn-icon2,
.btn-icon3{
width:140px;
height:auto;
}


/* =====================================
CARTOON GREEN BUTTON
===================================== */

.button-container,
.button-container2{

display:flex;
align-items:center;
justify-content:center;

padding:14px 30px;

border-radius:60px;
cursor:pointer;

background:linear-gradient(
to bottom,
#c8ff7a 0%,
#b8f26c 40%,
#a8e45d 100%
);

border:3px solid #5a8f2c;

box-shadow:
0 8px 0 #3f6f1e,
inset 0 3px 0 rgba(255,255,255,0.6);

transition:transform .15s ease,
box-shadow .15s ease;
}

.button-container:hover,
.button-container2:hover{
transform:translateY(-2px);
box-shadow:
0 10px 0 #3f6f1e,
inset 0 3px 0 rgba(255,255,255,0.6);
}

.button-container:active,
.button-container2:active{
transform:translateY(6px);
box-shadow:
0 2px 0 #3f6f1e,
inset 0 3px 0 rgba(255,255,255,0.6);
}


/* button text */

.btn-text{
font-size:24px;
font-weight:700;
color:#000;
text-align:center;
}


/* =====================================
VIDEO THUMBNAIL PAGE
===================================== */

.video-row{

display:flex;
justify-content:center;
align-items:center;
gap:25px;

margin-top:80px;

flex-wrap:wrap;

}


/* thumbnail container */

.video-thumb-container{

display:flex;
flex-direction:column;
align-items:center;
position:relative;

}


/* title image */

.title-img{

width:260px;
margin-bottom:10px;

animation:bounceLoop 2s infinite ease-in-out;

}

@keyframes bounceLoop{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-8px);
}

}


/* video thumbnail */

.video-thumbnail{

width:340px;
border-radius:15px;

cursor:pointer;

border:4px solid #000;

box-shadow:0 5px 15px rgba(0,0,0,0.5);

transition:transform .3s, box-shadow .3s;

}

.video-thumbnail:hover{

transform:scale(1.08);

box-shadow:0 10px 25px rgba(0,0,0,0.7);

}


/* play button overlay */

.play-btn{

position:absolute;

top:60%;
left:50%;

width:70px;
height:70px;

background:url('../images/play-button-animation.gif') center no-repeat;
background-size:contain;

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

z-index:10;
cursor:pointer;

}


/* =====================================
VIDEO MODAL
===================================== */

.modal{

display:none;

position:fixed;

top:0;
left:0;
right:0;
bottom:0;

background:#bab9b92f;

justify-content:center;
align-items:center;

z-index:999;

}

.modal-content{
position:relative;
}

.modal video{

width:900px;
max-width:95vw;

border-radius:15px;

}

.close-btn{

position:absolute;

top:-18px;
right:-18px;

background:red;
color:#fff;

border:none;

border-radius:50%;

font-size:22px;

width:40px;
height:40px;

cursor:pointer;

}


/* =====================================
BOTTOM LEFT NAVIGATION BUTTONS
===================================== */

.bottom-left-buttons{

position:fixed;

bottom:20px;
left:20px;

display:flex;
flex-direction:column;

z-index:1000;

}

.bottom-left-buttons img{

width:120px;
height:120px;

object-fit:contain;

cursor:pointer;

transition:transform .2s;

}

.bottom-left-buttons img:hover{
transform:scale(1.08);
}


/* =====================================
RESPONSIVE DESIGN
===================================== */


/* Laptop */

@media (max-width:1400px){

.btn-icon2,
.btn-icon3{
width:120px;
}

.btn-text{
font-size:22px;
}

.video-thumbnail{
width:300px;
}

}


/* Tablet */

@media (max-width:1024px){

.btn-icon2,
.btn-icon3{
width:100px;
}

.btn-text{
font-size:20px;
}

.video-thumbnail{
width:260px;
}

.title-img{
width:220px;
}

}


/* Mobile Landscape */

@media (max-width:768px){

.btn-icon2,
.btn-icon3{
width:80px;
}

.btn-text{
font-size:18px;
}

.button-container{
padding:10px 22px;
}

.video-thumbnail{
width:220px;
}

.bottom-left-buttons img{
width:90px;
height:90px;
}

.play-btn{
  width: 48px !important;
  height: 48px !important;
}
}


/* Small mobile */

@media (max-width:480px){

.btn-icon2,
.btn-icon3{
width:65px;
}

.btn-text{
font-size:16px;
}

.button-container{
padding:8px 18px;
}

.video-thumbnail{
width:190px;
}

.title-img{
width:170px;
}

.play-btn{
  width: 32px !important;
  height: 32px !important;
}

}