*{
    box-sizing: border-box;
}
body{
    background-color: #fbf8cc;
}
nav{
    /* display: flex;  
    justify-content: flex-end;   */
    padding:15px 5px;    
}
nav a,.a-style{
    text-decoration: none;
    margin-right: 25px;   
    color: crimson;
    font-weight: 600;     
} 
.content{
    width: 100%;    
    min-height: 70vh;    
    background: #c31432;   
    background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
} 
.content-img{
    width: 100%;    
    min-height: 70vh;    
    background: url("Images/bg-img3.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;   
    margin-top:-10px;
    margin-bottom: 48px; 
}

.img-item{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;    
} 

.carosol-content{
  width: 100%;
  height: 80vh;
  overflow-y: hidden;
}

.carosel-img{
    width: 100%;
    height: 700px; /* Set your desired height */
    object-fit: cover; /* This ensures the image covers the whole area without distorting */ 
} 

.carousel-txt{        
    display: flex; 
    align-items: center;
    justify-content: center;
    flex-direction: column;  
}

.person-img-slide{
  margin-top: 60px;
  margin-bottom: 50px;
}

.person-img-slide img{
  width: 500px;
  height: 400px;
  border-radius: 10px;
}
 
.img-slide-content{
    width: 100%;
    height: 40vh;
    overflow-y: hidden;
}

.img-slide{
    width: 80%px;
    height: 100%; /* Set your desired height */
    /* object-fit: cover;   */
}
 
  

.carousel-caption {
    position: absolute;
    top: 0%;
    left: 0%;
    bottom:0%;
    right: 0%; 
    color: #fff;
    
    display: flex;
    justify-content: center;
    align-items: center;


    text-align: center;
    background-color: rgba(0, 0, 0, 0.5); /* Optional: add background color with transparency */
    padding: 20px;     
    border-radius: 10px; /* Optional: add rounded corners */
  }
  

.header-content{
    /* background: rgb(34,193,195);
    background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(28,204,30,1) 100%); */
    display: block;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    background: #c31432;   
    background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.navbar{
    /* background-color: #fff; */
    background-color: #fbf8cc;
    border-bottom: 3px solid #eee;
    /* box-shadow: 1px 1px 20px 3px #000; */
}

.brand-logo{
    width: 30px; 
    margin-right: 5px;    
}

.brand-txt{
    display: inline;
    color: crimson;
}

.mobile-icon{   
    opacity: 1;
    scale: 0.5;
    color: goldenrod;
    animation: mobile-ringer linear 0.5s infinite;    
}

@keyframes mobile-ringer {
    0%{
        opacity: 0;
        scale: 0.5;
        color: goldenrod;       
    }
    100%{
        scale: 1.3;
        opacity: 1;
        color: #fff;      
    }    
}

.contact-us{
    background-color: green;
    color: #fff;
    border-radius: 10px;
    padding:8px 10px;
    border:2px solid #fff;
    text-decoration: none;
     
}

.contact-us:hover{
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    background-color: orange;
    
}

.content-alt{
    background-color: transparent;
    /* background-color: #fbf8cc; */
    width: 100%;    
    min-height: 70vh;
    margin-bottom:70px;
}

.content p{
    color: #fff;
}

.social-icons{
    display: flex;
    position: fixed;
    align-items: center;
    flex-direction: column;
    top:25%;
    right:15px;
    z-index: 100; 
} 
.svg-icons{
    height: 35px;
    margin-bottom: 10px; 
}
.svg-icons:hover{
    scale:1.1
}
/* 
#services{
  background-color: ;
} */

.nav-link{   
    color: #fff;
}
.nav-link:hover{
  color: #fff;
}

.section-header{
    text-align: center;
    padding:25px 10px;
    margin:10px;
    color:#fff;   
    text-shadow: 1px 1px 3px gold;
} 
 

.section-header-alt{
    text-align: center;
    padding:25px 10px;
    margin:10px;
    color:brown;
    text-shadow:1px 1px 5px gold ;
}

#kaantoms{
  padding-bottom: 50px;
  border:1px solid red;
}

.nav-tabs{
    border: none;
}

#myTabContent{
    background-color: #fff;
    padding:20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: max-content;       
    padding-top: 50px;
    border-top-right-radius: 10px;
}

#english ul, #tamil ul{    
    list-style-type: circle;
}

#english ul li,#tamil ul li {
    line-height: 1.8;
    color: brown;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin-bottom: 15px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
}


/* .content-left{
    transform: translateX(-120%);
    animation: left-anim linear;   
    animation-timeline: view();
}

@keyframes left-anim {
   0%{
     transform: translateX(-150%);
   }
   100%{
     transform: translateX(50%);
   }
    
} */

/* @keyframes slide-in {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}

.content-left {
    animation: slide-in linear forwards;
    animation-timeline: scroll();
    scroll-timeline: view();
} */

.contact-us-txt{
    color: #fff;
    text-decoration: none;
}


.contact-us-txt:hover{
    color: #fff;
}


.region{
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: space-evenly;
    height: max-content;
}

#contact-form{
  border: 1px solid #fff;
  padding: 20px 10px;  
  width: 100%;
  border-radius: 10px;
}

#contact-form label{
  color: #fff;
}

#contact-form input{
    width: 100%;
    padding: 5px;
    margin-bottom: 15px;

}

#submit{
    margin-top: 10px;
    background-color: green;
    color: #fff;
    border-radius: 10px;
    border:1px solid #eee;
  
}

.card{
    border-radius: 15px;
    padding:5px;
    box-shadow: 1px 1px 10px 3px #eee;
}

.card-img-top{
    border-top-left-radius:  15px;
    border-top-right-radius:  15px;
}

.card-title{
    color: brown;    
}

.card-text{
   text-align: justify;
   color: #000!important;
 }

.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top:10px;    
    z-index: 100;
    text-align: center;
    box-shadow: 1px 5px 8px 5px grey; 
    background: #c31432;   
    background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.footer-txt{
    color:#fff;
}

.footer-brand-txt{
   color: gold;
   font-weight: 600;    
}

.footer-brand-txt:hover{
    cursor: pointer;
    text-decoration: none;
    color: goldenrod;
}

 


/* chapters */

/* #chapters,#naadiHistory,#kandoms,#services{
    margin-top:-10px;
    margin-bottom: 50px;  
    background-color: #F4F6FF;   
}

#naadiAstrologyProcedure,#heritage{
    margin-top:-10px;
    margin-bottom: 60px;  
    background-color: #F4F6FF;   
} */

 .section-img{
    border-radius: 10px;
    border: 3px solid gold;
    box-shadow: 1px 1px 10px 3px azure;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
 }
  
.section-txt{
    color: #fff;
    text-align: justify;
}

.section-txt:hover{
    color: #fff;     
}

 
#contactUs{
    display: flex;
    align-items: center;
    min-height: 40vh;
}

.location-map{
    position: relative; 
    width: 100%;
    height: 0;
    padding-bottom: 45%;
}

.better{
    color: #fff;
    animation: blink linear 1s infinite;
}

@keyframes blink {
    0%{
        color:#fff;         
    }
    100%{
        color: orange;         
    }
}

.brand-content-txt{
     color:lightgreen;     
     font-weight:bold;
     text-shadow: 1px 1px 1px #eee;
     animation: blinker 1.3s infinite ease-in-out; 
} 

@keyframes blinker {
    0%{
      color:lightgreen;
    }
    100%{
        color:green;        
        text-shadow: 1px 1px 1px #eee;      
    } 
}



.brand-header{
    border:3px solid red;
    color: #fff;
    font-size: 1.8rem;
    border-radius:15px;
    padding:20px;
    margin:30px auto;
    background-color: #ffff;
    border-radius: 10px;
    border-top: 4px solid #0096a7;
    border-right: 4px solid #0096a7;
    border-bottom: 4px solid #0096a7;
    border-left: 4px solid #0096a7;
    background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* border-bottom: 4px solid orange;
    border-left: 4px solid orange; */
    box-shadow: 5px 5px 10px #888888;
    animation: titler 0.8s infinite ease-in-out;
}

@keyframes titler {
    0%{
        color: #fff;
        border-top: 4px solid orangered; 
    }
    25%{
        color: gold;
        border-right: 4px solid orangered;        
    }
    50%{
        color: #fff;
        border-bottom: 4px solid orangered;        
    }
    100%{
        color: gold;
        border-left: 4px solid orangered;
    }
}


.nav-link{
    color: brown!important;    

}

.nav-link:hover{
    color: orange!important;
}

.dropdown-menu{
    color: #fff!important;
    background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    
}

.dropdown-menu a{
    color: #fff!important;         
}

.dropdown-menu a:hover{
    color: orange!important;
    background: -webkit-linear-gradient(to right, #240b36, #c31432);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    
}