@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
	box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  font-family: 'Inter', sans-serif;
  position: relative;
  background-color: #FFF;
  margin:0;
}

/* --- Old Phones --- */
@media only screen and (orientation: portrait) and (max-height: 500px) {
  /* Old phones portrait */
}

@media only screen and (orientation: landscape) and (max-height: 400px) {
  /* Old phones landscape */
}

/* --- Modern Phones --- */
@media only screen and (orientation: portrait) and (max-height: 850px) {
  body::before,
  body::after {
    content: "";
	overflow: hidden;
    position: absolute;
    background-repeat: no-repeat;
	background-size: 125% auto;
    height: 25vw;
    width: 25vw;
    z-index: -1;
    pointer-events: none;
  }

  body::before {
    bottom: 0;
    left: 0;
    background-image: url("../media/rings.png");
    background-position: right bottom; 
  }

  
  body::after {
    top: 0;
    right: 0;
    background-image: url("../media/rings.png");
    background-position: left top;  
  }
	
  .main-container {
	width: 100%;
	display: flex;
	flex-direction: column;
  }

  .header {
	height: 20vh;
	width: 100%;
	padding: 0;
	margin: 0;
	display:flex;
	justify-content: center;
	align-items: center;
  }

  .logo {
	height: 10vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
  }

  .logo img {
	height: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .headersocialscontainer {
	display: none;
  }
  
  .content {
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
  }

  .maintext {
	width: 95vw;
	margin:2vh 0;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
  }

  .descriptiontext {
	width: 95vw;
	margin:2vh 0;
	font-size: 0.8750em;
	text-align: center;
	opacity: 62%;
	font-weight: 500;
  }

  .sectiontext { /*Universal section header class */
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
	margin: 1vh 0;
  }

  .details {
	width: 95vw;
  }

  .detailslist {
	display: flex;
	width: 95vw;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3vw;
	font-size: 0.8750em;
	font-weight: 500;
  }

  .detailsitem {
	width:fit-content;
	display:inline-block;
	border: 1px solid #444;
	border-radius: 16px;
	padding: 0.5vh 2.5vw;
	white-space: nowrap;
	text-align: center;
  }

  .separator {
	height:1px;
	width:95vw;
	margin: 1vh 0;
	background-color: #000;
	opacity: 20%;
  }

  .clients {
	width: 95vw;
  }

  .clientslist {
	display: flex;
	width: 95vw;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 2vw;
	gap: 3vw;
  }

  .clientlogo {
	height: 4vh;
	overflow: hidden;
	display:inline-block;
	padding: 0.5vh 2.5vw;
	align-content: center;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
  }

  .clientlogo img {
	width: fit-content;
	height:100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .contactbutton {
	width: 80vw;
	height: 7vh;
	margin: 1vh 0;
	justify-content: center;
  }  

  .contactbutton button {
	width: 100%;
	height: 100%;
	background-color: #000;
	color: #FFF;
	opacity: 90%;
	border-radius: 3.5vh;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
  }

  .scroll-indicator {
	display: none;
  }
  
  .socialscontainer {
	display: flex;
	width: 95vw;
	flex-direction: row;
	margin: 4vw 0;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	overflow: hidden;
	gap: 6vw;
  }

  .socialitem {
	height: 5vh;
	overflow: hidden;
	display:inline-block;
	align-content: center;
  }

  .socialitem img {
	height: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .backgound-end {
	display: none;
  }
}

@media only screen and (orientation: landscape) and (max-height: 480px) {
  body::before,
  body::after {
    content: "";
    overflow: hidden;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 125% auto;
    height: 25vh;
    width: 25vh;
    z-index: -1;
    pointer-events: none;
  }

  body::before {
	display: none;
  }

  
  body::after {
    top: 0;
    right: 0;
    background-image: url("../media/rings.png");
    background-position: left top;  
  }  
	
.main-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: visible;
  }

  .header {
	height: 20vh;
	width: 100%;
	padding: 0;
	margin: 0;
	display:flex;
	justify-content: center;
	align-items: center;
  }

  .logo {
	height: 15vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
  }

  .logo img {
	height: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .headersocialscontainer {
	display: none;
  }
  
  .content {
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
  }

  .maintext {
	width: 75vw;
	margin:2vh 0;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
  }

  .descriptiontext {
	width: 75vw;
	margin:2vh 0;
	font-size: 0.8750em;
	text-align: center;
	opacity: 62%;
	font-weight: 500;
  }

  .sectiontext { /*Universal section header class */
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
	margin: 1vh 0;
  }

  .details {
	width: 75vw;
  }

  .detailslist {
	display: flex;
	width: 75vw;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3vw;
	font-size: 0.8750em;
	font-weight: 500;
	margin: 2vh 0;
  }

  .detailsitem {
	width:fit-content;
	display:inline-block;
	border: 1px solid #444;
	border-radius: 16px;
	padding: 0.5vh 2.5vw;
	white-space: nowrap;
	text-align: center;
  }

  .separator {
	height:1px;
	width:95vw;
	margin: 2vh 0;
	background-color: #000;
	opacity: 20%;
  }

  .clients {
	width: 75vw;
	margin-bottom: 2vh;
	/*height: 20vh;*/
  }

  .clientslist {
	display: flex;
	width: 75vw;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 2vw;
	gap: 3vw;
  }

  .clientlogo {
	height: 8vh;
	overflow: hidden;
	display:inline-block;
	padding: 0.5vh 2.5vw;
	align-content: center;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
  }

  .clientlogo img {
	width: fit-content;
	height:100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .contactbutton {
	width: 70vw;
	height: 10vh;
	margin: 2vh 0;
	display: flex;
	justify-content: center;
	align-items: center;
  }  

  .contactbutton button {
	width: 100%;
	height: 100%;
	background-color: #000;
	color: #FFF;
	opacity: 90%;
	border-radius: 5vh;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
  }

  .scroll-indicator {
    position: absolute;
    bottom: 20px;
    left: 95%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-left: 2px solid #999;
    border-bottom: 2px solid #999;
    transform: translateX(-50%) rotate(-45deg);
    animation: bounce 1.2s infinite;
    opacity: 0.6;
  }

  @keyframes bounce {
    0%, 100% {
      transform: translateX(-50%) translateY(0) rotate(-45deg);
    }
    50% {
     transform: translateX(-50%) translateY(10px) rotate(-45deg);
    }
  }

  .socialscontainer {
	display: flex;
	width: 75vw;
	flex-direction: row;
	margin: 4vw 0;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	overflow: hidden;
	gap: 6vw;
  }

  .socialitem {
	height: 5vh;
	overflow: hidden;
	display:inline-block;
	align-content: center;
  }

  .socialitem img {
	height: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .background-end {
	width: 30vw;
    height: 25vh;
    background-image: url(../media/rings.png);
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position: -40% bottom;
    pointer-events: none;
  }
}

/* --- Tablets --- */
@media only screen and (orientation: portrait) and (min-height: 851px) and (max-height: 1200px) {
  body::before,
  body::after {
    content: "";
	overflow: hidden;
    position: absolute;
    background-repeat: no-repeat;
	background-size: 125% auto;
    height: 25vw;
    width: 25vw;
    z-index: -1;
    pointer-events: none;
  }

  body::before {
    bottom: 0;
    left: 0;
    background-image: url("../media/rings.png");
    background-position: right bottom; 
  }

  
  body::after {
    top: 0;
    right: 0;
    background-image: url("../media/rings.png");
    background-position: left top;  
  }
	
  .main-container {
	width: 100%;
	display: flex;
	flex-direction: column;
  }

  .header {
	height: 20vh;
	width: 100%;
	padding: 0;
	margin: 0;
	display:flex;
	justify-content: center;
	align-items: center;
  }

  .logo {
	height: 10vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
  }

  .logo img {
	height: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .headersocialscontainer {
	display: none;
  }
  
  .content {
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
  }

  .maintext {
	width: 95vw;
	margin:2vh 0;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
  }

  .descriptiontext {
	width: 95vw;
	margin:2vh 0;
	font-size: 0.8750em;
	text-align: center;
	opacity: 62%;
	font-weight: 500;
  }

  .sectiontext { /*Universal section header class */
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
	margin: 1vh 0;
  }

  .details {
	width: 95vw;
  }

  .detailslist {
	display: flex;
	width: 95vw;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3vw;
	font-size: 0.8750em;
	font-weight: 500;
  }

  .detailsitem {
	width:fit-content;
	display:inline-block;
	border: 1px solid #444;
	border-radius: 16px;
	padding: 0.5vh 2.5vw;
	white-space: nowrap;
	text-align: center;
  }

  .separator {
	height:1px;
	width:95vw;
	margin: 1vh 0;
	background-color: #000;
	opacity: 20%;
  }

  .clients {
	width: 95vw;
  }

  .clientslist {
	display: flex;
	width: 95vw;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 2vw;
	gap: 3vw;
  }

  .clientlogo {
	height: 4vh;
	overflow: hidden;
	display:inline-block;
	padding: 0.5vh 2.5vw;
	align-content: center;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
  }

  .clientlogo img {
	width: fit-content;
	height:100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .contactbutton {
	width: 80vw;
	height: 7vh;
	margin: 1vh 0;
	justify-content: center;
  }  

  .contactbutton button {
	width: 100%;
	height: 100%;
	background-color: #000;
	color: #FFF;
	opacity: 90%;
	border-radius: 3.5vh;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
  }

  .scroll-indicator {
	display: none;
  }
  
  .socialscontainer {
	display: flex;
	width: 95vw;
	flex-direction: row;
	margin: 4vw 0;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	overflow: hidden;
	gap: 6vw;
  }

  .socialitem {
	height: 5vh;
	overflow: hidden;
	display:inline-block;
	align-content: center;
  }

  .socialitem img {
	height: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .background-end {
	display: none;
  }
}

@media only screen and (orientation: landscape) and (min-height: 481px) and (max-height: 1000px) {
  body::before,
  body::after {
    content: "";
	overflow: hidden;
    position: absolute;
    background-repeat: no-repeat;
	background-size: 125% auto;
    height: 25vw;
    width: 25vw;
    z-index: -1;
    pointer-events: none;
  }

  body::before {
    bottom: 0;
    left: 0;
    background-image: url("../media/rings.png");
    background-position: right bottom; 
  }

  
  body::after {
    top: 0;
    right: 0;
    background-image: url("../media/rings.png");
    background-position: left top;  
  }
	
  .main-container {
	width: 100%;
	display: flex;
	flex-direction: column;
  }

  .header {
	height: 20vh;
	width: 100%;
	padding: 0;
	margin: 0;
	display:flex;
	justify-content: center;
	align-items: center;
  }

  .logo {
	height: 10vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
  }

  .logo img {
	height: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .headersocialscontainer {
	display: none;
  }
  
  .content {
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
  }

  .maintext {
	width: 95vw;
	margin:2vh 0;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
  }

  .descriptiontext {
	width: 95vw;
	margin:2vh 0;
	font-size: 0.8750em;
	text-align: center;
	opacity: 62%;
	font-weight: 500;
  }

  .sectiontext { /*Universal section header class */
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
	margin: 1vh 0;
  }

  .details {
	width: 95vw;
  }

  .detailslist {
	display: flex;
	width: 95vw;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3vw;
	font-size: 0.8750em;
	font-weight: 500;
  }

  .detailsitem {
	width:fit-content;
	display:inline-block;
	border: 1px solid #444;
	border-radius: 16px;
	padding: 0.5vh 2.5vw;
	white-space: nowrap;
	text-align: center;
  }

  .separator {
	height:1px;
	width:95vw;
	margin: 1vh 0;
	background-color: #000;
	opacity: 20%;
  }

  .clients {
	width: 95vw;
  }

  .clientslist {
	display: flex;
	width: 95vw;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 2vw;
	gap: 3vw;
  }

  .clientlogo {
	height: 4vh;
	overflow: hidden;
	display:inline-block;
	padding: 0.5vh 2.5vw;
	align-content: center;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
  }

  .clientlogo img {
	width: fit-content;
	height:100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .contactbutton {
	width: 80vw;
	height: 7vh;
	margin: 1vh 0;
	justify-content: center;
  }  

  .contactbutton button {
	width: 100%;
	height: 100%;
	background-color: #000;
	color: #FFF;
	opacity: 90%;
	border-radius: 3.5vh;
	font-size: 1.4em;
	text-align: center;
	font-weight: 500;
  }

  .scroll-indicator {
	display: none;
  }
  
  .socialscontainer {
	display: flex;
	width: 95vw;
	flex-direction: row;
	margin: 4vw 0;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	overflow: hidden;
	gap: 6vw;
  }

  .socialitem {
	height: 5vh;
	overflow: hidden;
	display:inline-block;
	align-content: center;
  }

  .socialitem img {
	height: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .background-end {
	display: none;
  }
}

/* --- Desktops and wide tablets--- */
@media only screen and (min-width: 1025px) {
  body {
	overflow: hidden;
  }
	
  body::before,
  body::after {
    content: "";
	overflow: hidden;
    position: absolute;
    background-repeat: no-repeat;
	
    z-index: -1;
    pointer-events: none;
  }

  body::before {
    bottom: 0;
    left: 0;
	width: 30vw;
	height: 100vh;
	background-size: 150% auto;
    background-image: url("../media/rings.png");
    background-position: right bottom; 
  }

  
  body::after {
    top: 25%;
    right: -30%;
	width: 100vh;
	height: 30vw;
	transform: rotate(90deg);
	background-size: 70% auto;
    background-image: url("../media/rings.png");
    background-position: left bottom;  
  }
	
  .main-container {
	width: 100%;
	display: flex;
	flex-direction: column;
  }

  .header {
	height: 20vh;
	width: 100%;
	padding: 2vh;
	margin: 0;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	position: relative;
  }

  .logo {
	height: 10vh;
	justify-content: left;
	align-items: center;
	overflow: hidden;
  }

  .logo img {
	height: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }

  .headersocialscontainer {
	height: 4vh;
	display: flex;
	position: absolute;
	top: 5vh;
	right: 5vw;
	align-items: center;
	justify-content: center;
	gap: 2vh;
	z-index: 1;
  }

  .socialitem {
	height: 4vh;
	overflow: hidden;
	display: flex;
	align-content: center;
  }

  .socialitem img {
	height: 100%;
	object-fit: contain;
	margin: 0;
	padding: 0;
	display: block;
  }
  
  .content {
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
  }

  .maintext {
	width: 80vw;
	margin:4vh 0;
	font-size: 4em;
	text-align: center;
	font-weight: 500;
  }

  .descriptiontext {
	width: 80vw;
	margin:2vh 0;
	font-size: 1.375em;
	text-align: center;
	opacity: 62%;
	font-weight: 500;
  }

  .sectiontext { /*Universal section header class */
	display: none;
  }

  .details {
	display: none;
  }

  .detailslist {
	display: none;
  }

  .detailsitem {
	display: none;
  }

  .separator {
	display: none;
  }

  .clients {
	display: none;
  }

  .clientslist {
	display: none;
  }

  .clientlogo {
	display: none;
  }

  .clientlogo img {
	display: none;
  }

  .contactbutton {
	width: 26vw;
	height: 7vh;
	margin: 2vh 0;
	justify-content: center;
  }  

  .contactbutton button {
	width: 100%;
	height: 100%;
	background-color: #000;
	color: #FFF;
	opacity: 90%;
	border-radius: 3.5vh;
	font-size: 1.75em;
	text-align: center;
	font-weight: 500;
  }

  .scroll-indicator {
	display: none;
  }
  
  .socialscontainer {
	display: none;
  }

  /* socialitem classes are moved to header */

  .background-end {
	display: none;
  }
}