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

html,body{
    width: 100%;
    height: 100%;
}

#main{
    height: 100%;
    width: 100%;
    /* background-color: #dadada; */
    display: grid;
    grid-template-columns: 25% 25% 50%;
    grid-template-rows: 26% 56% 18% ;
}

#square{
    height: 20px;
    width: 20px;
    rotate: 45deg;
    background-color: black;
}
#left-top-left{
 /* background-color: crimson; */
 padding: 40px;
}

#left-top-right h5{
    font-size: 18px;
    font-weight: 500;
}
#left-top-right h4{
    margin-top: 10px;
    margin-bottom: 80px;
    font-size: 20px;
    font-weight: 500;
}
#left-top-right{
/* background-color: blueviolet; */
justify-self: right;
padding: 30px;
text-align: right;
}

#left-center h1{
    font-size: 7vw;
    text-transform: uppercase;
    line-height: 6vw;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
}

#left-center h1:nth-child(2n){
    text-align: center;
}

#left-center{
/* background-color: royalblue; */
grid-column: 1 / 3;
padding: 40px;
}

#left-bottom p{
    width: 50%;
    font-size: 1.10vw;
}

#left-bottom{
padding: 40px;
/* background-color: chartreuse; */
grid-column: 1 / 3;
}

#right video{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 10px;
}

#right{
    /* background-color: burlywood; */
    grid-column: 3;
    grid-row: 1 / 4;
    padding: 40px;
padding-right: 150px;
}

#arrow{
    position: absolute;
    top: 50%;
    left: 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: orangered;;
    padding: 10px;
    color: white;
    border-radius: 50%;
    transform: translate(-50% , -50%);

}

#arrow  i{
    font-size: 100px;
    font-weight:100;
}

#search{

    position: absolute ;
    right: 2.5%;
    top: 4%;
    transform: scaleX(-1);
    font-size: 30px;
}

@media (max-width : 600px){
    #main{
        grid-template-columns: 50% 50%;
        grid-template-rows: 60px 30% 10% ;
    }

    #square{
        height: 15px;
        width: 15px;
    }
    #left-top-left{
     padding: 20px;
    }
    
    #left-top-right h5{
        display: none;
    }
    #left-top-right h4{
        display: none;
    }
    #left-top-right{
    /* background-color: blueviolet; */
    justify-self: right;
    padding: 15px;
    text-align: right;
    }
    
    #left-center h1{
        font-size:14vw;
        text-transform: uppercase;
        line-height: 12vw;
        font-weight: 500;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    #left-center h1:nth-child(2n){
        text-align: right;
    }
    
    #left-center{
    padding:10px 20px;
    }
    
    #left-bottom p{
        width: 100%;
        font-size: 12px;
    }
    
    #left-bottom{
    padding: 0px 20px;
    /* background-color: chartreuse; */
    grid-column: 1 / 3;
    }

    #right video{
        height: 45vh;
        object-fit: cover;
        border-radius: 10px;
        }

    #right{
        grid-column: 1 / 4;
        grid-row: 4;
        padding: 20px;
        padding-right: 20px;
    }

    #arrow{
        top: 48%;
        left: 50%;
        padding: 5px;
        transform: translate(-50% , -50%) rotate(90deg);
    
    }
    
    #arrow  i{
        font-size: 20px;
        font-weight:100;
    }
    
    #search{
        right: 5%;
        top: 2%;
       
    }
    
}