/* Reset box-sizing and set background color for the entire document */
* {
    box-sizing: border-box;
    background-color: #FFDDD2;
}
main{
    height:100%;
    width:100%;
}
/* Styling for the image box */
.img-box {
    display: grid;
    justify-items: center; /* Center the image horizontally */
    background-color: white;
    border-radius: 15px;
    box-shadow: 5px 7px lightgray;
}

/* Set the height of the header image */
#head-img {
    height: 200px;
}

/* Styling for the container holding the title and subtitle */
.title-cont {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    justify-items: center; /* Center the title and subtitle horizontally */
    align-items:center ;
    padding: 15px;
    margin-top: 12px;
}

/* Styling for the main title */
.title {
    text-align: center;
    border: solid 2px black;
    border-radius: 15px;
    box-shadow: 5px 5px gray;
    padding: 5px 50px; /* Padding for left and right sides */
    color: #E29579;
    background-color: black;
}

/* Styling for the subtitle */
.sub-title {
    text-align: center;
    max-width: fit-content;
    background-color: white;
    border: solid 2px black;
    padding: 5px 25px; /* Padding for left and right sides */
    box-shadow: 5px 5px gray;
    border-radius: 5px;
}

.full-box {
    height: fit-content;
    width:99%;
    position: absolute;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 700px);
    justify-content: center;
    padding-bottom: 50px;
}

/* Styling for the container holding the video title and video */
.vid-cont {
    position: relative;
    right: 100px;
    width: fit-content;
    display: flex; /* Use flexbox */
    flex-direction: column; /* Arrange items vertically */
    align-items: center;
    justify-content: space-evenly; /* Center items horizontally */
    margin: 7px;
    padding: 5px;
    /* position: relative; */
}
.vid-title-container {
    background-color: #E29579;
    border: solid 2px black;
    border-radius: 5px;
    display: flex;
   flex-direction: column;
    border: solid black 2px;
    width:600px;
    min-width: fit-content;
    cursor: pointer; /* Change cursor to a pointer on hover */
    transition: border-radius 0.7s, background-color 0.7s, transform 0.7s, padding 0.7s, border-radius 0.7s; /* Transition for padding and border-radius */
}
.video-icon{
    max-width: 100px;
    border-radius: 25px;
}

/* Styling for the video title */
.vid-title-container > .vid-title {
    text-align: center;
    width: fit-content;
    border-radius: 15px;
    padding: 10px 25px; /* Adjusted padding */
    cursor: pointer; /* Change cursor to a pointer on hover */
    
}

/* Styling for the video title and its container on hover */
.vid-title-container:hover, .vid-title:hover {
    background-color: #21757D;
    color: #E29579;
}
.vid-title:hover{
    text-decoration: underline;
}
.vid-title-container:hover {
    box-shadow: 5px 5px #E29579;
    z-index: 1;
    border-radius: 15px;
    padding: 10px 50px;
    transform: translateY(-20px) scale(1.1); /* Move the element up by 10px */
}
.vid-title{
    position: relative;
    background-color: inherit;
    width: fit-content;
    margin-left: 100px;
}
.vid-title + .vid-title {
    margin-top: 10px; /* Adjust the margin between elements */
}
.img-title{
    background-color: inherit;
    display: flex;
    flex-direction: row;
}
.vid-descript {
    display:none;
    background-color: white;
    border: solid black 1px;
    border-radius: 15px;
    padding: 5px;
    grid-column: 2;
    color:black;
    font-size: 18px;
    transition: display 0.8s;
}
.vid-title-container:hover .vid-descript {
    display: block;

}


.vid {
    position: relative;
    border: solid #E29579 2px;
    border-radius: 15px;
    max-width: 700px; /* Set max-width as needed */
    width: 100%; /* Ensure video fills its container */
    box-shadow: 7px 5px gray;
    display: none;
    z-index: 1;

}

.ghl-box{
    display:grid;
    justify-content: center;
}
.ghl-link{
    position: fixed;
    bottom: 0;
    z-index: 1;
    right: 0;
    background-color: #E29579;
    border-radius: 5px;
    border: solid black 2px;
    font-size: larger;
    transition: 0.7s;
}
.ghl-link:hover{
    background-color: aqua;
    box-shadow: 5px 5px #E29579;
}
.ghl-text{
    background-color: #E29579;
    padding:12px;
    margin:0px;
    transition: 0.7s;
}
.ghl-text:hover{
    color: red;
    background-color: aqua;
    padding:25px;
    
}
.footer{
    background-color: white;
    display: grid;
    justify-content: center;
    justify-self: center;
    border: solid black 1px;
    position: fixed;
    bottom: 0;
    margin: -10px;
    width: 100%;
    bottom: 0;
    right: -10px;
}
.copyright{
    background-color: white;
}
@media (max-width : 2000px) {
    .vid-cont:nth-child(odd) {
        width: 45vw;
        margin-left: 0px;
       
    }
    .vid-cont:nth-child(even)  {
        width: 45vw;
        margin-left: 0;
        
    }
}

@media (max-width: 1500px) {
    .full-box {
        grid-template-columns: 500px ; /* Switch to a single column layout */
        height:fit-content;
        justify-content: center;
    }
    .vid-cont:nth-child(odd) .vid-box {
        width: 700px;
        /* margin-left: 300; */
    }
    
    .vid-cont:nth-child(even) .vid-box {
        width: 700px; /* Adjust width for responsiveness */
        /* margin-left: 300; */
    }
    .vid{
        width: 700px;
    }
    
}
@media (max-width: 1080px) {
    .vid-cont:nth-child(odd) .vid-box {
        width: 600px;
        margin-left: 400;
    }
    
    .vid-cont:nth-child(even) .vid-box {
        width: 600px;
        margin-left: 400;
    }
    .vid{
        width: 600px; /* Adjust width for responsiveness */
    }
    
}
@media (max-width: 900px) {
    .full-box{
        justify-content: end;
    }
    
}
@media (max-width: 720px) {
    .vid-title-container{
        width:400px;
        padding:0;
        flex-shrink: 1;
        margin-left: 250px;
    }
    
    .vid-cont:nth-child(odd) .vid-box {
        /* width: 500px; */
        margin-left: 350;
    }
    
    .vid-cont:nth-child(even) .vid-box {
        /* width: 500px; */
        margin-left: 350;
    }
    .vid{
        width: 500px;  /* Adjust width for responsiveness */
    }
    .vid-title{
        padding:0;
        margin-left: 35px;
        font-size: 16px;
        object-fit: contain;
    }
    
}
@media (max-width: 500px) {
    .vid-title-container{
        margin-left: 520px;
    }
    
    .vid-cont:nth-child(odd) .vid-box {
        width: 350px;
        margin-left: 400;
    }
    
    .vid-cont:nth-child(even) .vid-box {
        width: 350px;
        margin-left: 400;
    }
    .vid{
        width: 350px;  /* Adjust width for responsiveness */
    }
    /* .vid-title {
        width:350px;
    } */
}