@font-face {
	font-family: 'Norican Regular';
	src: url("../fonts/Norican-Regular.ttf")
}

@font-face {
	font-family: 'Allura';
	src: url("../fonts/Allura-Regular.ttf")
}

/* Main Styles */

:root {
    --gradient: linear-gradient( 45deg, #845ec2, #d65db1, #ff6f91, #ff9671, #efd3d7, #feeafa);
}

*{
    box-sizing:border-box; /* include border inside width calculation */
	margin:0px;
	padding:0px;
 }
 
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
 }

 main{
    margin-top: 120px;
 }

 .clear{
   clear: both;
 }

 h1{
    font-size: 40px;
 }

 h2{
   color:rgb(50, 3, 94);
   text-align: center;
   font-weight: bold;
   font-size: 30px;
 }

 h3{
   font-family: 'Norican Regular';
   color: #d65db1;
   text-align: center;
   font-size: 40px;
   letter-spacing: 1px;
 }

 .container {
    display: flex;
    flex-direction: row; /* this is the default */
    flex-wrap: wrap;
}


.wide-padding {
    padding-left: 4%;
    padding-right: 4%;
}

.wide-padding h3 {
    margin-top: 3%;
} 


.element-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
 }

 .element-box a {
    font-weight: bold;
}

 .element-box p {
    padding: 40px;
    text-align: justify;
 }


.parent-order {
    display: flex;
    flex-wrap: wrap;
}
.parent-order :nth-child(1) { /* switching child div's order */
    order: 2;
}

.parent-order :nth-child(2) {
    order: 1;
}

a {
    color: rgb(50, 3, 94);
    text-decoration: none;
}


/* NAVIGATION STYLES */

header{
    width: 100%;
    height:120px;
    background-image: url(../img/HeaderBackground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    position: fixed; /*will always be on top of the page while scrolling*/
    box-shadow: 1px 1px 4px 2px rgba(50, 3, 94, 0.5);
    z-index: 999; /*will always be on top of all elements while scrolling*/
 }

ul {
    position: fixed;
    width: 100%;
    top: 120px;
    left: -100%;
    text-align: center;
    background-color: #c2c7db;
    background-image: url(../img/crystal-dropdown-left.png), url(../img/crystal-dropdown-right.png);
    background-repeat: no-repeat;
    background-size: 25%, 20%;
    background-position: left center, right center;
    
}

nav ul {
    list-style: none;
    float: right;
}

nav ul li {
    display: block;
    line-height: 20px;
}

nav ul li a {
    color:rgb(50, 3, 94);
    display: block; /* a-tag by default is inline, block allows to be able click on the exact word, not the whole line occupied by a-tag, allows to have margin around */
    padding: 15px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    transition: color 0.5s;
}

nav ul li a:hover {
    transform: scale(1.2);
    color: #8b6bc0;
    text-decoration: underline;
    text-underline-position: under;
}

#current-page {
    color: #d65db1;
}

.logo {
    float: left;
    padding: 10px 0 0 20px;
}

label #hamburger, label #cancel {
    color:rgb(50, 3, 94);
    font-size: 30px;
    float: right;
    line-height: 80px;
    margin-right: 20px;
    cursor: pointer;
}

label #hamburger{
    display: block;
}

label #cancel {
    display: none;
}
#check {
    display: none;
}

#check:checked ~ ul {
    left: 0;
}

#check:checked ~ label #hamburger {
    display: none;
}

#check:checked ~ label #cancel {
    display: block;
}



/* FOOTER STYLES */

.wavy {
    background-image: url(../img/waves-reflected.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 200px;
}

footer{
    background-color: #E3D7E1;
    display: flex;
    justify-content: space-between;
    
}


.footer-box ol{
   list-style: none;
   text-align: center;
   line-height: 2;
   
}

.footer-box ol li a{
   text-decoration: none;
   color: rgb(50, 3, 94);
}
.footer-box ol li a:hover{
   background-color: rgba(50, 3, 94, 0.3);
}

.footer-row {
   padding-top:40px; 
   text-align: center;
   font-size: 12px;
}  



/* HOMEPAGE STYLES */

#heroHome{
    background-image: url(../img/HomeHero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height:70vh;
 }
 #heroHome h1{
    color:white;
    text-align: center;
 }
 #heroHome span{
    display: block;
    font-family: 'Allura';
    text-align: center;
    font-weight: normal;
 }
 
 #quotation{
    min-height: 60px;
    padding:20px;
    background-color: #7c5090;
    color:white;
    font-style: italic;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
 }

 #shifted-content {
    height: 340px;
    position: relative;
    overflow-x: clip;
 }

 #video-shadow {
    position: absolute;
    top: -20px;
    left:60px;
 }

 #shape-bg {
    display: flex;
    justify-content: center;
    align-items: center;
 }
 
  #shape-bg p {
    padding: 60px;
    text-align: center; 
    background-color: rgba(168, 187, 215, 0.8);
 }

 .blub-bg {
    background-image: url(../img/index-BG.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
  }

 .div-center {
    background-color: #E0DAE5;
    padding:60px;
    text-align: center;
 }

  #flex-bg {
    background-image: url(../img/PendantsBG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    min-height:600px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
 }
  
  #flex-bg p{
    background-color: rgba(50, 3, 94, 0.5);
    padding:80px;
    color: white;
    text-align: center;
 }

 .div-center-noBG{
    margin-top:10px;
    padding:10px;
  }

  .div-center-noBG h2 {
    margin-bottom: 20px;
  }

  .div-center-noBG p{
    text-align: center;
    padding-bottom: 10px;
  }

  .cards-container, .cards-container-purple{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
 }
 
 .cards{
    width: 70%;
    background-color: white;
    border: 2px solid rgba(50, 3, 94, 0.2);
    margin: 30px;
    padding: 30px 5px;
    text-align: center;
    border-radius: 15px;
    transition:0.2s;
 }
 
 .cards:hover{
    box-shadow: 10px 10px 10px rgba(50, 3, 94, 0.3);
 }
 
 .card-image img{
    width: 70%;
 }
 
 .card-description p{
    color:rgb(50, 3, 94);
    text-align: center;
    font-style: italic;
 }
 
 .card-link a{
    background-color: rgb(50, 3, 94);
    border-radius: 15px;
    color: white;
    padding: 6px 10px;
    text-decoration: none;
    font-weight: bold;
 }
 .card-link a:hover{
    background-color: #E0DAE5;
    color: rgb(50, 3, 94);
 }


 #green-diamond h3 {
    text-align:center;
    color:#27a214;
    margin: 10px 0px 20px;
 }

 #indigo-diamond h3 {
    text-align:center;
    color: #00416A;
    margin: 10px 0px 20px;
 }

#pink-bg{
    background-color: #E3D7E1;
    padding: 20px;
}
#pink-bg p, #purple-bg p{
    text-align: justify;
}

#purple-bg{
    background-color: #7c5090;
    padding: 20px;
    color: white;
}



/* GEMSTONES A-Z STYLES */

#heroAZ{
    background: url(../img/AZHero.jpg) rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height:70vh;
 }
 #heroAZ h1{
    padding-left:10px;
    color:white;
    text-align: left;
    width: 40%;
 }


 .gem-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(50, 3, 94, 0.2);
    border-radius: 10px;
    margin: 2%;
 }

 .gem-container img{
    width: 75%;
    object-fit: cover;
 }
 .gem-container a{
    text-align: center;
 }

 .gem-container h3{
    padding-top: 10px;
}

/* HEALING GEMSTONES STYLES */

#heroHealing{
    background: url(../img/Healing.jpg) rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height:70vh;
 }
 #heroHealing h1{
    color:white;
    text-align: center;
 }


#healing-purple img {
    width: 100%; 
    height: 100%;
}

.shifted-text{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
}
.shifted-text p{
    background-color: rgba(168, 187, 215, 0.8);
    padding: 10px;
    text-align: center;
}


.brush img, .element img{
    width: 100%;
    height: 100%;
    margin-left: 3%;
    object-fit: cover;
}

.element img {
    margin-top:10%;
}
  
.centered-paragraph {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
}
.centered-paragraph p {
    width:90%;
    text-align: justify;
    padding-bottom: 15px;
    padding-top: 15px;
}

.centered-paragraph a {
    font-weight: bold;
}

#centered-paragraph-margin p{
    margin-top: 20px;
    text-align: center;
}


#dark-blue-color #red-color, #orange-color, #yellow-color, #green-color, #blue-color, #grey-color {
    padding: 2px;
    color: white;
}

 #red-color {
    background-color: red;
 }

  #orange-color {
    background-color: orange;
  }

  #yellow-color {
    background-color: yellow;
    color: black;
  }

  #green-color {
    background-color: green;
  }

  #blue-color {
    background-color: lightblue;
    color: black;
  }

  #dark-blue-color {
    background-color: darkblue;
    color: white;
  }

  #grey-color {
    background-color: grey;
  }


/* CHOOSING GEMSTONES STYLES */

#heroChoosing{
    background: url(../img/choosingHero1.jpg) rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height:70vh;
 }

 #heroChoosing h1{
    color:white;
    text-align: center;
    margin: 0 auto;
 }

 .blub-text, .blub-text-purple, .blub-text-number {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
 }

 
 .blub-text p, .blub-text-number p{
    background-color: #E3D7E1;
    padding: 20px;
    text-align: center;
 }

 .blub-text-number p{
    margin-bottom: 2%;
 }

 .blub-text-purple p{
    background-color: #7c5090;
    padding: 20px;
    color: white;
    text-align: center;
 }

 .zodiac-container-purple{
    background-color: #7c5090;
 }

 .zodiac-cards {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 }

 .zodiac-cards h3 {
    color: white;
    font-weight: normal;
 }

 .zodiac-cards img {
    width: 60%;
 }

.wave-flipped {
    background-image: url(../img/wavesFlipped.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    min-height: 180px;
    
}

/* AGATE PAGE STYLES */


#heroAgate{
    background: url(../img/AgateHero.jpg) rgba(0, 0, 0, 0.3);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height:70vh;
 }

 #heroAgate h1 {
    color:white;
    width: 50%;
    text-align: right;
    margin-right: 10%;
 }

 #heroAgate span {
    display: block;
    font-family: 'Allura';
    font-weight: normal;
 }

 #center-image {
    display: flex;
    justify-content: center;
    align-items: center;
 }

 #center-image img {
    width: 70%;
    object-fit: cover;
 }

 #text-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-height: 320px;
    background-image: url(../img/AgateBG.jpg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: left top;
 }
 
 #text-left p{
    width:80%;
    text-align: justify;
 }

 #text-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-height: 320px;

 }
 
 #text-right p{
    width:80%;
    text-align: justify;
    
 }

 .agate-parent-order {
    display: flex;
    flex-wrap: wrap;
    
}
.agate-parent-order :nth-child(1) { /* switching child div's order */
    order: 1;
}

.agate-parent-order :nth-child(2) {
    order: 3;
}

.agate-parent-order :nth-child(3) {
    order: 2;
}

.blub-text-agate{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    
  }
  .blub-text-agate p {
    background-color: rgba(168, 187, 215, 0.8);
    padding: 10px;
    text-align: justify;
  }

  #agate-jewelry {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }



  #agate-jewelry img{
    width: 40%;
  }
  
.wraper {
    display: flex;
    justify-content: center;
    align-items: center;
}

#agate-magical p {
    padding: 10px;
    text-align: justify;
    background-color: #E3D7E1;
}
#agate-magical h3, .blub-text-agate h3 {
    padding-bottom: 10px;
}


.purple-rect-bg {
    background-color: #7c4f90;
}


/* NUMEROLOGY PAGE STYLES */

#heroNumber{
    background-image: url(../img/NumerHero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height:70vh;
 }
 #heroNumber h1{
    color:white;
    text-align: center;
 }

 #name-form{
    margin-top: 50px;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 400px;
 }

 #name-form textarea{
    border: dotted 2px #7c5090;
	border-radius: 5px;
	padding: 5px;
    background-color: #E3D7E1;
    line-height: 1.5;
    font-size: 18px;
 }
 
 #name-form input {
    height: 30px;
    border: dotted 2px #7c5090;
	border-radius: 5px;
	padding: 5px;
    background-color: #E3D7E1;
 }

 #name-form input:focus{
    border: none;
    outline: solid 2px #E3D7E1;
    background-color: #E3D7E1;
 }

 #name-form :nth-child(5){
    width: 100%;
 }

 #name-form :nth-child(2){
    width: 70%;
}

 #name-form button {
    height: 50px;
    width: 70%;
    background-color: #7c5090;
    border: none;
    color: white;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
 }

 #name-form label {
    text-align: center;
 }

.numerology-form-bg {
    padding: 40px 0;
    border-radius: 30px;
    background-image: var(--gradient);
    background-size: 400%;
    animation: bg-animation 6s infinite alternate;
 }

 @keyframes bg-animation {
    0% { background-position: left;}
    100% { background-position: right;}
 }






/* MEDIA QUERIES */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .col-xs-1 {
        width: 8.33%;
    }
    .col-xs-2 {
        width: 16.66%;
    }
    .col-xs-3 {
        width: 25%;
    }
    .col-xs-4 {
        width: 33.33%;
    }
    .col-xs-5 {
        width: 41.66%;
    }
    .col-xs-6 {
        width: 50%;
    }
    .col-xs-7 {
        width: 58.33%;
    }
    .col-xs-8 {
        width: 66.66%;
    }
    .col-xs-9 {
        width: 75%;
    }
    .col-xs-10 {
        width: 83.33%;
    }
    .col-xs-11 {
        width: 91.66%;
    }
    .col-xs-12 {
        width: 100%;
    }
    .hideDiv{
        display: none;
    }

    .gem-container h3{
        font-size: 25px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .col-sm-1 {
        width: 8.33%;
    }
    .col-sm-2 {
        width: 16.66%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-4 {
        width: 33.33%;
    }
    .col-sm-5 {
        width: 41.66%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-7 {
        width: 58.33%;
    }
    .col-sm-8 {
        width: 66.66%;
    }
    .col-sm-9 {
        width: 75%;
    }
    .col-sm-10 {
        width: 83.33%;
    }
    .col-sm-11 {
        width: 91.66%;
    }
    .col-sm-12 {
        width: 100%;
    }
    .hideDiv{
        display: none;
    }

    .gem-container h3{
        font-size: 30px;
    }

   
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .col-lg-1 {
        width: 8.33%;
    }
    .col-lg-2 {
        width: 16.66%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-4 {
        width: 33.33%;
    }
    .col-lg-5 {
        width: 41.66%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-7 {
        width: 58.33%;
    }
    .col-lg-8 {
        width: 66.66%;
    }
    .col-lg-9 {
        width: 75%;
    }
    .col-lg-10 {
        width: 83.33%;
    }
    .col-lg-11 {
        width: 91.66%;
    }
    .col-lg-12 {
        width: 100%;
    }
    .hideDiv{
        display: block;
    }
    
    
    /* NAVIGATION STYLES */


    ul {
        width: 100%;
        top: 30px;
        left: 0;
        padding-right: 20px;
        text-align: right;        
        background-color: transparent;
        background-image: none;
    }

    nav ul li{
        display: inline-block;
    }
   
    label #hamburger, label #cancel {
        display: none;
    }

    /* end navigation */
    
    /* HOME STYLES */

    #crystal-main {
        background-image: url(../img/crystal.png);
        background-repeat: no-repeat;
        background-position: 50% 25%;
        background-size: 50%;
    }

    #heroHome h1, #heroNumber h1 {
        font-size: 60px;
    }

    #quotation p{
        width: 70%;
    }

    #shape-bg {
        min-height: 340px;
    }
    #shape-bg p{
        width: 70%;
        height: 100%;
        color: white;
        background-color: rgb(168, 187, 215);
        border-radius: 38% 62% 39% 61% / 53% 26% 74% 47%; /* shape generated by https://9elements.github.io/fancy-border-radius */
     }

     .div-center{
        padding-left: 200px;
        padding-right: 200px;
     }

    #flex-bg p{
        width:50%;
        margin-left: 40px;
        padding:80px;
        text-align: center;
        color: white;
        background-color: rgba(50, 3, 94, 0.5);
        border-radius: 38% 62% 39% 61% / 53% 26% 74% 47%;
     }

     .cards-container{
        background-image: url(../img/PurpleLine.jpg);
        background-repeat: repeat-x;
        background-position: center;
      }

      .cards-container-purple{
        background-image: url(../img/PurpleLine1.jpg);
        background-repeat: repeat-x;
        background-position: bottom;
      }

      
     #pink-bg, #purple-bg{
        background-color: transparent;
    }

    #purple-bg{
        display: flex;
    }
    
    #pink-bg p, #purple-bg p{
        width:70%;
        color: black;
    }

    #green-diamond {
        background-image: url(../img/green-diamond.png);
        background-repeat: no-repeat;
        background-size: 30%;
        background-position: bottom right;
        position:relative;
    }

    #green-diamond span{
        display: block;
        width: 300px;
        height:300px;
        margin-left: 5%;
        background-color: #E3D7E1;
    }

    #green-diamond h3{
        padding: 5px;
        background-color: white;
        border: 2px solid rgba(50, 3, 94, 0.2);
        box-shadow: 2px 2px 2px rgba(50, 3, 94, 0.3);
        border-radius: 5px;
        position: absolute;
        top: 35%;
        left: 20%;
    }

    #indigo-diamond {
        min-height: 350px;
        background-image: url(../img/ship.png);
        background-repeat: no-repeat;
        background-size: 30%;
        background-position: bottom left;
        margin: 20px 0;
        position:relative;
    }

    #indigo-diamond span{
        display: block;
        width: 300px;
        height:300px;
        background-color:#7c5090;
        float:right;
        margin-right: 5%;
    }

    #indigo-diamond h3{
        padding: 5px;
        background-color: white;
        border: 2px solid rgba(50, 3, 94, 0.2);
        box-shadow: 2px 2px 2px rgba(50, 3, 94, 0.3);
        border-radius: 5px;
        position: absolute;
        top: 30%;
        right: 20%;
    }

    #monk {
        background-image: url(../img/monk.jpg);
        background-repeat: no-repeat;
        background-size: 28%;
        background-position: bottom right;
    }

    .div-center-wave {
        min-height:200px;
        background-image: url(../img/waves.svg); /* svg generated by https://www.shapedivider.app */
        background-repeat: no-repeat;
        background-size: cover;
      }
      .div-center-wave h2{
        padding-top: 120px;
      }

    .div-center-wave-flipped{
        background-image: url(../img/waves-reflected.svg); /* svg generated by https://www.shapedivider.app */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
    }  

      #vasco {
        min-height: 350px;
        background-image: url(../img/vasco.png);
        background-repeat: no-repeat;
        background-size: 28%;
        background-position: bottom right;
      }

      
    .parent-order :nth-child(1) {
        order: 1;
    }
    
    .parent-order :nth-child(2) {
        order: 2;
    }

    /* GEMSTONES A-Z STYLES */
    
    #heroAZ h1{
        font-size: 60px;
        padding-left: 10%;
        width: 30%;
    }

    .gem-container:hover{
        box-shadow: 5px 5px 5px rgba(50, 3, 94, 0.3);
     }


    /* HEALING STYLES */

     #heroHealing h1{
       padding-right: 50px;
       width:40%;
       font-size: 60px;
       text-align: right;
    }
    

    #healing-purple {
        margin: 20px 0;
        min-height: 400px;
        width: 80%;
        position: relative;
    }

    #healing-purple span {
        display: block;
        margin-left:5%;
        height: 300px;
        width: 300px;
        background-color: #7c5090;
    }
    #healing-purple img {
        position: absolute;
        top: 15%;
        left: 10%;
        height:80%;
        width:80%;
        object-fit: cover;
    }

    #stone-therapy-bg1 {
        background-image: url(../img/stoneTherapy1.jpg);
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: bottom right;
    }

    
    .shifted-text {
        margin-top: 1%;
        
      }
    .shifted-text p {
        width: 70%;
        height: 80%;
        padding: 60px;
        border-radius: 38% 62% 39% 61% / 53% 26% 74% 47%; /* shape generated by https://9elements.github.io/fancy-border-radius */
      }

    .brush img {
        width:300px;
        margin-top: 50px;
      }  

      .stones-color {
        position: relative;
        height: 310px;
        /*border: 1px solid red;*/
      }

      .stones-color span {
        display: block;
        float: right;
        width: 150px;
        height: 310px;
        background-color: #7c5090;
      }
      .stones-color img{
        position: absolute;
        top: 55px;
        right: 20%;
        width: 200px;
      }

      #centered-paragraph-margin p{
        margin-top: 60px;
      }

      #red-color, #orange-color, #yellow-color, #green-color, #blue-color, #dark-blue-color, #grey-color {
        background-color: transparent;
        color: black;
        height: 310px;
      }

      #red-color {
        border-top: 10px dotted red;
      }

      #orange-color {
        border-top: 10px dotted orange;
      }

      #yellow-color {
        border-top: 10px dotted yellow;
      }

      #green-color {
        border-top: 10px dotted green;
      }

      #blue-color {
        border-top: 10px dotted lightblue;
      }

      #dark-blue-color {
        border-top: 10px dotted darkblue;
      }

      #grey-color {
        border-top: 10px dotted grey;
      }

      
      /* CHOOSING GEMSTONES STYLES */

      .element-box {
        width: 70%;
        margin-top: 60px;
      }

      .element-box p {
        padding: 10px;
     }

      .element-box a:hover {
        background-color: rgba(50, 3, 94, 0.2);
      }

      #heroChoosing h1{
        text-align: left;
        width: 30%;
        margin-left:5%;
        font-size: 60px;
      }

      .blub-text p, .blub-text-purple p, .blub-text-number p {
        width: 70%;
        height: 80%;
        padding: 60px;
        border-radius: 38% 62% 39% 61% / 53% 26% 74% 47%; /* shape generated by https://9elements.github.io/fancy-border-radius */
      }

    
      .element {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        

      }

      .element > img {
        width: 200px;
        margin-right: 2%;
      }

      .zodiac-container-purple {
        background-color: transparent;
        background-image: url(../img/PurpleLine1.jpg);
        background-repeat: repeat-x;
        background-position: top;
    }


    /* AGATE PAGE STYLES */

    #heroAgate h1 {
        font-size: 60px;
    }
    #center-image img {
        width: 90%;
    }

    .purple-rect-bg {
        background-color: transparent;
        background-image: url(../img/purpleSquare.jpg);
        background-repeat: no-repeat;
        background-position: left;
        overflow: hidden;
    }

    .agate-parent-order :nth-child(1) { /* switching child div's order */
        order: 1;
    }
    
    .agate-parent-order :nth-child(2) {
        order: 2;
    }
    
    .agate-parent-order :nth-child(3) {
        order: 3;
    }

    #text-left {
        justify-content: center;
        align-items: flex-end;
        min-height: 320px;
        background-size: 40%;
        
     }
     
     #text-left p{
        width:60%;
        text-align: justify;
     }

     #text-right {
        justify-content: center;
        align-items: flex-start;
        background-image: url(../img/druzyAgate.jpg);
        background-repeat: no-repeat;
        background-size: 40%;
        background-position: right center;
     }
     
     #text-right p{
        width:60%;
        text-align: justify;
     }

     .blub-text-agate, .blub-text-number {
        margin-top: 1%;
        
      }
     .blub-text-agate p, #agate-magical p {
        width: 98%;
        height: 80%;
        padding: 80px;
        text-align: center;
        border-radius: 38% 62% 39% 61% / 53% 26% 74% 47%; /* shape generated by https://9elements.github.io/fancy-border-radius */
      }

      .blub-text-agate h3, #agate-magical h3 {
        margin-bottom: 40px;
      }

      .blub-text-agate h3 {
        align-self: self-end;
      }

      #agate-magical h3 {
        text-align: left;
    }
     
      #agate-magical p {
        background-color: rgba(227, 215, 225, 0.8);
      }


      #agate-purple {
        margin: 20px 0;
        min-height: 400px;
        width: 80%;
        position: relative;
        float: right;
    }

    #agate-purple span {
        display: block;
        float: right;
        height: 300px;
        width: 300px;
        margin-right: 5%;
        background-color: #7c5090;
    }
    #agate-purple img {
        position: absolute;
        top: 15%;
        right: 20%;
        height: 80%;
        width: 80%;
        object-fit: cover;
    }

    .beads-bg {
        background-image: url(../img/agateBeads.jpg);
        background-repeat: no-repeat;
        background-position: top right;
    }

    /* NUMEROLOGY PAGE STYLES */

    #name-form {
        width: 65%;
    }

    #name-form button:hover {
        background-color: #E3D7E1;
        color:black;
        box-shadow: 5px 5px 3px  #7c5090;
     }


     #name-form :nth-child(2),  #name-form button {
        width: 40%;
     }

     #name-form :nth-child(5){
        width: 50%;
     }

     #numerology-bg {
        background-image: url(../img/numerology-bg.jpg);
        background-repeat: repeat-y;
     }
}