@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');



*{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

body{
    background-color: #191717;
}

h2{
    font-size: 2rem;
    text-align: left;
    color: #191717;
    border-left: 5px solid #191717;
    padding-left: 10px;
    font-weight: 600;
}

h3{
    font-size: 0.9rem;
    text-align: left;
    margin-top: 1rem;
    color: #7D7C7C;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}



/* slider start */

.slider-top{
    height: 30vh !important;
    width: 100%;
    
    }
    
      /* .slide-container {
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
       }
       
       .slide {
        flex: 1 0 33.33%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #cccccc;
        font-size: 3rem;
        transition: all 1s ease;
       } */
       
       .slider-top img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(50%);
       }


        /* Top Slider End */


        /* location section start */

        .all-location-section{
            padding: 3rem;
        }


        .location-container{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }


        .location-content{
           border: 2px solid #CCC8AA;
            height: auto;
            position: relative;
            width: 30%;
        }

        .location-content:hover img{
            filter: brightness(80%);

        }


        .location-content img{
            width: 100%;
            height: 100%;
            filter: brightness(20%);

        }

        .location-content-text{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

        }

        .location-content-text h3{
            color: #CCC8AA;
            font-size: 2rem;
            text-align: center;
        }

        .location-content-text p{
            color: #fff;
            font-size: 0.8rem;
            margin-top: 0.5rem;
            text-align: center;
        }

        /* .location-content:hover {

        } */


         /* location section end */




         /* mobile  */

         @media (max-width:850px ) {

            .location-content-text h3 {
                font-size: 1rem;
            }

            .location-content-text p {
                font-size: 0.7rem;
            }

            .location-container{
                gap:1%;
            }
            .location-content{
                width: 48%;
            }

            .all-location-section{
                padding: 2rem;
            }
         }


         @media (max-width:600px ) {

            h2{
                font-size: 1.3rem;
            }
        
            h3{
                font-size: 0.8rem;
            }
         }