* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    width: 100%;
    overflow-x: hidden;
}
.imgprofile{
    width: 60%;
    height: 60%;
    border-radius: 50%
}
.imgprofile:hover{
      border: 8px solid rgba(255, 255, 255, 0.688);
}
.dropdown-item:hover{
    background: #ba9a63e1;
}

/* //maincont */
.mainCont{
    background: url(../image/content-bg.jpg);
    height: 145vh;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

/* //bannercont */
.bannerCont{
    height: 70vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    /* background: #9d7f4ae1; */
    background: url(../image/bg-section-home.jpg);
}
.bannerContpart1{
    height: 60vh;
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}
.bannerContContent{
  height: 30vh;
  width: 100%;
  color: white;
  font-size: 16px;
  font-weight: bold;
}
.bannerContContent2{
  height: 19vh;
  width: 100%;
  color: white;
  font-size: 18px;
}
.bannerContContent3{
  height: 6vh;
  width: 100%;
  color: white;
  font-weight: bold
}
.bannerContbtn{
  height: 5vh;width: 100%;color: white;font-weight: bold
}

.bannerContPart2{
    height: 70vh;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}
.bannerContPart2 img{
    width: 70%;height: auto
}
.bannerContContrntp{
  font-weight: bold;
  font-size: 40px;
}
@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.animated-rotate {
  animation: rotate 10s linear infinite;
}
@media only screen and (max-width: 767px){
    .bannerCont{
        height: 30vh;
    }
    .bannerContpart1{
        height: 25vh;
    }
    .bannerContContrntp{
      font-weight: bold;
      font-size: 14px;
    }
    .bannerContContent{
       font-weight: unset;
       font-size: 8px;
       height: 13vh;
    }
    .bannerContContent2{
      font-size: 8px;
      height: 10vh;
    }
    .bannerContContent3{
      font-size: 6px;
      height: 5vh;
      display: flex;
      align-items: center;
    }
    .bannerContPart2{
        height: 32vh;
    }
    .bannerContContent h1{
        font-size: 14px;
    }
    .bannerContbtn{
        height: 6vh;
    }
    .bannerContbtn button{
        font-size: 13px;
        padding: 3px 4px;
        font-size: 9px;
    }
    .bannerContPart2 img{
        width: 75%;
    }
 
    .imgprofile{
       width: 52%;
       height: 52%;
    }
}
  /* <!-- //cardsChats --> */
  .chatCont1{
    height: 35vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .chatCard1{
    border: 1px solid rgba(50, 50, 50, 0.435);
    height: 20vh;
    width: 22%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 5px;
  }
  .icondesign{
    font-size: 25px;
    background: black;
    color :#BA9A63;
    padding: 18px 14px 15px 16px;
    border-radius: 50%;
  }
  .chatCard1 p{
    font-size: 18px
  }
  .icondesign2{
    font-size: 25px;
    background: black;
    color :#BA9A63;
    padding: 12px 17px 12px 17px;
    border-radius: 50%;
  }
  .icondesign4{
    width: 23%;
    height: auto;
    background: black;
    padding: 14px 14px 15px 16px;
    border-radius: 50%;
  }
  .icondesign3{
    font-size: 25px;
    background: black;
    color :#BA9A63;
    padding: 13px 17px 13px 17px;
    border-radius: 50%;
  }
  @media only screen and (max-width: 767px){
    .chatCard1{
        height: 13vh;
    }
    .icondesign{
        padding: 10px 11px 11px 9px;
        font-size: 14px;
    }
    .chatCard1 p{
        font-size: 8px;
        text-shadow: 2px 2px 4px rgb(203 3 3);
    }
    .icondesign2{
        padding: 8px 10px 9px 12px;
        font-size: 14px;
    }
    .icondesign3{
        font-size: 14px;
        padding: 10px 13px 9px 14px;
    }
    .icondesign4{
        width: 60%;
    }
    .chatCont1{
        height: 15vh;
    }
  }
  /* <!-- //choose --> */
  .chooseCont{
    height: 67vh;
    width: 100%;
    background: url(../image/content-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover
  }
  .chooseCont2{
    background: #d9d5ce5f;
    height: 67vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
  }
  .chooseConthead{
    height: 8vh;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #BA9A63;
  }
  .chooseConthead p{
    color: #BA9A63;
    font-size: 30px;
    font-weight: bold;
  }
  .chooseborder{
    height: 1vh;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
 
  }
  .chooseSign{
    height: 12vh;
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center
  }
  .chooseSign p{
    color: #000000;
    font-size: 20px;
    letter-spacing: 1px;
  }
  .choosebox{
    height: 37vh;
    width: 88%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
  }
  .choosebox2{
    display: none;
  }
  .chooseContCard{
    height: 54vh;
    width: 100%;
  }
  .chooseknow{
    height: 6vh;
    width: 98%;
    display: flex;
    justify-content: end;
    align-items: center;
    color: #353535d7;
    font-weight: bold;
  }
  .choosecard1{
    height: 55vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center
  }
  .choosecard1A{
    display: none;
  }
  @media only screen and (max-width: 767px){
    .chooseConthead{
        height: 4vh;
        border-bottom: 1px solid #BA9A63;
        width: 40%;
    }
    .chooseConthead p{
        font-size: 20px;
        margin-bottom: 0%;
        font-weight: bolder;
    }
    .chooseborder{
        height: 1vh;
    }
    .chooseSign{
        height: 9vh;
    }
    .chooseSign p{
        font-size: 14px;
    }
    .choosebox{
        display: none;
    }
    .choosebox2{
        height: 71vh;
        width: 88%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center
    }
    .chooseCont{
        height: 78vh;
    }
    .chooseCont2{
        height: 78vh;
    }
    .choosecard1{
     display: none;
    }
    .choosecard1A{
      height: 68vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center
    }
    .chooseContCard{
      height: 70vh;
      width: 100%;
    }
  }
  /* . <!-- //total --> */
  .totalCont{
    height: 20vh;
    width: 100%;
    background: #21212C;
    display: flex;
    justify-content: center;
    align-items: center
  }
  .totalCont1{
    height: 15vh;
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
  }
  .totalContHead{
    height: 13vh;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
  }
  .totalContent1{
    color: white;
    font-size: 25px;
    font-weight: bold;
  }
  .totalContent2{
    color: #b5bad3;
  }
  .totalContHead2{
    height: 13vh;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
  }
  .totalContHead3{
    height: 13vh;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  @media only screen and (max-width: 767px){
    .totalCont{
      height: 10vh;
    }
    .totalContent1{
      font-size: 12px;
    }
    .totalContent2{
      font-size: 10px;
    }
    .totalContHead{
      width: 23%;
    }
    .totalContHead3{
      width: 23%;
    }
  }
  /* forms */
  .formCont{
    height: 90vh;
    width: 100%;
    background: url(./image/content-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover
  }
  .formCont2{
    background: #d9d5ce5f;
    height: 90vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .formFirst{
    height: 65vh;
    width: 30%;
    background: white;
    border-radius: 5px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center
  }
  @media only screen and (max-width: 767px){
    .formCont{
      height: 211vh;
    }
    .formCont2{
      flex-direction: column;
      height: 211vh;
    }
    .formFirst{
      width: 90%;
    }
  }
  /* <!-- //banner --> */
  .banner2Cont{
    height: 20vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center
  }
  .banner2Cont img{
    width: 25%;
    height: auto
  }
  @media only screen and (max-width: 767px){
    .banner2Cont{
      flex-direction: column;
      height: 42vh;
    }
    .banner2Cont img{
      width: 100%;
    }
  }
  /* <!-- //ourastrologers --> */
  .ourastroCont{
    background: #21212C;
    height: 71vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
  }
  .ourastroCont2{
    height: 70vh;
    width: 90%;
  }
  .ourastroContHead{
    height: 14vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center
  }
  .headp{
    color: #BA9A63 ;font-size: 35px;
    margin: 0%;
  }
  .headp2{
    color: white;
    margin: 0%;
  }
  /* .Content{
    height: 60vh;
    width: 100%;
  } */
  .ourastroContContent{
    height: 60vh;
    width: 100%;
    display: block;
  }
  .ourastroContContentNew{
    display: none;
  }
  @media only screen and (max-width: 767px){
    .headp{
      font-size: 20px;
    }
    .headp2{
      font-size: 12px;
    }
    .ourastroCont2{
      height: 56vh;
    }
    .ourastroContHead{
      height: 10vh;
    }
    .ourastroContContent{
      display: none;
    }
    .ourastroContContentNew{
      height: 45vh;
      width: 100%;
      display: block;
    }
    .ourastroCont{
      height: 58vh;
    }
  }

.kundliformMain{
  width: 100%;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kundliformMain2{
  height: 65vh;
  width: 80%;
  background: white;
  border-radius: 5px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.formhead{
  width: 94%;
  height: 7vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.formheadtxt{
  font-weight: bold;
  font-size: 25px
}
.forminput{
  width: 89%;
  height: 7vh;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center
}
@media only screen and (max-width: 767px){
.kundliformMain2{
  width: 100%;
}}
/* //aboutus */
.aboutusCont{
  height: 29vh;
  width: 100%;
  background: #28282f;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.aboutcontimg{
  height: 28vh;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.aboutcontimg img{
  width: 70%;
  height: auto;
  border-radius: 50%;
}
.aboutcontConent{
  height: 25vh;
  width: 70%;
}
.aboutTitle{
  font-size: 20px;
  color: #b5bad3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.616);
  width: 32%;
}
.aboutCotnent{
  color: white;
  font-size: 15px
}

@media only screen and (max-width: 767px){
  .mainCont{
    height: 73vh;
  }
  .aboutcontimg{
    height: 17vh;
    width: 30%;
  }
  .aboutcontConent{
    height:18vh;
    width: 67%;
  }
  .aboutTitle{
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.616);
    width: 60%;
    margin-bottom: 4px;
  }
  .aboutCotnent{
    font-size: 7px;
    letter-spacing: 1px;
  }
  .aboutusCont{
    height: 20vh;
  }
  
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#whatsappButton {
  animation: fadeOut 1s infinite;
}

#cardsHover {
--c: #BA9A63; /* the border color */
--b: 8px;    /* the border thickness*/
--g: 5px;     /* the gap on hover */

padding: calc(var(--g) + var(--b));
--_g: #0000 25%,var(--c) 0;
background: 
conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g))
 var(--_i,200%) 0  /200% var(--_i,var(--b))  no-repeat,
conic-gradient(            at bottom var(--b) left  var(--b),var(--_g))
 0   var(--_i,200%)/var(--_i,var(--b)) 200%  no-repeat;
transition: .3s, background-position .3s .3s;
cursor: pointer;
}
#cardsHover:hover {
--_i: 100%;
transition: .3s, background-size .3s .3s;
}

@media only screen and (max-width: 767px){
  #cardsHover {
    --c: #BA9A63; /* the border color */
    --b: 6px;    /* the border thickness*/
    --g: 5px;     /* the gap on hover */
    
    padding: calc(var(--g) + var(--b));
    --_g: #0000 25%,var(--c) 0;
    background: 
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g))
     var(--_i,200%) 0  /200% var(--_i,var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b),var(--_g))
     0   var(--_i,200%)/var(--_i,var(--b)) 200%  no-repeat;
    transition: .3s, background-position .3s .3s;
    cursor: pointer;
    }
    #cardsHover:hover {
    --_i: 100%;
    transition: .3s, background-size .3s .3s;
    }
}

.image-circle {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border-top: 3px dashed #BA9A63;
  border-right: 3px dashed #BA9A63;
  border-left: 3px dashed #000000;
  border-bottom: 3px dashed #000000;
  padding: 10px;
  animation: spin 10s infinite linear;
}
.image-circle img {
  animation: spin 10s infinite reverse linear;
  width: 100%;

}
@keyframes spin {
  100% {
      transform: rotate(1turn);
  }
}