.section-2 { 
	width: 100vw; 
	height: 100vh; 
	position: relative; 
	overflow: hidden; 
	background: radial-gradient( farthest-corner at 0% 0%, rgb(28,181,224) 0%, rgb(0,0,70) 100% ); 
}

.section-2::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: 
	linear-gradient(to bottom, 
		rgba(0,94,138,0.9) 0%, 
		rgba(28,181,224,0.2) 40%,
		rgba(30,186,214,0) 100%);
}

.section-2::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
   		rgba(0,84,124,0.30) 0%,
   		rgba(0,181,224,0) 10%, 
   		rgba(0,0,0,0.00) 80%,
      	rgba(0,0,0,0.10) 100%);
}

.ocean-left {
	z-index: 3;
	width: 30vw;
	height: var(--x999);
	position: absolute;
	top: 0;
	left: 200px;
	background: rgba(0,0,0,0);
}

.ocean-right {
	z-index: 3;
	width: 30vw;
	height: var(--x999);
	position: absolute;
	top: 0;
	right: 200px;
	background: rgba(0,0,0,0);
}

.vignette-2 {
	z-index: 4;
	width: 100vw;
	height: 100vh;
	position: absolute;
	box-shadow: 0 0 var(--x300) rgba(25,50,75,0.5) inset;
}

.frame-0 {
	position: relative;
	top: 63px;
	left: 50%; 
	transform: translateX(-50%);
	margin: 0;
	padding: 0;
	z-index:10;
	width: 1120px;
	height: 700px;
	border-radius: 78px;
	box-shadow:
		0 0 5px rgba(0,0,0,0.25),
		0 10px 10px rgba(0,0,0,0.15),
		0 15px 15px rgba(0,0,0,0.15),
		0 20px 20px rgba(0,0,0,0.15);

	grid-template-columns: 964px;
	grid-template-rows: 544px;
}

.frame-0::before {
	pointer-events: none;
	content: "";
  	inset: 0;
  	position: absolute;
 	border-radius: inherit;
	background: rgba(218,192,160,0.20);
  	backdrop-filter: blur(2px);
	box-shadow:
		0 0 5px  rgba(0,0,0,0.15) inset,
		0 0 10px rgba(33,50,75,0.15) inset,
		0 0 20px rgba(33,50,75,0.15) inset,
		0 0 40px rgba(33,50,75,0.15) inset,
		0 0 60px rgba(33,50,75,0.15) inset;

	/* Safari, Chrome */
	-webkit-mask: linear-gradient(#fff 0 0), linear-gradient(#000 0 0);
	-webkit-mask-size: 100% 100%, calc(100% - 156px) calc(100% - 156px);
	-webkit-mask-position: center, center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-composite: xor;
	/* Firefox */
	mask: linear-gradient(#fff 0 0), linear-gradient(#000 0 0);
	mask-size: 100% 100%, calc(100% - 156px) calc(100% - 156px);
	mask-position: center, center center;
	mask-repeat: no-repeat;
	mask-composite: exclude;
}

.frame-1 {
	width: 964px;
	height: 544px;
	border: 1px solid var(--frame-out);
	grid-template-columns: 962px;
	grid-template-rows: 542px;
}

.frame-2 {
	width: 962px;
	height: 542px;
	border: 1px solid var(--frame-in);
	grid-template-columns: 960px;
	grid-template-rows: 70px 50px 420px;
}

.frame-2a1 {
	width: 960px;
	height: 70px;
	border: 1px solid var(--frame-in);
	grid-template-columns: 958px;
	grid-template-rows: 68px;
}

.frame-2a2 {
	width: 958px;
	height: 68px;
	border: 1px solid var(--frame-out);
	grid-template-columns: 956px;
	grid-template-rows: 66px;
}

.inside-2a2 {
	box-sizing: border-box;
  	background: linear-gradient(to bottom, rgba(66, 59, 90, 0.20), rgba(33, 50, 75, 0.50));
    	overflow: hidden;

	width: 956px;
	height: 66px;
	
	display: grid;
	place-items: center;

	font-family: 'Inter Regular';
	font-size: 42px;
	letter-spacing: 0.02em;
	font-weight: normal;
	text-shadow:
        	0 0   1px rgba(0, 0, 0, 0.10),
        	0 1px 1px rgba(0, 0, 0, 0.90),
        	0 2px 2px rgba(0, 0, 0, 0.70),
        	0 4px 4px rgba(0, 0, 0, 0.15);
	color: rgba(235, 221, 204, 0.88);
	box-shadow: 0 0 10px rgba(0,0,0,0.30) inset;
}

.inside-2b {
	width: 960px;
	height: 50px;
	grid-template-columns: 240px 240px 240px 240px;
	grid-template-rows: 50px;
}

.frame-2ba1 {
	width: 240px;
	height: 50px;
	border: 1px solid var(--frame-in);
	grid-template-columns: 238px;
	grid-template-rows: 48px;
}

.frame-2ba2 {
	width: 238px;
	height: 48px;
	border: 1px solid var(--frame-out);
	grid-template-columns: 236px;
	grid-template-rows: 46px;
}

.inside-2ba2 {
	width: 236px;
	height: 46px;
}

.frame-2bb1 {
	width: 240px;
	height: 50px;
	border: 1px solid var(--frame-in);
	grid-template-columns: 238px;
	grid-template-rows: 48px;
}

.frame-2bb2 {
	width: 238px;
	height: 48px;
	border: 1px solid var(--frame-out);
	grid-template-columns: 236px;
	grid-template-rows: 46px;
}

.inside-2bb2 {
	width: 236px;
	height: 46px;
}

.frame-2bc1 {
	width: 240px;
	height: 50px;
	border: 1px solid var(--frame-in);
	grid-template-columns: 238px;
	grid-template-rows: 48px;
}

.frame-2bc2 {
	width: 238px;
	height: 48px;
	border: 1px solid var(--frame-out);
	grid-template-columns: 236px;
	grid-template-rows: 46px;
}

.inside-2bc2 {
	width: 236px;
	height: 46px;
}

.frame-2bd1 {
	width: 240px;
	height: 50px;
	border: 1px solid var(--frame-in);
	grid-template-columns: 238px;
	grid-template-rows: 48px;
}

.frame-2bd2 {
	width: 238px;
	height: 48px;
	border: 1px solid var(--frame-out);
	grid-template-columns: 236px;
	grid-template-rows:46px;
}

.inside-2bd2 {
	width: 236px;
	height: 46px;
}

.frame-2c1 {
	width: 960px;
	height: 420px;
	border: 1px solid var(--frame-in);
	grid-template-columns: 958px;
	grid-template-rows: 418px;
}

.frame-2c2 {
	width: 958px;
	height: 418px;
	border: 1px solid var(--frame-out);
	grid-template-columns: 956px;
	grid-template-rows: 416px;
}

.inside-2c2 {
	position: relative;
	box-sizing: border-box;
  	background: transparent;
    	overflow: hidden;
  	width: 956px;
  	height: 416px;
}