/* #region Body & Fonts*/

@font-face {
font-family: "Roslindale-DeckNarrowBold-Testing";
src: url("./fonts/Roslindale-DeckNarrowBold-Testing.woff") format("woff");
}

::-webkit-scrollbar {
display: none;
}

html.has-scroll-smooth{overflow:hidden}html.has-scroll-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.has-scroll-smooth body{overflow:hidden}.has-scroll-smooth [data-scroll-container]{min-height:200vh}.c-scrollbar{position:absolute;right:0;top:0;width:11px;height:100%;transform-origin:center right;transition:transform .3s,opacity .3s;opacity:0}.c-scrollbar:hover{transform:scaleX(1.45)}.c-scrollbar:hover,.has-scroll-dragging .c-scrollbar,.has-scroll-scrolling .c-scrollbar{opacity:1}.c-scrollbar_thumb{position:absolute;top:0;right:0;z-index:999999;background-color:#000;opacity:.5;width:7px;border-radius:10px;margin:2px;cursor:-webkit-grab;cursor:grab}.has-scroll-dragging .c-scrollbar_thumb{cursor:-webkit-grabbing;cursor:grabbing}

html.has-scroll-smooth 
{
overflow: hidden;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;  
/* backface-visibility: hidden;
transform: translateZ(0); */
}



body  {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}

/* #endregion */

/* #region Home Page*/


.home-page-content {
background-image: linear-gradient(#432967, #782D65,#C3305D,#FD9367,#FDCD83,#cabb9e,#895c37,#895c37);
height:400vh;
width: 100vw;
position: fixed;
overflow-x: hidden;
margin: 0;
}

@media only screen and (max-width: 600px) {
.home-page-content {
background-image: linear-gradient(#432967, #782D65,#C3305D,#FD9367,#FDCD83,#cabb9e,#895c37,#895c37);
height:380vh;
width: 100vw;
position: absolute;
overflow-x: hidden;
margin: 0;

}
}

.home-page-sect-one {
position: relative;
width: 100%;
height:400vh;
margin: 0;

}

@media only screen and (max-width: 600px) {
.home-page-sect-one {
position: relative;
width: 85vw;
height:400vh;
top: 2rem;

}
}
.home-page-sect-one-header {
position: absolute; 
/* left: 5%; */
top: 0.5%;
width: 100vw;
height: 400vh;
overflow: hidden;
/* background-color: #FD9367; */
/* vertical-align: top; */
}

@media only screen and (max-width: 600px) {
.home-page-sect-one-header {
position: absolute;
/* left: 5%; */
top: 10vh;
width: 100vw;
height: 250vh;
overflow: hidden;

}
}

.home-page-sect-one-header h1 {
font-size: 35vh;
line-height: 0.75;
color: #dadada;
width: 80%;
height: 100%;
left: 3.25rem;
letter-spacing: -0.05em;
/* display: none; */
position: absolute;

}

@media only screen and (max-width: 600px) {
.home-page-sect-one-header h1 {
font-size: 5.5rem;
line-height: 4.5rem;
color: #dadada;
width: 85%;
height: 100%;
left: 1rem;
letter-spacing: -0.05em;
/* display: none; */
}
}

.home-page-sect-one-introP {
position: absolute;
top: 80rem;
height: 100vh;
width: 80%;
left:8rem;
color: #ffffff;
text-align: center;
font-size: 2.5rem;
line-height: 2.5rem;
}

@media only screen and (max-width: 600px) {
.home-page-sect-one-introP {
position: absolute;
top: 50rem;
/* height: 100vh; */
width: 100%;
left:1.65rem;
color: #ffffff;
text-align: center;
font-size: 2.5rem;
line-height: 2.5rem;

}
}

.moon {
position: fixed;
left: -2%;
top: -3%;
width: 150%;
height: auto;
}

@media only screen and (max-width: 600px) {
.moon {
position: fixed;   
top: -0.5%;
width: 300%;
height: auto;
left: -82%;
/* pointer-events: none; */
/* display: none; */
}
}

.cloud2 {
position: fixed;
left: 8%;
top: 1%;
width: 120%;
height: auto;
}

@media only screen and (max-width: 600px) {
.cloud2 {
position: fixed;   
top: 1.25%;
width: 250%;
height: auto;
left: -25%;
pointer-events: none;
}
}   

.cloud3 {
position: fixed;
left: -98%;
top: 40%;
width: 180%;
height: auto;

}

@media only screen and (max-width: 600px) {
.cloud3  {
position: absolute;   
top: 72%;
max-width: 315px;
height: auto;
left: -5%;
pointer-events: none;
}
}   

.cloud4 {
position: fixed;
left: 0%;
top: 25%;
width: 100%;
height: auto;
}

@media only screen and (max-width: 600px) {
.cloud4 {
position: fixed;   
top: 7.25%;
width: 180%;
height: auto;
left: -55%;
pointer-events: none;
}
}           

.cloud5 {
position: fixed;
left: 0%;
top: 60%;
width: 150%;
height: auto;
}

@media only screen and (max-width: 600px) {
.cloud5 {
position: absolute;   
top: 82%;
max-width: 315px;
height: auto;
left: -5%;
pointer-events: none;
}
} 

/* #endregion */

/* #region Desktop Navbar*/

/* #region Home Page Nav */	
@media only screen and (min-width:768px) {
.Hnav {
position: absolute;
width: 120%;
left:40rem;
height: 5%;
display: flex;
align-items: center;
padding: 2% 5% 0 5%;
justify-content: space-between;
z-index: 10;
top:-2rem;
z-index: 999999;
}
}

@media only screen and (max-width: 600px) {
.Hnav  {
display: none;
}
}

.Hnav ul {

display: flex;
color: #ffffff;
list-style: none;
width: 350px;
justify-content: space-between;
align-items: center;
margin: 10px 0;

}

.Hnav a {

color: #ffffff;
text-decoration: none;

}

.Hnav a:hover {
color: rgb(0, 0, 0);

}

.Hnav ul li {
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
font-size: 1rem;

}

li:hover {
color: rgb(0, 0, 0);
}
/* #endregion */

/* #region About Page Nav */	
@media only screen and (min-width:768px) {
.Anav {
position: absolute;
width: 120%;
left:40rem;
height: 5%;
display: flex;
align-items: center;
padding: 2% 5% 0 5%;
justify-content: space-between;
z-index: 10;
top:-8.5rem;
z-index: 999999;
}
}

@media only screen and (max-width: 600px) {
.Anav  {
display: none;
}
}

.Anav ul {

display: flex;
color: #ffffff;
list-style: none;
width: 350px;
justify-content: space-between;
align-items: center;
margin: 10px 0;

}

.Anav a {

color: #ffffff;
text-decoration: none;

}

.Anav a:hover {
color: rgb(0, 0, 0);

}

.Anav ul li {
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
font-size: 1rem;

}

li:hover {
color: rgb(0, 0, 0);
}
/* #endregion */

/* #region Signup Nav */

@media only screen and (max-width: 600px) {
.Snav  {
display: none;
}
}

.Snav ul {

display: flex;
color: #ffffff;
list-style: none;
width: 350px;
justify-content: space-between;
align-items: center;
/* margin: 10px 0; */
margin-left: 45rem;
margin-top: -2.5rem;
position: absolute;
z-index: 999999;

}

.Snav a {

color: #000000;
text-decoration: none;

}

.Snav a:hover {
color: rgb(255, 255, 255);

}

.Snav ul li {
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
font-size: 1rem;

}

li:hover {
color: rgb(0, 0, 0);
}   
/* #endregion */

/* #region Explore Page Nav */	
@media only screen and (min-width:768px) {
.Enav {
position: absolute;
width: 120%;
left:40rem;
height: 5%;
display: flex;
align-items: center;
padding: 2% 5% 0 5%;
justify-content: space-between;
z-index: 10;
top:-6.75rem;
z-index: 999999;
}
}

@media only screen and (max-width: 600px) {
.Enav  {
display: none;
}
}

.Enav ul {

display: flex;
color: #ffffff;
list-style: none;
width: 350px;
justify-content: space-between;
align-items: center;
/* margin: 10px 0; */
margin-top: 3.25rem;

}

.Enav a {

color: #ffffff;
text-decoration: none;

}

.Enav a:hover {
color: rgb(0, 0, 0);

}

.Enav ul li {
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
font-size: 1rem;

}

li:hover {
color: rgb(0, 0, 0);
}
/* #endregion */

@media only screen and (min-width:768px) {
.btn-signup {
position: absolute;
top: 35px;
left: 75rem;
font-size: 20px;
text-decoration: none;
border: 1px solid #fff;
padding: 5px 8px;
border-radius: 3px;
color: #fff;
z-index: 999;

}
}
@media only screen and (max-width: 600px) {
.btn-signup {
display: none;
}
}    

/* #endregion */

/* #region Mobile Navbar*/

@media only screen and (min-width:768px) {
.launch {
display: none;
}
}

@media only screen and (max-width: 600px) {
.launch {
position: absolute;
right: 1.5em;
top: 2.5em;
will-change: transform;
z-index: 9999999;

}
}

/* @media only screen and (max-width: 600px) {
.launchSize {
transform: scale(28%);
z-index: 99;
}
} */

@media only screen and (min-width:768px) {
.early_B {
display: none;

}
}  

@media only screen and (max-width: 600px) {
.early_B {
position: absolute;
left: 1.5em;
top: 2.5em;
will-change: transform;
z-index: 9999999;

}
}

@media only screen and (max-width: 600px) {
.earlySize {
transform: scale(150%);
will-change: transform;
}
}

.overlay {
position: fixed;
background: #bacee7;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
padding: 2em;
visibility:hidden;
z-index: 999999;
}

@media only screen and (min-width:768px) {
.exit {
display: none;
}
}  
.exit {
position: absolute;
right: 2.5em;
top: 3em;
transform: scale(400%);
}

.fa {
padding: 25px;
font-size: 30px;
width: 20px;
height: 20px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
margin-top:2rem;
}

.fa-facebook {

color: rgb(0, 0, 0);
margin-left:6.20rem;
}

.fa-pinterest {

color: rgb(0, 0, 0);
}

.fa-instagram {
color: rgb(0, 0, 0);
}

.menu {
display: block;
}

.menu-container {
margin-top: 2em;
opacity: 0;
-webkit-transform: translateX(-5px);
transform: translateX(-5px);

}

.menu-container ul {
list-style-type: none;
padding: 0;
margin-top: 4em;
}

.menu-container ul li a {
text-decoration: none;
color: white;
display: block;
font-family: 'Roslindale-DeckNarrowBold-Testing';
letter-spacing: -0.25rem;
font-size: 4.25em;
text-align: center;
margin-left:4.25rem;
padding: 0.10em;
}

.menu-container ul li a:hover {
border-radius: .2em;
} 
/* #endregion */

/* #region Explore Page*/

.explore-page-content {
background-color: #000000;
width: 100vw;
position: absolute;
overflow-x: hidden;
margin: 0;
height: 700vh;
}

/* .galleryHeading1 {
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 15em;
color: rgb(248, 248, 248);
text-align: center;
}

@media only screen and (max-width: 600px) {
.galleryHeading1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 5em;
color: rgb(248, 248, 248);
text-align: center;
max-width: 100vh;
}
} */

.grid{
gap: 1.5rem; /*used to adjust vertical gap */
columns: 4;
margin-left: 1rem;
margin-right: 1rem;
margin-top: 8rem;
border-style: dotted;
}

@media only screen and (max-width: 600px) {
.grid {
gap: 0.8rem;
columns: 2;
margin-left: 0.65rem;
margin-right: 0.65rem;
margin-top: 5rem;
max-width: 50vh;
}
}

.grid .box{
display: inline-block;
margin-bottom: 1.5rem; /*used to adjust horizontal gap */
position: relative;
}

@media only screen and (max-width: 600px) {
.grid .box {
display: inline-block;
margin-bottom: 0.6rem;
position: relative;
max-width: 50vh;
}
}

.grid img {
width:100%;
height: 100%;
}

.box__img {
display: block;
flex: none;
/* margin: 0 auto; */
filter:grayscale(70%);
pointer-events: none;
width: 260px;
height: 260px;
-webkit-transition: all 2.5s ease;
-moz-transition: all 2.5s ease;
-ms-transition: all 2.5s ease;
transition: all 2.5s ease;
}

.grid__item:hover .box__img:not(.box__img--original) {
filter:grayscale(0%);
-ms-transform: scale(1.5); 
-webkit-transform: scale(1.5); 
transform: scale(1.5); 
/* transform-origin: bottom right 60px; */
position: relative;
z-index:200;
display: block;
/* position: relative;
z-index: 1; */
} 

/* #endregion */

/* #region Sign-up Page*/

.signup-page-content {
background-color: #eeb3b3;
width: 100vw;
position: absolute;
overflow-x: hidden;
margin: 0;
height: 720vh;
}

/* #endregion */

/* #region Form Page*/

.form-page-content {
background-color: #31d18e;
height:400vh;
width: 100vw;
position: fixed;
overflow-x: hidden;
margin: 0;
}

@media only screen and (max-width: 600px) {
.form-page-content {
background-color: #31d18e;
height:380vh;
width: 100vw;
position: absolute;
overflow-x: hidden;
margin: 0;

}
}

.formHeading {
margin-top: -17.5rem;
width:95%;
text-align: center;
font-family: franklin gothic condensed;
font-size: 4rem;
margin-left: 2rem;
position: absolute;
color:rgb(214, 69, 12);
}

@media only screen and (max-width: 600px) {
.formHeading {
margin-top: -24rem;
font-size: 3rem;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin-left: 0.5rem;
position: absolute;
width: 194%;
margin-left: -2.5rem;	
color:rgb(214, 69, 12);
}
}

.formDisclaimer {
margin-top: -10rem;
width:95%;
text-align: center;
color:rgb(255, 255, 255);
font-family: franklin gothic condensed;
font-size: 2rem;
margin-left: 2rem;
position: absolute;
color:#498149;
}

@media only screen and (max-width: 600px) {
.formDisclaimer {
margin-top: -18rem;
font-family: franklin gothic condensed;
font-size: 1.85rem;
position: absolute;
width: 200%;
margin-left: -3rem;
margin-right: 0;
margin-bottom: 1.5rem;
color:#498149;
text-align: center;
}
}

.form-body {
position: fixed; 
width: 75vw;
margin-top: 25rem;
margin-left: 9.5rem;
z-index: 99999;
/* background-color:#00615f; */
}

@media only screen and (max-width: 600px) {
.form-body {
position: absolute; 
max-width: 51%;
height: auto;
margin-top: 15rem;
z-index: 99;
margin-left: 2.65rem;
}
}

.earlyB-signup-form {

margin-top: -10rem;
}

@media only screen and (max-width: 600px) {
.earlyB-signup-form {

margin-top: 1rem;

}
}


@media only screen and (min-width:769px) {
.earlyB-form-row {
display:flex; 
}
}

@media only screen and (max-width: 600px) {
.earlyB-form-row {
width: 100%;
justify-content: space-between;
}
}

@media only screen and (min-width:769px) {
.checkbox-group {
display:flex;
margin-right: 40px;
margin-left: 40px;
}
}

@media only screen and (max-width: 600px) {
.checkbox-group {
/* background-color: rgb(188, 225, 231); */
width: 200%;
margin-left: -3.5rem;
}
}

.btn {
flex:1;
}

.checkbox-group div {
flex:1;
/* background-color: rgb(24, 165, 43); */
}

.checkbox-group label  {
color:#e9d2d2;
cursor:pointer;
font-size: 1.6rem;
font-family: 'Franklin Gothic Condensed';
/* background-color: rgb(176, 207, 64); */
}

/* FORM FOTTER */
.btn {
padding:8px 40px;
background-color:#000000;
font-size:1.25rem;
color:#ffffff;
cursor:pointer;
font-family: 'Komika'; 
margin-left: 28rem;
margin-top:2rem;
border-color:#000000; 
/* border: 1px solid #5c18b4; */
justify-content: center;
align-items: center;
}

@media only screen and (max-width: 600px) {
.btn {
padding:10px 80px;
background-color:#000000;
font-size:1.5rem;
color:#ffffff;
cursor:pointer;
font-family: 'Komika'; 
margin-left: 3.75rem;
border-color:#000000; 
/* border: 1px solid #5c18b4; */
justify-content: center;
align-items: center;
margin-top: 1rem;
}
}

/* INPUT*/
label {
color:rgb(170, 23, 23);
font-size: 1.5rem;
/* font-weight: 500; */
display: block;
padding-left: 35px;
text-indent: -35px;
/* background-color: rgb(207, 64, 207); */
}

input[type="text"],
input[type="email"],
textarea  {
width:100%;
vertical-align: middle;
font-size: 1rem;
height: 1.5rem;
padding-left: 8px;
border: 1px solid #000000;
border-radius: 4px;
background:transparent; 
}


input.checkbox {
width : 20px;
height : 20px;
vertical-align: middle;
margin-right: .3em;
background:#ffffff; opacity: 0.5;
border: 1px solid #0c22a0;
}

.top-left {
/* border: 1px solid rgb(235, 53, 53);  */
margin-right: 1px;
margin-left: 20px;
margin-bottom: 20px;
display: flex;
margin-bottom: 0.5rem;
}
.top-right {
/* border: 1px solid rgb(235, 53, 53);  */
margin-right: 20px;
margin-left: 20px;
margin-bottom: 20px;
display: flex;
margin-bottom: 0.5rem;
}

.middle-left {
/* border: 1px solid rgb(235, 53, 53); */
margin-right: 1px;
margin-left: 20px;
margin-bottom: 20px;
display: flex;
margin-bottom: 0.5rem;
}
.middle-right {
/* border: 1px solid rgb(235, 53, 53); */
margin-right: 20px;
margin-left: 20px;
margin-bottom: 20px;
display: flex;
margin-bottom: 0.5rem;
}

.middle2-left {
/* border: 1px solid rgb(235, 53, 53); */
margin-right: 1px;
margin-left: 20px;
margin-bottom: 20px;
display: flex;
margin-bottom: 0.5rem;
}
.middle2-right {
/* border: 1px solid rgb(235, 53, 53); */
margin-right: 20px;
margin-left: 20px;
margin-bottom: 20px;
display: flex;
margin-bottom: 0.5rem;
}

.bottom-left {
/* border: 1px solid rgb(235, 53, 53); */
margin-right: 1px;
margin-left: 20px;
margin-bottom: 20px;
display: flex;
}
.bottom-right {
/* border: 1px solid rgb(235, 53, 53); */
margin-right: 20px;
margin-left: 20px;
margin-bottom: 20px;
display: flex;
}

@media only screen and (min-width:769px) {
.input-group-name {
margin-left: 5rem;
margin-bottom: 1rem;
flex:1;
max-width: 26rem;
}
}    

@media only screen and (max-width: 600px) {
.input-group-name {
/* background-color: rgb(188, 225, 231); */
width: 163%;
margin-left: -0.85rem;
padding-top: 1rem;;
margin-right: 0;
}
}

@media only screen and (min-width:769px) {
.input-group-email {
/* border: 1px solid rgb(235, 53, 53); */
margin-left: 3rem;
margin-bottom: 1rem;
flex:1;
max-width: 26rem;
}
}   

@media only screen and (max-width: 600px) {
.input-group-email {
width: 163%;
margin-left: -0.85rem;
padding-top: 1rem;
margin-right: 0;
}
}

@media only screen and (min-width:769px) {
.input-group-msg   {
margin-left: 5rem;
margin-bottom: 1rem;
flex:1;
max-width: 55rem;
margin-top: 1rem;
}
}   

@media only screen and (max-width: 600px) {
.input-group-msg  {
width: 163%;
margin-left: -0.85rem;
padding-top: 1rem;
margin-right: 0;
margin-bottom: 1.5rem;
}
}

/* #endregion */

/* #region About Section*/

.about-page-content {
background-color:  #FD9367;
height:1000vh;
width: 100vw;

position: fixed;
overflow-x: hidden;
margin: 0;
}

@media only screen and (max-width: 600px) {
.about-page-content {
background-color:  #FD9367;
height:400vh;
width: 100vw;
position: absolute;
overflow-x: hidden;
margin: 0;

}
}

/* .about-page-sect-one {
position: relative;
width: 100%;
height: 100vh;
background-color: #31d18e;
}

@media only screen and (max-width: 600px) {
.about-page-sect-one {
position: relative;
width: 85vw;
height: 250vh;
top: 2rem;
}
} */

.about-page-sect-one-header {
position: absolute; 
left: 0rem;
top: 5vh;
width: 100%;
height: 400vh;
overflow: hidden;

}

@media only screen and (max-width: 600px) {
.about-page-sect-one-header {
position: absolute;
left: 1.65rem;
top: 3vh;
width: 100%;
height: 600vh;
overflow: hidden;


}
}





/* .about-page-sect-one-header h1 {
font-size: 25vh;
line-height: 0.75;
color: #020202;
width: 100%;
height: 100%;
letter-spacing: -0.05em;
background-color: #5d5b5d;
text-align: center;

}

@media only screen and (max-width: 600px) {
.about-page-sect-one-header h1 {
width: 100%;
height: auto;
margin-top: 1rem;
font-size: 4.8rem;
line-height: 4.5rem;
color: #000000;
background-color: #c2500e;
}
} */




.about-page-sect-one-introP {
position: absolute;
top: 100vh;
height: 100vh;
width: 100%;
left: 5%;
/* background-color: #25241a; */
}

.about-page-sect-one-introP-container {
position: absolute;
/* right: 4%; */
margin-left: 0;
top: 5rem;
width: 80%;
height: 40%;
color: #ffffff;
background-color: #cec21f;

}

@media only screen and (max-width: 600px) {
.about-page-sect-one-introP-container {
position: absolute;
left: 1rem;
top: -10%;
width: 100%;
/* height: 100%; */
background-color: #0b0836;


}
}

.about-page-sect-one-introP-container h1 {
font-size: 25vh;
line-height: 0.75;
color: #020202;
margin-top: -37rem;

letter-spacing: -0.05em;
text-align: center;
margin-left: 4rem;
width: 80vw;
background-color: #474086;


}

@media only screen and (max-width: 600px) {
.about-page-sect-one-introP-container h1 {
position: relative;
right: 100%;
left: -6rem;
top: 5rem;
width: 85vw;
height: auto;
color: #ffffff;
font-family: NHaasGrotesk;
font-size: 4.5rem;
line-height: 4rem;
background-color: #83d0dd;
}
}

.about-page-sect-one-introP-container p {
position: relative;
font-family: NHaasGrotesk;
font-size: 1.5rem;
top: -15%;
background-color: #8f5e41;
margin-left: 40rem;
width: 48%;
}

@media only screen and (max-width: 600px) {
.about-page-sect-one-introP-container p {
position: relative;
margin-left:-2rem;
top: 22rem;
width: 85vw;
height: auto;
color: #ffffff;
font-family: NHaasGrotesk;
font-size: 2rem;
text-align: center;
background-color: #c41010;
}
}

.about-page-sect-one-introP-container-image {
position: absolute;
left: 5.75%;
top: -55%;
width: 550px;
max-width: 550px;
height: auto;

border-style:double

}

@media only screen and (max-width: 600px) {
.about-page-sect-one-introP-container-image {
position: absolute;   
top: -72%;
max-width: 315px;
height: auto;
left: -2.75rem;

}
}

.about-page-sect-one-secondP {
position: absolute;
top: 50rem;
height: 100vh;
width: 100%;
/* background-color: #782D65; */
}

.about-page-sect-one-secondP-container {
position: absolute;
right: 4%;
left: 5rem;
top: 75rem;
width: 85%;
/* height: 400vh; */
color: #ffffff;
background-color: #7db64e;
text-align: center;
}

.a-span {
-webkit-text-stroke: transparent;
-webkit-text-fill-color: #0a0a0a;
}

@media only screen and (max-width: 600px) {
.about-page-sect-one-secondP-container {
position: absolute;
right: 3%;
top: 25%;
width: 45%;
height: 10%;
color: #ffffff;
background-color:  #1f1e1e;
}
}

.about-page-sect-one-secondP-container h1 {
-webkit-text-stroke: 0.8px #0a0a0a;
-webkit-text-fill-color: transparent;
font-size: 25vh;
line-height: 0.75;
color: #ffffff;
margin-top: -55rem;

padding-bottom: 7rem;
background-color: #963599;
margin-left: 4rem;
width: 80vw;
height: auto;

}

@media only screen and (max-width: 600px) {
.about-page-sect-one-secondP-container h1 {
position: relative;
left:-1rem;
top: 40rem;
width: 90vw;
height: auto;
color: #ffffff;
font-family: NHaasGrotesk;
font-size: 4.5rem;
line-height: 4rem;
background-color: #0c22a0;
}
}

.about-page-sect-one-secondP-container p {
position: relative;
font-family: NHaasGrotesk;
font-size: 1.5rem;
top: -5rem;
margin-left:4rem;
width: 48%;
background-color: #0a4749;
}

@media only screen and (max-width: 600px) {
.about-page-sect-one-secondP-container p {
position: relative;
left:-6.25rem;
top: 58rem;
width: 85vw;
height: auto;
color: #ffffff;
font-family: NHaasGrotesk;
font-size: 2rem;
text-align: center;
background-color: #69925c;
}
}

.about-page-sect-one-secondP-container-image{
position: absolute;
left: 55%;
top: -15rem;
width: 500px;
max-width: 550px;
height: auto;
border-style: solid;

}

@media only screen and (max-width: 600px) {
.about-page-sect-one-secondP-container-image{
position: absolute;   
top: 78rem;
max-width: 315px;
height: auto;
left:-6rem;
margin:0;
}
}

.about-page-sect-one-thirdP {
position: absolute;
top: 250vh;
height: 100vh;
width: 100%;
/* background-color: #782D65; */
}

.about-page-sect-one-thirdP-container {
position: absolute;
right: 4%;
left: 5rem;
top: 75%;
width: 85%;
height: 40%;
color: #ffffff;

text-align: center;
}

.a-span {
-webkit-text-stroke: transparent;
-webkit-text-fill-color: #0a0a0a;
}

@media only screen and (max-width: 600px) {
.about-page-sect-one-thirdP-container {
position: absolute;
right: 3%;
top: 25%;
width: 45%;
height: 10%;
color: #ffffff;
background-color:  #FD9367;
}
}

.about-page-sect-one-thirdP-container h1 {

font-size: 25vh;
line-height: 0.75;
color: #020202;
margin-top: 3rem;
padding-bottom: 7rem;
letter-spacing: -0.05em;
text-align: center;
background-color: #a670a8;
}

@media only screen and (max-width: 600px) {
.about-page-sect-one-thirdP-container h1 {
position: relative;
left:-3.25rem;
top: 95rem;
width: 85vw;
height: auto;
color: #ffffff;
font-family: NHaasGrotesk;
font-size: 3rem;
line-height:3rem;
background-color: #31d18e;
}
}

.about-page-sect-one-thirdP-container p {
position: relative;
font-family: NHaasGrotesk;
font-size: 1.5rem;
top: -20%;
margin-left:1rem;
width: 50%;
background-color: #e6e7ee;
}

@media only screen and (max-width: 600px) {
.about-page-sect-one-thirdP-container p {
position: relative;
left:-4.25rem;
top: 95rem;
width: 85vw;
height: auto;
color: #ffffff;
font-family: NHaasGrotesk;
font-size: 2rem;
text-align: center;
background-color: #7c91af;
}
}

.about-page-sect-one-thirdP-container-image{
position: absolute;
left: 55%;
top: 37rem;
width: 500px;
max-width: 550px;
height: auto;
border-style: solid;

}

@media only screen and (max-width: 600px) {
.about-page-sect-one-thirdP-container-image{
position: absolute;   
top: 80rem;
max-width: 315px;
height: auto;
left: -3.5rem;

}
}





/* #endregion */

/* #region Home Footer*/


.Hfooter {
position: absolute;
display: block;
/* bottom: -40rem; */
top:98rem;
width: 100vw;
height: 250px; 
background-color: rgb(0, 0, 0);
box-sizing: border-box;
padding:0.1px 0;
}

@media only screen and (max-width: 600px) {
.Hfooter {
position: absolute;
top: 75rem;
width: 100vw;
/* height: 100vh; */
height: 1200px;
color: #000000;
margin-bottom: 0;
}
}

.Hinner-footer {
display: block;
margin: 0 auto;
width: 1100px;
height:100%;
margin-left: 15rem;
/* background-color: #C3305D; */
}

@media only screen and (max-width: 600px) {
.Hinner-footer {
width: 100vw;
margin-left: 0;
}
}

.Hinner-footer .HblackWhite-logo-container{
width: 30%;
float: left;
height: 100%;
display: block;
}


@media only screen and (max-width: 600px) {
.Hinner-footer .HblackWhite-logo-container {
margin-top: 0;
margin-left: 0;
margin-bottom: 4rem;
width: 100vw;
height: 175px;
/* background-color: #5c85ee; */
}
}

.Hinner-footer .HblackWhite-logo-container p{
font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 15px;
color: white;
display:block;
margin-left: -7.3rem;
margin-top:0.5rem;
width: 95%;
}

.Hinner-footer .HblackWhite-logo-container p  {

margin-left: -5rem;
margin-top:3.65rem;
width: 90%;

}

@media only screen and (max-width: 600px) {
.Hinner-footer .HblackWhite-logo-container p{
/* font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 25px;
color: white;
display:block;
margin-left:0.5rem;
margin-top:-7.5rem;
padding-bottom: 5rem; */
display: none;
}
}

.Hsocial-icons-wrapper{
margin-top: 1rem;
margin-left: 3.15rem;
color: white;
transform: scale(115%);
position: absolute;
}

@media only screen and (max-width: 600px) {
.Hinner-footer .HblackWhite-logo-container .Hsocial-icons-wrapper{
margin-top: -5rem;
margin-left: 17.5rem;
color: white;
transform: scale(150%);
/* position: absolute; */
}}

.Hcopyright{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 13.5px;
color: white;
display:block;
margin-left:62.5rem;
margin-top:-3.5rem;
padding-bottom: 5rem;
position: absolute;
}


.Hinner-footer .HblackWhite-logo-container .HfooterLogo{
width: 200px;
height: auto;
margin-top: 1rem;
margin-left: -8.5rem;
}

.HfooterLogo img{
width: 200px;
height: auto;
margin-top: 1.15rem;
margin-left: 3.15rem;
position: absolute;
}

@media only screen and (max-width: 600px) {
.Hinner-footer .HblackWhite-logo-container .HfooterLogo{
display:none;
/* width: 100vw;
position: absolute;
margin-top: -24rem;
margin-left: 0rem;
margin-bottom: 1.5rem; */
}
}

@media only screen and (min-width:769px) {
.Hinner-footer .HblackWhite-logo-container .HfooterLogoM{
display:none;
}
}   

@media only screen and (max-width: 600px) {
.Hinner-footer .HblackWhite-logo-container .HfooterLogoM{
width: 580px;
height: auto;
margin-top: -20rem;
margin-left: -6.75rem;
margin-bottom: 1.5rem;
/* display: none; */
}
}

@media only screen and (max-width: 600px) {
.HfooterLogoM img{
width: 580px;
height: auto;
margin-top: -20.5rem;
margin-left: 0;

}
}

.Hinner-footer .Hfooter-third {
width: calc(21.66666667% -20px);
margin-right: 130px;
float:left;
height: 100%;
}  

@media only screen and (max-width: 600px) {
.Hinner-footer .Hfooter-third {
width: 100%;
height: auto;
margin-left: 0;

}
}




@media only screen and (max-width: 600px) {
.Hcenter-footer-text {

text-align: center;
}
}

.Hinner-footer .Hfooter-third:last-child {
margin-right: 0;
} 

.Hinner-footer .Hfooter-third h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
color: white;
display:block;
width:100%;
margin-bottom: 15px;

}  

@media only screen and (max-width: 600px) {
.Hfooter-third-wrapper {
margin-top: 14rem;
}
}

@media only screen and (max-width: 600px) {
.Hinner-footer .Hfooter-third h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 2.5rem;
color: white;
display:block;
width:100%;
margin-bottom: 15px;
}
}

.Hinner-footer .Hfooter-third a {
font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 15px;
color: white;
display:block;
width:100%;
margin-bottom: 5px;
list-style: none;
text-decoration: none;
}  

@media only screen and (max-width: 600px) {
.Hinner-footer .Hfooter-third a {
font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 1.8rem;
color: white;
display:block;
width:100%;
margin-bottom: 1px;
list-style: none;
text-decoration: none;
}
}

a.Hwhatsapp:before,
a.Hemail:before,
a.Hmobile:before{
font-family: FontAwesome;
display: inline-block;
padding-right: 6px;
vertical-align: middle;
}

a.Hwhatsapp:before {
content: "\f232";
}

a.Hmobile:before {
content: "\f095";
}

a.Hemail:before {
content: "\f003";
}

.Hdivider {
border-top: 1px solid rgba(189, 196, 203, 0.5);
width: 76vw;
margin-top: 12rem;
position:absolute;
height: 0.1px;
margin-left: -5.75rem;
}

@media only screen and (max-width: 600px) {
.Hdivider {
border-top: 1px solid rgba(189, 196, 203, 0.5);
width: 70%;
margin-left: 3.5rem;
margin-top: 15rem;
position: absolute;
height: 0.1px;
margin-bottom: 0;
}
}

/* #endregion */

/* #region About Footer*/

.Afooter {
position: absolute;
display: block;
/* bottom: -40rem; */
top:120rem;
width: 100vw;
height: 250px; 
background-color: rgb(0, 0, 0);
box-sizing: border-box;
padding:0.1px 0;
}

@media only screen and (max-width: 600px) {
.Afooter {
position: absolute;
top: 180rem;
width: 100vw;
/* height: 100vh; */
height: 1200px;
color: #000000;
margin-bottom: 0;
}
}

.Ainner-footer {
display: block;
margin: 0 auto;
width: 1100px;
height:100%;
margin-left: 15rem;
/* background-color: #C3305D; */
}

@media only screen and (max-width: 600px) {
.Ainner-footer {
width: 100vw;
margin-left: 0;
}
}

.Ainner-footer .AblackWhite-logo-container{
width: 30%;
float: left;
height: 100%;
display: block;
}


@media only screen and (max-width: 600px) {
.Ainner-footer .AblackWhite-logo-container {
margin-top: 0;
margin-left: 0;
margin-bottom: 4rem;
width: 100vw;
height: 175px;
/* background-color: #5c85ee; */
}
}

.Ainner-footer .AblackWhite-logo-container p{
font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 15px;
color: white;
display:block;
margin-left: -7.3rem;
margin-top:0.5rem;
width: 95%;
}

.Ainner-footer .AblackWhite-logo-container p  {

margin-left: -5rem;
margin-top:3.65rem;
width: 90%;

}

@media only screen and (max-width: 600px) {
.Ainner-footer .AblackWhite-logo-container p{
/* font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 25px;
color: white;
display:block;
margin-left:0.5rem;
margin-top:-7.5rem;
padding-bottom: 5rem; */
display: none;
}
}

.Asocial-icons-wrapper{
margin-top: 1rem;
margin-left: 3.15rem;
color: white;
transform: scale(115%);
position: absolute;
}

@media only screen and (max-width: 600px) {
.Ainner-footer .AblackWhite-logo-container .Asocial-icons-wrapper{
margin-top: -5rem;
margin-left: 17.5rem;
color: white;
transform: scale(150%);
/* position: absolute; */
}}

.Acopyright{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 13.5px;
color: white;
display:block;
margin-left:62.5rem;
margin-top:-3.5rem;
padding-bottom: 5rem;
position: absolute;
}


.Ainner-footer .AblackWhite-logo-container .AfooterLogo{
width: 200px;
height: auto;
margin-top: 1rem;
margin-left: -8.5rem;
}

.AfooterLogo img{
width: 200px;
height: auto;
margin-top: 1.15rem;
margin-left: 3.15rem;
position: absolute;
}

@media only screen and (max-width: 600px) {
.Ainner-footer .AblackWhite-logo-container .AfooterLogo{
display:none;
/* width: 100vw;
position: absolute;
margin-top: -24rem;
margin-left: 0rem;
margin-bottom: 1.5rem; */
}
}

@media only screen and (min-width:769px) {
.Ainner-footer .AblackWhite-logo-container .AfooterLogoM{
display:none;
}
}   

@media only screen and (max-width: 600px) {
.Ainner-footer .AblackWhite-logo-container .AfooterLogoM{
width: 580px;
height: auto;
margin-top: -20rem;
margin-left: -6.75rem;
margin-bottom: 1.5rem;
/* display: none; */
}
}

@media only screen and (max-width: 600px) {
.AfooterLogoM img{
width: 580px;
height: auto;
margin-top: -20.5rem;
margin-left: 0;

}
}

.Ainner-footer .Afooter-third {
width: calc(21.66666667% -20px);
margin-right: 130px;
float:left;
height: 100%;
}  

@media only screen and (max-width: 600px) {
.Ainner-footer .Afooter-third {
width: 100%;
height: auto;
margin-left: 0;

}
}




@media only screen and (max-width: 600px) {
.Acenter-footer-text {

text-align: center;
}
}

.Ainner-footer .Afooter-third:last-child {
margin-right: 0;
} 

.Ainner-footer .Afooter-third h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
color: white;
display:block;
width:100%;
margin-bottom: 15px;

}  

@media only screen and (max-width: 600px) {
.Afooter-third-wrapper {
margin-top: 14rem;
}
}

@media only screen and (max-width: 600px) {
.Ainner-footer .Afooter-third h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 2.5rem;
color: white;
display:block;
width:100%;
margin-bottom: 15px;
}
}

.Ainner-footer .Afooter-third a {
font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 15px;
color: white;
display:block;
width:100%;
margin-bottom: 5px;
list-style: none;
text-decoration: none;
}  

@media only screen and (max-width: 600px) {
.Ainner-footer .Afooter-third a {
font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 1.8rem;
color: white;
display:block;
width:100%;
margin-bottom: 1px;
list-style: none;
text-decoration: none;
}
}

a.Awhatsapp:before,
a.Aemail:before,
a.Amobile:before{
font-family: FontAwesome;
display: inline-block;
padding-right: 6px;
vertical-align: middle;
}

a.Awhatsapp:before {
content: "\f232";
}

a.Amobile:before {
content: "\f095";
}

a.Aemail:before {
content: "\f003";
}

.Adivider {
border-top: 1px solid rgba(189, 196, 203, 0.5);
width: 76vw;
margin-top: 12rem;
position:absolute;
height: 0.1px;
margin-left: -5.75rem;
}

@media only screen and (max-width: 600px) {
.Adivider {
border-top: 1px solid rgba(189, 196, 203, 0.5);
width: 70%;
margin-left: 3.5rem;
margin-top: 15rem;
position: absolute;
height: 0.1px;
margin-bottom: 0;
}
}

/* #endregion */

/* #region Sign-up Footer*/

.Sfooter {
position: absolute;
display: block;
/* bottom: -40rem; */
top:128rem;
width: 100vw;
height: 250px; 
background-color: rgb(0, 0, 0);
box-sizing: border-box;
padding:0.1px 0;
}

@media only screen and (max-width: 600px) {
.Sfooter {
position: absolute;
top: 65%;
width: 100vw;
/* height: 100vh; */
height: 1200px;
color: #000000;
margin-bottom: 0;
}
}

.Sinner-footer {
display: block;
margin: 0 auto;
width: 1100px;
height:100%;
margin-left: 15rem;
/* background-color: #C3305D; */
}

@media only screen and (max-width: 600px) {
.Sinner-footer {
width: 100vw;
margin-left: 0;
}
}

.Sinner-footer .SblackWhite-logo-container{
width: 30%;
float: left;
height: 100%;
display: block;
}


@media only screen and (max-width: 600px) {
.Sinner-footer .SblackWhite-logo-container {
margin-top: 0;
margin-left: 0;
margin-bottom: 4rem;
width: 100vw;
height: 175px;
/* background-color: #5c85ee; */
}
}

.Sinner-footer .SblackWhite-logo-container p{
font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 15px;
color: white;
display:block;
margin-left: -7.3rem;
margin-top:0.5rem;
width: 95%;
}

.Sinner-footer .SblackWhite-logo-container p  {

margin-left: -5rem;
margin-top:3.65rem;
width: 90%;

}

@media only screen and (max-width: 600px) {
.Sinner-footer .SblackWhite-logo-container p{
/* font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 25px;
color: white;
display:block;
margin-left:0.5rem;
margin-top:-7.5rem;
padding-bottom: 5rem; */
display: none;
}
}

.Ssocial-icons-wrapper{
margin-top: 1rem;
margin-left: 3.15rem;
color: white;
transform: scale(115%);
position: absolute;
}

@media only screen and (max-width: 600px) {
.Sinner-footer .SblackWhite-logo-container .Ssocial-icons-wrapper{
margin-top: -5rem;
margin-left: 17.5rem;
color: white;
transform: scale(150%);
/* position: absolute; */
}}

.Scopyright{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 13.5px;
color: white;
display:block;
margin-left:62.5rem;
margin-top:-3.5rem;
padding-bottom: 5rem;
position: absolute;
}


.Sinner-footer .SblackWhite-logo-container .SfooterLogo{
width: 200px;
height: auto;
margin-top: 1rem;
margin-left: -8.5rem;
}

.SfooterLogo img{
width: 200px;
height: auto;
margin-top: 1.15rem;
margin-left: 3.15rem;
position: absolute;
}

@media only screen and (max-width: 600px) {
.Sinner-footer .SblackWhite-logo-container .SfooterLogo{
display:none;
/* width: 100vw;
position: absolute;
margin-top: -24rem;
margin-left: 0rem;
margin-bottom: 1.5rem; */
}
}

@media only screen and (min-width:769px) {
.Sinner-footer .SblackWhite-logo-container .SfooterLogoM{
display:none;
}
}   

@media only screen and (max-width: 600px) {
.Sinner-footer .SblackWhite-logo-container .SfooterLogoM{
width: 580px;
height: auto;
margin-top: -20rem;
margin-left: -6.75rem;
margin-bottom: 1.5rem;
/* display: none; */
}
}

@media only screen and (max-width: 600px) {
.SfooterLogoM img{
width: 580px;
height: auto;
margin-top: -20.5rem;
margin-left: 0;

}
}

.Sinner-footer .Sfooter-third {
width: calc(21.66666667% -20px);
margin-right: 130px;
float:left;
height: 100%;
}  

@media only screen and (max-width: 600px) {
.Sinner-footer .Sfooter-third {
width: 100%;
height: auto;
margin-left: 0;

}
}


@media only screen and (max-width: 600px) {
.Scenter-footer-text {

text-align: center;
}
}

.Sinner-footer .Sfooter-third:last-child {
margin-right: 0;
} 

.Sinner-footer .Sfooter-third h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 20px;
color: white;
display:block;
width:100%;
margin-bottom: 15px;

}  

@media only screen and (max-width: 600px) {
.Sfooter-third-wrapper {
margin-top: 14rem;
}
}

@media only screen and (max-width: 600px) {
.Sinner-footer .Sfooter-third h1 {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 2.5rem;
color: white;
display:block;
width:100%;
margin-bottom: 15px;
}
}

.Sinner-footer .Sfooter-third a {
font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 15px;
color: white;
display:block;
width:100%;
margin-bottom: 5px;
list-style: none;
text-decoration: none;
}  

@media only screen and (max-width: 600px) {
.Sinner-footer .Sfooter-third a {
font-family: 'Arial Narrow', Arial, sans-serif;
font-size: 1.8rem;
color: white;
display:block;
width:100%;
margin-bottom: 1px;
list-style: none;
text-decoration: none;
}
}

a.Swhatsapp:before,
a.Semail:before,
a.Smobile:before{
font-family: FontAwesome;
display: inline-block;
padding-right: 6px;
vertical-align: middle;
}

a.Swhatsapp:before {
content: "\f232";
}

a.Smobile:before {
content: "\f095";
}

a.Semail:before {
content: "\f003";
}

.Sdivider {
border-top: 1px solid rgba(189, 196, 203, 0.5);
width: 76vw;
margin-top: 12rem;
position:absolute;
height: 0.1px;
margin-left: -5.75rem;
}

@media only screen and (max-width: 600px) {
.Sdivider {
border-top: 1px solid rgba(189, 196, 203, 0.5);
width: 70%;
margin-left: 3.5rem;
margin-top: 15rem;
position: absolute;
height: 0.1px;
margin-bottom: 0;
}
}

/* #endregion */

/* #region Header Logo*/
.header-logo{
margin-top: 35px;
margin-left: 5rem;
width:165px;
/* display: none; */
will-change: transform;
}

@media only screen and (max-width: 600px) {
.header-logo{
margin-top: 35px;
margin-left: 5rem;
width:195px;
/* display: none; */
will-change: transform;
}
}
/* #endregion */