:root {
--purple-1-c: #690f6b;
--purple-2-c: #350836;
--purple-3-c: #9d16a0;
--beige-1-c: #e6bb70;
--beige-2-c: rgba(230,187,112,0.2);
--beige-3-c: rgba(230,187,112,0.1);
--black-c: #000000;
--white-c: #ffffff;
}

.purple-1-c {
color: var(--purple-1-c);
}

.purple-2-c {
color: var(--purple-2-c);
}

.purple-3-c {
color: var(--purple-3-c);
}

.beige-1-c {
color: var(--beige-1-c);
}

.beige-2-c {
color: var(--beige-2-c);
}

.beige-3-c {
color: var(--beige-3-c);
}

.black-c {
color: var(--black-c);
}

.white-c {
color: var(--white-c);
}

h1, h2, h3, h4, h5, h6 {
font-family: "Tajawal";
font-weight: 900;
padding: 0;
margin: 0;
}

p {
line-height: 110%;
}

body {
font-family: "Tajawal";
font-weight: 300;
min-height: 100vh;
position: relative;
padding-top: 10vh;
}

body, header {
background: linear-gradient(90deg, var(--purple-1-c), var(--purple-2-c), var(--purple-3-c), var(--purple-2-c), var(--purple-1-c));
background-size: 500%;
animation: gradient 20s infinite alternate;
}

a#w-icon {
background: green;
font-size: 2rem;
position: fixed;
bottom: 15px;
right: 15px;
border-radius: 100%;
color: #ffffff;
padding: 5px 15px 5px 15px;
}

@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

header {
min-height: 10vh;
min-width: 100vw;
color: var(--white-c);
position: fixed;
top: 0;
left: 0;
z-index: 9998;
}

header ul {
margin-top: 1vh !important;
}

header img {
max-height: 8vh;
}

header ul.menu a {
padding: 0;
}

header a, footer a {
color: var(--white-c);
}

header a:hover, header a:focus, footer a:hover, footer a:focus {
color: var(--beige-1-c);
}

div#menu-list {
background: var(--white-c);
background-image: linear-gradient(var(--beige-2-c), var(--beige-3-c));
min-height: 100vh;
min-width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}

div#menu-list div.grid-x {
min-height: 100vh;
}

div#menu-list button {
color: var(--beige-1-c);
font-size: 3rem;
cursor: pointer;
}

div#menu-list a {
color: var(--purple-1-c);
}

div#menu-list a:hover, div#menu-list a:focus {
color: var(--beige-1-c);
}

div#menu-list ul.pages a {
font-size: 2rem;
}

li.menu-desktop {
position: relative;
}

ul#menu-desktop {
position: absolute;
top: -20%;
left: 50%;
transform: translate(-50%, 0);
background: var(--white-c);
background-image: linear-gradient(var(--beige-2-c), var(--beige-3-c));
font-size: 2rem;
padding: 2.5vh;
width: 66%;
}

ul#menu-desktop li {
margin: 1vh 0;
}

ul#menu-desktop button {
color: var(--beige-1-c);
font-size: 3rem;
cursor: pointer;
}

ul#menu-desktop a {
color: var(--purple-1-c);
}

ul#menu-desktop a:hover, ul#menu-desktop a:focus {
color: var(--beige-1-c);
}

div#container {
background: var(--white-c);
background-image: linear-gradient(var(--white-c) 50%, var(--beige-2-c) 100%);
overflow: hidden;
position: relative;
color: var(--purple-2-c);
}

div#container p {
font-size: 1.250rem;
}

footer {
margin: 5vh 0;
color: var(--white-c);
}

footer li {
margin-bottom: 2.5vh;
}

hr {
border: 0;
padding: 2.5vh 0;
margin: 0;
}

span#slogan {
background: var(--purple-1-c);
color: var(--white-c);
border-bottom-left-radius: 1.125vh;
border-bottom-right-radius: 1.125vh;
position: absolute;
bottom: -24px;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0);
padding: 0 2.5vh;
}

/*------------------------ Homepage ------------------------*/

div#intro {
height: 66vh;
background-image: url(https://purplecouchcenter.com/assets/images/intro-bg-l-ltr.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
box-shadow: inset 0 0 2.5vh var(--black-c);
}

div#intro ul {
margin: 3vh 0 1.5vh 0;
}

div#intro a {
background: var(--beige-3-c);
color: var(--white-c);
border-radius: 2.5vh;
margin: 0 0.5vh;
}

div#intro a:hover, div#intro a:focus {
background: var(--purple-1-c);
}

div#bulletin img {
border-radius: 2.5vh;
}

div#bulletin p {
font-size: 2rem;
}

form label {
color: var(--purple-1-c);
font-weight: normal;
}

form label.freeform-label {
color: var(--beige-1-c) !important;
font-weight: bold;
font-size: 1.125rem;
}

form button {
background: var(--beige-1-c);
border-radius: 10px !important;
color: var(--white-c);
font-weight: bold;
font-size: 1.250rem;
padding: 10px 25px;
min-width: 125px;
cursor: pointer;
}

/*------------------------ Meet Ragda ------------------------*/

img#ragda-dp {
border-radius: 100%;
max-width: 300px;
background: linear-gradient(45deg, var(--beige-1-c), var(--beige-3-c), var(--beige-1-c));
background-size: 500%;
animation: gradient 20s infinite alternate;
display: block;
margin: 0 auto;
margin-bottom: 2.5vh;
}

div#in-the-media a img {
max-width: 125px;
opacity: 0.75;
}

div#in-the-media a:hover img, div#in-the-media a:focus img {
opacity: 1;
}

div#in-the-media h5 {
margin: 1.125vh 0 5vh 0;
}

/*------------------------ Our Couches ------------------------*/

div.couch {
padding: 1.125vh 0;
}

div.couch:hover, div.couch:focus {
background: var(--beige-2-c);
border-radius: 2.5vh;
}

div.couch button {
max-width: 75%;
color: var(--white-c);
font-size: 1.5rem;
padding: 1.125vh 2.5vh;
border-radius: 2.5vh;
margin-top: 1vh;
}

/*------------------------ Our Podcast ------------------------*/

div#podcast a {
font-size: 4rem;
color: var(--beige-1-c);
margin-top: 2.5vh;
display: block;
}

div#podcast a:hover, div#podcast a:focus {
color: var(--purple-1-c);
}

div#podcast p {
font-size: 1.750rem;
}

/*------------------------ FAQ ------------------------*/

div#faq h4 {
border-left: 5px solid var(--beige-2-c);
margin: 0;
padding: 0;
padding-left: 15px;
margin-bottom: 1.125vh;
}

/*------------------------ Media Queries ------------------------*/

@media screen and (orientation: landscape) {

}

@media screen and (orientation: portrait) {
div#intro {
background-image: url(https://purplecouchcenter.com/assets/images/intro-bg-p-ltr.jpg);
}
}

/* Small only */
@media screen and (max-width: 39.9375em) {
ul.icons-group p {
display: none;
}
div#container {
margin: 0 5vw;
}
div#intro {
height: 75vh;
}
div#intro a {
width: 30vw;
padding: 0.7rem 0.5rem;
margin: 0 0.5vh 1vh 0.5vh;
}
div#bulletin img {
max-width: 66%;
}
div#bulletin p {
font-size: 1.5rem;
margin-top: 1.5vh;
text-align: center;
}
div.couch img {
max-width: 75%;
}
div#podcast p {
font-size: 1.250rem;
}
a#w-icon {
padding: 10px 15px 0 15px;
}
}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}