.section-4 { 
	width: 100vw;
	height: 100vh;
	position: relative; 
	overflow: hidden;
	background: url("images/bg4.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.section-4::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,44,69,1) 0%, rgba(0,44,69,0) 35% );
}

.section-4::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(farthest-corner at 50% 55%,
      rgba(0,0,0,0.00) 55%,
      rgba(0,0,0,0.28) 100%),
    linear-gradient(to bottom,
      rgba(0,0,0,0.00) 55%,
      rgba(0,0,0,0.25) 100%);
}

.sand-left {
	z-index: 3;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	height: var(--x600);
	width: 20vw;
	background: rgba(0,0,0,0);
}

.sand-right {
	z-index: 3;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	height: var(--x600);
	width: 10vw;
	background: rgba(0,0,0,0);
}

.sec4box {
	z-index:10;
	position: absolute;
	box-sizing: border-box;
	top: var(--x78);
	left: 50%;
	transform: translateX(-70%);
	width: calc( ( var(--x630) / 3 ) * 4 );
	height: var(--x630);
	border-radius: var(--x78);
    overflow: hidden;
  	background: rgba(218,192,160,0.30);
  	backdrop-filter: blur(var(--x20));
  	border: var(--x1) solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 var(--x5) var(--x20) rgba(0,0,0,0.3),
		0 var(--x5) var(--x30) rgba(0,0,0,0.3),
        0 0 var(--x50) rgba(0,0,0,0.25) inset;
	font-family: 'Inter Regular';
	font-size: var(--x18);
	line-height: var(--x28);
	letter-spacing: 0.02em;
	font-weight:normal;
    text-align: center;
	text-shadow:
        0 var(--x1) var(--x1) rgba(0, 0, 0, 0.80),
        0 var(--x2) var(--x2) rgba(0, 0, 0, 0.60);
	color: rgba(235, 221, 204, 1);
}