

.Words{
    // background-color: red;
    position: relative;
    &::after{
        position: absolute;
        top: -30%;
        left: 0;
        content: "";
        width: 15%;
        height: 180%;
        background-image: url('/public/Home/HeroBorder.svg') !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;

    }
}
.HeroSection{
    width: 100%;
    position: relative;
    display: flex;
    background: #000;
    border-bottom: 1px solid var(--white);
    padding-bottom: 120px;
    min-height: 90vh;
    // display: flex;
    // align-items: center;
    align-items: center;
    &::after{
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        content: "";
        position: absolute;
        background-image: url('/public/Home/HeroBg.png');
        background-repeat: no-repeat !important;
        background-position: right;
        background-size: cover;
    }
    a{
        scroll-behavior: smooth !important;
    }
    .scroll_down_img{
        position: absolute;
        z-index: 999;
        bottom: -35px;
        right: 50%;
        transform: translateX(50%);
        cursor: pointer;
    }
    .media_section{
        display: flex;justify-content: end; flex-direction:column;
        padding-left: 20px;
        z-index: 99999 !important;
        position: absolute;
        bottom: 0;
        // position: relative;
        p, hr{
            margin-left: -30px;
            color: var(--white);
            rotate: 90deg;
            margin-bottom: 60px;
            // position: relative;
            font-size: 18px;
        }
        hr{
            width: 100px;
            // position: relative;
            &::after {
                content: "";
                // width: 15px;height: 3px;
                border-radius: 5px;
                // position: absolute;
                background: var(--primary);
                bottom: -1px !important;
                left:0;
              }
        }
        .media_container{
            display: flex;align-items: start;justify-content: start; flex-direction: column;
            .MediaButton{
                border-color:var(--midGray);
                color: var(--midGray);
                background: transparent;
                transition: ease-in-out .3;
                img{
                    opacity: .3;
                }
                &:hover{
                    border-color:var(--white);
                    color: var(--white);
                    img{
                        opacity: 1;
                    }
                }
            }
        }
    }
    .main_text_section{
        display: flex;justify-content: center; flex-direction: column;
        height: 90%;
        padding-left: 100px;
        z-index: 999 !important;
        color: var(--white);
        position: relative;
  
        h1{
            margin-left: 8vw;
            font-size:3.8vw;
            font-weight: bold;
            z-index: 9999 !important;
          
        }
        .bottom_text_container{
            z-index: 9999;
            width: 90.5%;
            display: flex;justify-content: start;align-items: start;  flex-direction: column;
            padding-left: 15vw;
            > p{
                width: 54%;
                font-size: 1.1vw;
            }
            .button_container{
                width: 160px;

            }
            .button{
                transition: ease-in-out .4s;
            }
        }
    }

}




@media screen and (max-width:800px) {
    .HeroSection{
        // &::after{
        //     padding-bottom: 150px !important;
        //     width: 100%;
        //     // max-height: 10vh;
        //     content: "";
        //     position: absolute;
        //     background-image: url('/public/Home/HeroBg.png');
        //     background-repeat: no-repeat !important;
        //     background-size: contain !important;
        // }


        
.Words{
    // background-color: red;
    position: relative;
    &::after{
        position: absolute;
        top: -30%;
        left: 0;
        content: "";
        width: 19%;
        height: 200%;
        background-image: url('/public/Home/HeroBorder.svg') !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;

    }
}

        .main_text_section{
            img{
                width: 19vw;
            }
            h1{
                // margin-left:14vw;
                font-size:4.8vw;
            
            }
            .bottom_text_container{
                // margin-left: 20vw;
                padding-left: 21vw;
                > p{
                    width: 90%;
                    font-size: 1.6vw;
                }
                .button_container{
                    width: 140px;
                }
            }
        }
    }    
}





@media screen and (max-width:600px) {
    .HeroSection{
        width: 100%;
        border-bottom: 2px solid var(--white);
        &::after{
            background-image: url('/public/Home/HeroBgRes.png') !important;
            background-repeat: no-repeat !important;
            background-position: right;
            background-size: cover !important;
        }

        .Words{
            // background-color: red;
            position: relative;
            &::after{
                position: absolute;
                top: -50%;
                left: 0;
                content: "";
                width: 30%;
                height: 300%;
                background-image: url('/public/Home/HeroBorder.svg') !important;
                background-repeat: no-repeat !important;
                background-size: contain !important;
        
            }
        }
        


        .media_section{
            padding-left: 10px;
            p, hr{
                margin-bottom: 30px;
                font-size: 10px;
            }
            hr{
                width:85px;
                margin-bottom: 50px;
                &::after {
                    width: 15px;height: 3px;
                    border-radius: 5px;
                    left:0;
                }
            }
            .media_container{
                .MediaButton{
                    width: 20px;height: 20px;
                    font-size: 10px;
                }
            }
        }
    
        .main_text_section{
            padding-left: 50px;
            img{
                top: 40px;
                width: 87px;
            }
            h1{
                margin-left:5vw;
                font-size:5vw;
              
            }
            .bottom_text_container{
                width: 100%;
                padding-left: 30VW;
                // margin-left: 100px;
                > p{
                    width: 90%;
                    font-size: 3vw;
                }
                .button_container{
                    width: 120px;
    
                }
            }
        }
    
    }
}

