html,

        body {

            margin: 0;

            padding: 0;

            overflow-x: hidden;

            height: 100%;

        }



        .office-splash {

            position: relative;

            overflow: hidden;

        }



        .office-splash ul {

            display: flex;

            justify-content: center;

            padding: 0;

            list-style: none;

            margin: 0;

        }



        .office-splash ul li {

            position: relative;

            width: 50%;


        }



        .office-splash img {

            width: 100%;

            height: auto;

        }



        .office-splash ul li a::after {

            content: "";

            position: absolute;

            inset: 0;

            background-color: rgba(0, 0, 0, 0.5);

            z-index: 0;

            transition: background-color 0.3s;

        }



        .office-splash ul li:hover a::after {

            background-color: rgba(0, 0, 0, 0.7);

        }



        .office-splash-container {

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            text-align: center;

            will-change: transform;

            backface-visibility: hidden;

            z-index: 3;

        }



        .office-splash-container .splash-page-title {

            font-size: 62px;

            font-weight: 400;

            font-family: 'Playfair Display', serif;

            color: #fff;

            letter-spacing: 5px;

            text-align: center;

        }



        .office-splash-container .ViewAllBlock {

            width: 100%;

            opacity: 0;

            transition: all 0.5s ease;

        }



        .ViewAllBlock .readmore {
            width: 50%;
            margin: 20px auto 0;
			color: #fff;
			border: 1px solid #bda371;
			padding: 10px;
			&:hover{
				color: #fff;
			}
		}




        .office-splash ul li:hover .ViewAllBlock {
            opacity: 1;
            transition: all 0.5s ease;
        }



        figure {

            margin: 0 !important;

        } 



         .text {

            display: block;


            margin-top: -30px;

        }



        .office-splash-container .Bon-Vivant-fonts {

            margin-left: -230px;

        } 



 

        @media only screen and (max-device-width: 480px) {

            .office-splash ul {

                flex-direction: column;

            }



            .office-splash-container .ViewAllBlock {

                opacity: 1;

                width: 100%;

            }



            .ViewAllBlock .readmore {

                width: 100%;

            }



            .office-splash-container .splash-page-title {

                font-size: 30px;

            }



            .text {

                display: block;


                margin-top: -12px;

            }



            .office-splash-container .Bon-Vivant-fonts {

                margin-left: -140px;

        }





      

            .office-splash ul li {

                width: 100%;

            }








        }