html,
body {
  margin: 0;
  
}

html{
    overflow: hidden !important;
}

.content {
  z-index: 15;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
padding: 20px;
}

.wrapper {
position: absolute;
top: 35%;
left: 25%;
width: 40vw;
transform: translate(-50%, -50%);
padding: 10px 20px;
}

.wrapper-2 {
position: absolute;
bottom: 35%;
left: 75%;
width: 40vw;
transform: translate(-50%, -50%);
padding: 10px 20px;
}
img{
width: 80%;
}

.container {
  background-image: url("../img/split-screen/painting_3.jpg");
  background-size: cover;
}
.box {
  position: relative;
  height: 100vh;

  background-image: url("../img/split-screen/garden.jpg"); 
  background-size: cover;
  clip-path: polygon(0 0, 55% 0, 35% 100%, 0 100%); 
}

.arrow-container {
position: relative;
width: 200px; 
height: 100px; 
}


.carousel-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}


.carousel-content {
text-align: center;
}

.btn-get-started {
color: white;
font-family: "Roboto", sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 32px;
border-radius: 50px;
transition: 0.5s;
line-height: 1;
margin: 10px;
animation-delay: 0.8s;
border: 2px solid white;
}

.btn-get-started:hover {
background: whitesmoke;
color: black;
text-decoration: none;
}

.btn-get-started-2 {
color: black;
font-family: "Roboto", sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 32px;
border-radius: 50px;
transition: 0.5s;
line-height: 1;
margin: 10px;
animation-delay: 0.8s;
border: 2px solid black;
}

.btn-get-started-2:hover {
background: black;
color: whitesmoke;
text-decoration: none;
}

a {
text-decoration: none;
}

.text-color-btn-1{
color: white;
}

.logo{
position: absolute;
top: 10px;
left: 10px;
width: 15vw !important;
}




@media (width <= 800px) {

    .logo-2{
        width: 50% !important;
        }

.logo{
width: 30vw !important;
}

.box {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.wrapper {
top: 25%;
left: 50%;

}

.container {
  background-image: url("../img/split-screen/painting_3_mobile.jpg");
  background-size: cover;
}

.wrapper-2 {

bottom: 25%;
left: 50%;

}
}