/*                      *\
     Style for webpage
\*                      */
body {
    background: radial-gradient( 
    #2b3238, #e3cdcc,  #47545a, 
    #6e7781, #0b0b0e,  #4e404b, #7192a4,#4a6d68);
    background-image: url("/img/main_Background-Logo.jpg");
    margin: 0;
    font-family: 'Comfortaa', cursive;
}
.h_Ll{
    width: px;
    height: 120px;
    border-radius: 20px;
}
.h_Lr{
    width: 120px;
    height: 120px;
    border: inset;
    border-radius: 100%;
} 
.column {
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 150px;
    padding: 134px;
    flex-wrap: wrap;
}
.main-Logo {
    padding: 10px;
    float: right;
}
.Logo-Text {
    padding: 10px;
    float: left;
}
.row {
    border: inset;
    border-color: #f1e5ce;
    box-shadow: 15px 15px 30px #47545a, -15px -15px 30px #4e473e;
    border-radius: 30px;
    cursor: pointer;
    padding: 3px;
    display: inline;
}
.main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
}
input {
    border-radius: 20px;
    cursor: pointer;
    width: 300px;
}
.menu-social-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}
footer {
    border-width: 1%;
    border-radius: 25px;   
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    background-color: #333;
    color: #fff;
}
.lk {
    border: inset;
    border-radius: 100%;
    width: 30px; 
    height: auto;
}
/*                        *\
Style for pc website
\*                        */
@media (max-width: 768px) {
    .column {
        padding: 10px;
        gap: 20px;
    }
    .row {
        text-align: center;
    }
    #intro {
        position: fixed;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        background-color: #e3cdcc;
    }

    #intro.hidden {
        background-color: #e3cdcc;
            display: none;
    }
    
    #intro video {
        background-color: #020202;
        width: 100%;
        height: 100%;
        object-fit:scale-down;
    }
    
}
/*                        *\
Style for MB website
\*                        */
@media (max-width: 480px) {
    .h_Ll {
        border-radius: 10px;
        width: 150px;
        height: 60px;
    }
    .h_Lr {
        width: 60px;
        height: 60px;
    }
    .column {
        padding: 10px;
        gap: 10px;
    }
    .row {
        width: 100%;
        text-align: center;
    }
    input {
        border-radius: 20px;
        cursor: pointer;
        width: 200px;
    }
    .lk {
    border: inset;
    border-radius: 100%;
    width: 25px; 
    height: auto;
}
    #intro {
        position: fixed;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    .p
        {
            font-size: smaller;
        }
    #intro.hidden {
            display: none;
    }
    
    #intro video {
        width: 100%;
        height: 100%;
        object-fit:scale-down;
    }
    .menu-social-container {
        margin-right: 30px;
    }
    footer 
    {
        height: 150px;
    }
}
/*                      *\
Style for intro Animation
\*                      */
/* Full-screen overlay for the animation */
#intro 
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Hide the overlay */
#intro.hidden 
{
  display: none;
}

/* Ensure the video covers the entire screen */
#intro video 
{
  width: 100%;
  height: 100%;
  background-image: url("main_Background-Logo.jpg");
  object-fit:contain;
}
/*                      *\
style for scrollbar
\*                      */

/* Hide scrollbar on PC */
::-webkit-scrollbar {
display: none;
}

/* Hide scrollbar on Mobile (Safari and Chrome) */
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}

/* Hide scrollbar on Firefox */
html {
scrollbar-width: none;
}

/* Hide scrollbar on Edge */
::-ms-scrollbar {
width: 0;
height: 0;
}