.as_numerology_single_wrapper, .as_numerology_wrapper {
    background: linear-gradient(135deg, #a00808 0%, #764ba2 100%);
    color: #fff;
}
/*
.as_subheading {
  color: #000;
  font-size:20px;
  clear:both;
  min-height: 55px;
  padding: 5px 20px 5px 20px;
}*/
.as_numerology_box1 {
  background-color: #ffcc33;
  padding: 10px 0px 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 13px 0px rgb(0 0 0 / 4%);
  border: 1px solid rgb(231, 231, 231);
  position: relative;
  border-radius: 10px;
  z-index: 1;
  transition: all 0.3s linear;
  color:#000;
}
.as_numerology_box1:hover 
{
  box-shadow: 10px 10px 13px 10px rgb(0 0 0 / 7%);
   background-color: #e3ad0a;
}

.label_text {
    font-size: 14px;
    text-transform: capitalize;
    margin-top: 5px;
    margin-bottom: .1rem;
}
.dd_element{
    width:69px;
    float:left;
}
 
.mm_element{
    width:55px;
    float:left;
}
 
.form-control {
    height:30px;
     padding: 0px 0px 0px 10px;
     margin-right:10px;
    -webkit-appearance: block !important;
    appearance: block !important;
}
@media (max-width: 699px)
{
.as_customer_box {
    padding: 0 10px 42px;
}
.as_customer_box {
    background-color: #10334a;
    padding: 0 10px 42px;
    position: relative;
    margin: 47px -3px;
    z-index: 1;
}
}

h1 {
margin: 10px 0 10px;
}
h1 > span {
font-weight: 300;
font-size: 0.6em;
white-space: nowrap;
}
h2 {
margin: 12px 0 5px;
font-size: 2.0em;
font-weight:bold;

}
.heading-text{
    border-radius: 26px;
    width: 33%;
    background-color: #d73d3f;
    font-size: 1.2em;
    padding: 8px 30px;
     opacity: 0.9; 
    font-weight: bold;
       box-shadow: var(--shadow);
         
}
@media only screen and (max-width: 1024px) {

  .heading-text{
      width: 45%;
  }
}    

label {
/*color: #1d1d1d;*/
display: block;
margin-bottom: 3px;
font-size: 0.9em;
}
input,
select {
padding: 5px 4px 3px 8px;
font-size: 20px;
line-height: 25px;
font-family: sans-serif;
background-color: white;
border: solid grey 1px;
border-radius: 5px;
}
article {
margin: 0 0 15px 0;
padding: 10px;
}

.greet{
  font-weight:bold;color:#fff;
}
.title_style{
  font-weight:bold;
}
.tit_line{
  font-weight:bold;margin-top:20px;color:#fff;
}
.cir_loc{text-align:center;margin-top:50px; margin-bottom:50px;}
.detailSec {
position: relative;
background:linear-gradient(#ab0505, rgba(118, 75, 162, 0.9)), url(../../assets/images/astrology.jpeg);
padding: 20px;
border: 2px solid #c8e1ff;
border-radius: 20px;
color:#ffffff;
}
.pad-20{
  padding-top:20px;
}
.report_bg{
  background-color: #b50116;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top:20px;
  margin-bottom:20px;
  border-radius:10px;
}
.reset_loc{float:right;color:#fff;border:1px solid #1119c7;padding:10px; background-color:#1119c7;}
#day {
width: 60px;
}
#year {
width: 73px;
}
.name > input {
width: 100%;
}
.spaced {
margin: 0 10px;
}
.linespace > li {
margin: 10px;
}
.linespace > li > a {
font-weight: 600;
}
.field {
margin-bottom: 30px;
}
.detailSec {
z-index: 300;
min-height: 220px;
}
.desc {
display: inline-block;
margin: 10px 0 16px;
color: #fff;
font-weight:bold;
}

.calc {
display: block;
margin: 10px 0;
font-weight:bold;
}
.calc > div {
color: #0091ea;
margin: 5px 0;
}
.calc > .meaning {
margin: 15px 0 20px -10px;
color: #fff;
border-left: none;
min-height: 50px;
}
.meaning {
position: relative;
width: 100%;
margin-bottom: 10px;
font-weight:bold;
}
.meaning > div {
padding: 0 0 0 90px;
}
.meaning > .num {
position: absolute;
top: 0;
left: 10px;
font-size: 29px;
border-width: 6px;
line-height: 38px;
height: 60px;
width: 60px;
padding: 5px;
margin-right: 10px;
}
.num {
display: inline-block;
border: 4px solid grey;
background-color: white;
line-height: 24px;
height: 37px;
width: 37px;
text-align: center;
border-radius: 50%;
}
.fl {
float: left;
margin: 10px 30px;
}
.fl > a {
border-bottom: none;
}
.fl img {
border-radius: 10px;
}
.clearer {
clear: both;
height: 0;
width: 0;
}
.i18n {
position: absolute;
top: 10px;
right: 20px;
padding: 4px;
}
.i18n img {
cursor: pointer;
margin-left: 4px;
height: 11px;
width: 16px;
}

.artnum {
border-left: 10px solid grey;
}
.ml210 {
margin: 0 20px 0 260px;
}
#allNumbers {
margin: 0 0 20px 0;
}
#allNumbers > span {
padding: 5px;
display: inline-block;
height: 24px;
width: 24px;
margin-right: 10px;
}
.c1,
.c10,
.c19,
.c28 {
border-color: #f44336 !important;
}
.c2,
.c20 {
border-color: #ff9800 !important;
}
.c3,
.c12,
.c21,
.c30 {
border-color: #ffeb3b !important;
}
.c4,
.c13,
.c31 {
border-color: #4caf50 !important;
}
.c5,
.c14,
.c23 {
border-color: #48d1cc !important;
}
.c6,
.c15,
.c24 {
border-color: #2196f3 !important;
}
.c7,
.c16,
.c25 {
border-color: #6a0dad !important;
}
.c8,
.c17,
.c26 {
border-color: #d000d0 !important;
}
.c9,
.c18,
.c27 {
border-color: #ffc107 !important;
}
.c11,
.c29 {
border-color: #9c27b0 !important;
}
.c22 {
border-color: #3f51b5 !important;
}

.k1,
.k10,
.k19,
.k28 {
border-bottom-color: #f44336 !important;
}
.k2,
.k20 {
border-bottom-color: #ff9800 !important;
}
.k3,
.k12,
.k21,
.k30 {
border-bottom-color: #ffeb3b !important;
}
.k4,
.k13,
.k31 {
border-bottom-color: #4caf50 !important;
}
.k5,
.k14,
.k23 {
border-bottom-color: #48d1cc !important;
}
.k6,
.k15,
.k24 {
border-bottom-color: #2196f3 !important;
}
.k7,
.k16,
.k25 {
border-bottom-color: #6a0dad !important;
}
.k8,
.k17,
.k26 {
border-bottom-color: #d000d0 !important;
}
.k9,
.k18,
.k27 {
border-bottom-color: #ffc107 !important;
}
.k11,
.k29 {
border-bottom-color: #9c27b0 !important;
}
.k22 {
border-bottom-color: #3f51b5 !important;
}

.copy {
margin: 50px 0 20px;
color: gray;
font-size: 0.8em;
}
.grey {
color: gray;
}

#sally {
display: none;
}
#sally li {
margin-bottom: 10px;
}

.fullStar {
position: absolute;
top: 0;
left: 5px;
min-height: 220px;
}
#star-holder {
z-index: 200;
padding: 20px;
left: 10px;
top: 10px;
position: absolute;
height: 240px;
width: 240px;
}
#star-holder .num {
position: absolute;
padding: 4px;
}
#star-holder .num > span {
display: block;
opacity: 0;
position: relative;
top: 17px;
left: -34px;
width: 200px;
z-index: 100;
font-size: 0.9rem;
font-weight:bold;
background-color:cyan;
transition: opacity 0.3s ease 0.1s;
}
#star-holder .num:hover > span {
opacity: 1;
}
.num{	
color:#000000;
}
.num-p{
font-size: 30px;
font-weight: bold;
display: inline-block;
border: 4px solid #0916b3;
background-color: white;
line-height: 70px;
height: 75px;
width: 75px;
text-align: center;
border-radius: 50%;
color:#000000;
}
.days {
    font-size: 30px;
    font-weight:bold;
    color: #fff;
    padding: 10px 0px 40px 0px;
}
#star-holder .character {
top: 0px;
left: 95px;
}
#star-holder .soul {
top: 66px;
left: 9px;
}
#star-holder .agenda {
top: 65px;
left: 179px;
}
#star-holder .attitude {
top: 158px;
left: 144px;
}
#star-holder .personality {
top: 158px;
left: 44px;
}
#star-holder .destiny {
top: 88px;
left: 95px;
}
#star-holder .purpose {
display: none;
}
#star-holder .character > span {
left: 12px;
top: 0;
}
#star-holder .destiny > span {
left: 28px;
top: 0;
}
#star-holder .agenda > span {
top: 22px;
left: -28px;
}

.star > div {
z-index: 110;
width: 0;
height: 0;
border-left: 23px solid transparent;
border-right: 23px solid transparent;
border-bottom: 64px solid #c8e1ff;
}

.t0 {
position: absolute;
display: inline-block;
border-radius: 50%;
border: solid 39px #c8e1ff;
top: 81px;
left: 86px;
background-color: #c8e1ff;
}
.t1,
.t2,
.t3,
.t4,
.t5 {
position: absolute;
}
.t1 {
top: 24px;
left: 102px;
}
.t2 {
transform: rotate(72deg);
top: 68px;
left: 163px;
}
.t3 {
transform: rotate(144deg);
top: 139px;
left: 140px;
}
.t4 {
transform: rotate(-144deg);
top: 139px;
left: 64px;
}
.t5 {
transform: rotate(-72deg);
top: 68px;
left: 41px;
}
.rpt-perso .num {
padding: 4px;
}



.lo_shu_grid_ba {
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    margin-bottom: 20px;
    height: 340px;
    .large {
      color: #ffffff;
      text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #d9d9d9;
      text-align: center;
      font-weight: bold;
      margin: 0 auto;
      border-radius: 50px;
      background: #ac2024;
      width: 40px;
      min-height: 40px;
      font-size: 25px;
      display: flex;
      justify-content: center;
      place-items: center;
      position: relative;
      .cross::before,
      .cross::after {
        content: "";
        width: 0.8em;
        position: absolute;
        right: 10px;
        top: 50%;
      }
  
      .cross::before {
        border-bottom: 4px solid black;
        transform: skewY(-40deg);
      }
      .cross::after {
        border-bottom: 4px solid black;
        transform: skewY(40deg);
      }
    }
  }
  .lo_shu_grid_ba.grid1 {
    background-color: #000000;
    border: 1px solid #000000;
    color: #ffffff;
  }
  .lo_shu_grid_ba.grid2 {
    background-color: #ffc0cb;
    border: 1px solid #ffc0cb;
    color:#000000;
  }
  .lo_shu_grid_ba.grid3 {
    background-color: #008000;
    border: 1px solid #008000;
    color: #ffffff;
  }
  .lo_shu_grid_ba.grid4 {
    background-color: #833c80;
    border: 1px solid #833c80;
    color: #ffffff;
  }
  .lo_shu_grid_ba.grid5 {
    background-color: #ffa500;
    border: 1px solid #ffa500;
    color: #000000;
  }
  .lo_shu_grid_ba.grid6 {
    background-color: #c0c0c0;
    border: 1px solid #c0c0c0;
    color: #000000;
  }
  .lo_shu_grid_ba.grid7 {
    background-color: #ffffff;
    border: 1px solid #ffffff;
    color:#000000;

  }
  .lo_shu_grid_ba.grid8 {
    background-color: #4669fa;
    border: 1px solid #4669fa;
    color:#000000;

  }
  .lo_shu_grid_ba.grid9 {
    background-color: #f34423;
    border: 1px solid #f34423;
    color: #ffffff;
  }
  
/*.table{color:#fff;    border-color: #fff;}*/

@media only screen and (max-width: 670px) {
.detailSec {
padding: 20px 10px;
}

.user-details h3 {
    font-size: 22px;
}
.ml210 {
margin-left: 10px;
}
.fullStar {
position: relative;
}
.meaning > .num {
left: -10px;
}
.meaning > div {
padding-left: 60px;
}
.fl {
margin: 10px 0px;
}
.heading-text{
width: 100%;
font-size: 1em;
font-weight: bold;
padding: 10px 20px;
} 

}

@media (max-width:767px){
    .heading-text{
        width: 100%;
        font-size: 1em;
        font-weight: bold;
        padding: 10px 20px;
        } 
        
}
@media print {
@page {
margin: 1cm 1cm;
}
#sally,
article {
page-break-inside: avoid;
margin-bottom: 40px;
}
a[href^="http"]::after {
font-weight: 500;
content: " (" attr(href) ") ";
}
.num > span,
.field > label > span.grey {
display: none !important;
}
.detailSec {
border: none;
border-bottom: 2px solid silver;
}
}

.read-more{    
	background-color: #ab0505;
    padding: 1px 10px 7px 10px;
    border-radius: 20px;
	}
    :root {
            --primary: #4a6fa5;
            --secondary: #ff9800;
            --dark: #2c3e50;
            --light: #f8f9fa;
            --border: #e0e0e0;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
     /* Form Section */
     
        .form-section {
            background: linear-gradient(#ab0505, rgba(118, 75, 162, 0.9)), url(../../assets/images/astrology.jpeg);
            border-radius: 10px;
            box-shadow: var(--shadow);
            padding: 25px;
            height: fit-content;
            color: #ffffff;
        }
        
        .form-title {
            font-size: 20px;
            color: var(--dark);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .form-title i {
            color: var(--primary);
        }
     
         .form-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            margin-bottom: 30px;
        }
        
        @media (max-width: 768px) {
            .form-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark);
        }
        
        .form-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border);
            border-radius: 5px;
            font-size: 16px;
            transition: var(--transition);
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.2);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 15px;
        }
        
        @media (max-width: 576px) {
            .form-row {
                grid-template-columns: 1fr;
            }
        }
        
        .submit-btn {
            background: linear-gradient(to right, var(--secondary), #ff8a00);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            width: 100%;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .submit-btn:hover {
            background: linear-gradient(to right, #ff8a00, #e68900);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(255, 152, 0, 0.2);
        }
        
         /* Results Container */
        .results-container {
           /* display: none;
            opacity: 0;*/
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        
        .results-container.active {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        
        /* User Info Summary */
        .user-info-summary {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: white;
            padding: 30px;
            border-radius: 20px;
            margin-bottom: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            box-shadow: var(--shadow);
        }
        
        .user-details h3 {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .user-numbers {
            display: flex;
            gap: 30px;
        }
        
        .user-number {
            text-align: center;
        }
        
        .user-number-value {
            font-size: 40px;
            font-weight: 800;
        }
        

/*****Form****/