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

.zindex_0
{
    z-index: 0;
}

.zindex_10
{
    z-index: 10;
}

.zindex_20
{
    z-index: 20;
}

.zindex_20
{
    z-index: 20;
}

.zindex_100
{
    z-index: 100;
}

.cards ul {
    list-style: none;
    padding: 0;
    margin: 20px;
}

.cards ul li {
    position: relative;
    padding-left: 14px; 
    margin-bottom: 10px;
}

.cards ul li::before {
    content: "⭐";
    position: absolute;
    left: 0;
    color: white;
    font-size: 18px;
}

.why ul
{
    list-style: none;
}

.why li{
    text-align: left !important;
}

@media (orientation: portrait)
{
    .bgHorizon{
        display : none;
    }
    .bgVertical
    {
        display: block;
    }

    .land_flex-start_port_flex_center {
    display: flex;
    align-items: center !important;
    }

    .w-31
    {
        width: 80% !important;
    }

    #main p, h1, h2, h3, h4, li{
    font-size: 4vw !important;

    }
}

@media (orientation: landscape)
{
    .bgHorizon{
        display : block;
    }
    .bgVertical
    {
        display: none;
    }
}

#ht_Video
{
    z-index: 10;
    text-align: center;
}

#ht_Video video
{
    width: 60%;
    height: auto;
    margin: 40px;
    border: 3px ridge gray;
    box-shadow: 6px 5px #80808080;
    border-radius: 20px;
}

#playVideo
{
    position: relative !important;
    left: 50%;
    top: 0%;
    transform: translate(-50% , -145%);
}



#BG , #BGVideo{
    width: 99.9%;
    height: auto;
    position: fixed;
    left: 0%;
    top: -1vh;
    filter: blur(4px);
}
#main{
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}
#main h3{
    color: white;
    font-size: 1.6vw;
    font-family: 'MainFontIt';
    z-index: 2;
    text-align: center;
}

#main h2,#main h1{
    color: white;
    font-family: 'MainFontIt';
    z-index: 2;
    text-align: center;
}

.mainService{
    height: auto;
    z-index: 2;
    border-radius: 55px;
    box-shadow: inset 0 0 20px 3px #fffdbd;
}

p, h1, h2, h3, h4, li{
    color: white;
    font-size: 1.4vw;
    font-family: 'MainFontIt';
    z-index: 2;
    text-align: center;
    line-height: 2;
    text-shadow: -1px 2px black;
}

.section 
{
    width: 95%;
    margin: 20px 0px;
}

.shadwo
{
    text-shadow: -1px 2px black;
}

.outer_box_shadow_gray_2 {
    box-shadow: 0 0 20px 10px #463c2469;
    border-radius: 50px;
}

.outer_box_shadow_gray
{
    box-shadow: 0 0 45px 20px #f5c75e69;
    border-radius: 50px;
}
.inner_box_shdow_gray
{
    box-shadow: inset 0 0 108px 20px #c7c7c78a;
    
}

.border-radius_80
{
    border-radius: 80px;
}

.border-radius_25
{
    border-radius: 25px;
}

#back_plure
{
    top: 0px;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(4, 3, 66, 0.356);
}

.land_flex-start_port_flex_center
{
    display: flex;
    align-items: flex-start;
}

#gridImages{
    width: 98%;
    display: grid;
    grid-template-columns: repeat(5 , 1fr);
    grid-template-rows: 1fr;
}

.itemGrid , .itemGrid2{
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    left: 2.5%;
}

.itemGrid2{
    grid-column: span 2;
}

.itemGrid img{
    width: 95%;
    height: auto;
}

.itemGrid2 img{
    width: 48%;
    height: auto;
}

.itemGrid p , .itemGrid2 p{
    width: 98%;
    color: white;
    font-size: 1.3vw;
    font-family: 'MainFontIt';
    text-align: center;
}

.soon{
    font-size: 2vw !important;
}

.divImage{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


@media(max-width : 1000px){
    #gridImages{
        grid-template-columns: repeat(3 , 1fr);
    }
    #main p{
        color: white;
        font-size: 2vw;
    }
    /* #main h3{
        font-size: 2.6vw;
    } */

    .mainService{
        border-radius: 25px;
    }
}


@media (max-width : 1230px)
{
    #playVideo {
        transform: translate(-50% , -135%);
    }
}


@media (max-width : 1230px)
{
    #playVideo {
        transform: translate(-50% , -115%);
    }
}

@media (max-width : 1100px)
{

    #BG, #BGVideo {
        width: auto;
        height: 120%;
    }
}

@media (max-width : 900px)
{
    #playVideo {
        transform: translate(-50% , -100%);
    }
}

@media (max-width : 800px) or (orientation : portrait)
{
    .shadwo
    {
        text-shadow: none;
    }
}

@media (max-width : 700px)
{
    #main p {
            text-shadow: none;
        }
        
    #playVideo {
        transform: translate(-50% , -90%);
    }
}

@media (max-width : 500px)
{
    #playVideo {
        width: 150px !important;
        transform: translate(-50%, -94%);
    }
}

@media (max-width : 400px)
{
    #playVideo {
        width: 150px !important;
        transform: translate(-50%, -84%);
    }
}


@media (max-width : 300px)
{
    #playVideo {
        width: 150px !important;
        transform: translate(-50%, -80%);
    }
}