:root{
 /* --theme-color:#389929; */
    --theme-color:#6a4add;
    --back-color: #ffb034;    
    /* --back-color: #ee7f23;     */
    --light-bkcolor:#ebebeb;
    --card-color:#e96106;
    --white-color:white;
    --admin-bkcolor: #7400E7;
    --input-color: maroon;
    /* --cnt-bkcolor: #FEF4D9; */
    /* --cnt-bkcolor: #fffaf2; */
    --cnt-bkcolor: #fff0da;
    --login-color: #f74985;
    --img-bkcolor:#45dbd5;
    --img-border: #eea342;
    --eye-color: green;
    --error-color: red;
    --shadow-color: #ddd1d1;
    --head-color: #ff6100;
    --border-color: #dd8c0a;
    --body-color: #46300f;
    --green-color:#389929;
}

@font-face {
    font-family: 'myBamini';     
	src: url('../fonts/BAMINI0.eot');
	src: local('Bamini'), url('../fonts/Bamini.ttf') format('truetype');
}

@font-face {
    font-family: "FontAwesome";
    src: url("../fonts/fontawesome-webfont.eot");
    src: url("../fonts/FontAwesome.otf") format("opentype"),
        /* Open Type Font */
        /* url("../fonts/STMZH-008.ttf") format("truetype"), */
        /* Safari, Android, iOS */
        url("../fonts/fontawesome-webfont.woff") format("woff"),
        /* Modern Browsers */
        url("../fonts/fontawesome-webfont.woff2") format("woff2");
}

*{
    margin: 0;
    padding: 0;    
}

html, body {  
    background: var(--theme-color);
    box-sizing: border-box; 

    /*font-family: 'Merriweather', serif;     */
     /*font-family: 'Roboto', sans-serif; */
     /*font-family: 'Montserrat', sans-serif; */
     /*font-family: 'Raleway', sans-serif; */
     font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    
    /*font-family: 'Arima Madurai', cursive;*/
    /*font-family: 'Mukta Malar', sans-serif;*/
    /*font-family: 'Catamaran', sans-serif;*/

}

.container{
    width: calc(100% - 30px);
    margin: auto;
    background: var(--back-color);        
}

header{
     border-bottom: 3px solid var(--theme-color);     
}

header nav{
    display: flex;
    flex: row wrap;
    justify-content: space-between;
    align-items: center;
    background: var(--theme-color);
    padding: 15px 10px;
}

.navigation {
    list-style: none;
    display: flex;
    flex: row wrap;   
}

.navigation li{
    height: 30px;    
}

.navigation li a {
    text-decoration: none;
    font-family: 'Montserrat', sans-serif; 
    font-size: 14px;
    margin: 5px 10px;
    line-height: 30px;  
    height: 30px;  
    color: var(--white-color);
    transition: 0.5s;
    padding: 5px 0px;
}

.navigation li a:hover{
    color: var(--back-color);
    border-bottom: 2px solid var(--back-color);
    transition: 0.5s;    
}

/* ======================== login form======================= */
#loginform form {
    float: right;
    margin-right: 10px;
    /*margin-top: 15px;*/
}

#loginform label {
    font-size: 14px;
}

#loginform input {
    padding: 5px;
    border-radius: 3px;
    border: none;
    margin-right: 1px;
    /* border-bottom: 1px solid #fff;
    background: transparent;
    color: white; */
    font-size: 12px;
}

#loginform .userlogin{
    color: var(--back-color);
}
#loginform a{
    color: white;
}

#loginform input[type='password'] {
    width: 100px;
}

#loginform button, #register input[type='submit'],  #register input[type='button'], #quickSearch input[type='submit'],  #quickSearch input[type='button'], #search input[type='submit'],  #search input[type='button']{
    padding: 5px 15px;
    border-radius: 3px;
    background: var(--back-color);
    color: #fff;
    border: none;
    outline: none;
    font-weight: bold;
    transition: 0.5s all;
}

#loginform button:hover, #register input[type='submit']:hover ,  #register input[type='button']:hover , #quickSearch input[type='submit']:hover ,  #quickSearch input[type='button']:hover{
    color: var(--back-color);
    background: #fff;
}

/* #loginform .userlogin{
    display: none; 
} */
#loginform span, #loginform a{
    margin: 0px 5px;
}

#loginform button[name="logout"]{
    background-color: maroon;
    transition: 0.5s all;
}

#loginform button[name="logout"]:hover{
    background-color: white;
    color: red;
}

/* ================== company====================== */
.company{    
    display: flex;    
    justify-content: center;
    align-items: center;
    padding: 10px;
    align-content: center;   
    background: linear-gradient(-270deg, var(--back-color),  var(--back-color), var(--cnt-bkcolor),var(--back-color),var(--back-color)  );
}

.company .heading {
    width: 60%;
    font-family: 'Baloo Thambi', cursive;    
    color: orangered;
    text-shadow: 2px 2px 3px var(--cnt-bkcolor);
}
.company .heading h1{       
    
    /*font-family: 'Catamaran', sans-serif;*/
    /*font-family: 'Arima Madurai', cursive;*/

    /*font-family: 'Mukta Malar', sans-serif;    */
    /*font-family: 'Hind Madurai', sans-serif;*/
    /*font-family: 'myBamini', sans-serif;
    font-size: 60px;           
    font-weight: bolder; */
    
    margin: 0px 10px; 
    font-size: 40px;
    display: inline-block;
    
}

.company .heading h2{
    /*font-family: 'myBamini', sans-serif;
    font-size: 40px;           
    font-weight: bolder; */
    font-size: 30px;
    display: inline-block;
}

.company .heading img{
    width: 110px;
    height: 110px;  
    padding: 5px;
    float: left;
    border: 3px solid var(--cnt-bkcolor);
    border-radius: 50%;
    margin:10px 5px;
}
.company .head{
   margin-top: 40px;
}

.company .phone {    
    font-family: 'Montserrat', sans-serif; 
    font-size: 18px;
    font-weight: normal;
    color: var(--cnt-bkcolor);
    letter-spacing: 2px;
    text-shadow: 2px 2px 3px gray;
}

/* =========== wrapper =========================== */
.wrapper {
    background: var(--cnt-bkcolor);
/*    margin: 0px;
    padding: 10px;
    border-bottom: 3px solid #f8bd01;*/
    overflow: hidden;
}

/* ======================== top scrolling======================= */
#scrolling {
    width: 100%;
    height: 400px;
    background: 1px solid black;  
    position: relative;
    overflow: hidden;
}

#scrolling h1 {
    /*font-family: 'Baloo Thambi', cursive;*/    
    font-size: 24px;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 190px;
    width: 100%;
    color: #fff;
    text-shadow: 4px 4px 10px rgb(233, 58, 166);;
    display: block;
    text-align: center;

}

#scrolling img {
    height: 400px;
    width: 100%;        
    /* box-shadow: 0px 0px 3px 3px #f90;   */
}


/*==========  QUICK SEARCH FORM ============*/

#quicksearchform{
    padding-left: 5%;
    padding-top: 5%;
    width: 35%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .7), var(--back-color));    
    position: absolute;
    top: 0;
    right: 0;
    border-top-left-radius: 50%;
    border: 1px solid var(--back-color);      
}

#quickSearch h2{      
    margin: 0px 0px 30px 33%;       
    font-family:tahoma,geneva,san-serif;  
    text-shadow: 3px 3px 12px #555252;
    color: var(--theme-color);
}

#quickSearch .buttons{
    width: 40%;
    margin:30px auto;    
}

#quickSearch input[type = "submit"], #quickSearch input[type = "button"]{
    background: var(--theme-color);
}

#quickSearch label{
    width: 150px;
    text-align: right;    
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 5px;
    font-size: 14px;
    color: var(--theme-color);
}

#quickSearch input[type="text"], #quickSearch input[type="password"], #quickSearch input[type="email"], #quickSearch textarea{
    padding: 5px;
    border-radius: 2px;
    border: none;
    margin-bottom: 5px;
    width: 50%;
}

#quickSearch select {
    width: 40%;
    padding: 3px;
    margin-bottom: 5px;    
    color: var(--theme-color);
}

#quickSearch select.mytamil {
    font-family: 'myBamini' !important;
    font-size: 16px;
}

#quickSearch span{
    font-size: 14px;
}

/* ============ brides grooms scrolling  ===================== */
#brides, #grooms{
    height: 480px;
    width: 90%;
    overflow: hidden;
    margin: 10px auto;
}


#brides>h3, #grooms>h3{

    width: 93%;
    margin: 25px 10px;
    background: linear-gradient(to bottom,  var(--back-color),  var(--cnt-bkcolor));    
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;    
    color: var(--admin-bkcolor);
    padding :10px;
    text-align :center;
    text-shadow: 2px 2px 3px gray;
    opacity: 0.8;
    /*border-bottom: 3px solid var(--theme-color);*/
}

/* ============ Office Address ======================= */

#contact {
    padding: 0;   
    padding: 10px 30px;
    /*border-top:1px solid gray;*/
    /*border-bottom:1px solid gray; */
    background: linear-gradient(to top, white, var(--back-color));
    box-shadow: 4px 4px 4px gray;
}

#contact h2,#contact h3,#contact h4,#contact p{
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}

#contact h3{
    color: #fff;
}
#office{
    height: 300px;
    width: 95%;
    margin-left: 2.3%;
    display: flex;
    justify-content: center;
    align-items: center;   
    background: linear-gradient(to top, white, var(--back-color)); 
}

#office #contact .tamil{
    font-family: 'Baloo Thambi', cursive;    
}

#office #contact h2.tamil{
    /* font-family: 'Baloo Thambi', cursive;     */
    font-size: 20px;
    font-weight: normal;
}

#office #contact p.tamil{
    /* font-family: 'Baloo Thambi', cursive;     */
    font-size: 14px;
    font-weight: normal;
}
#office #contact p.english{
    /* font-family: 'Baloo Thambi', cursive;     */
    font-size: 17px;
    font-weight: bold;
}

/* ============== registration ==================== */

#register, #search, #privacy, #help, #terms , #searchview{
    background:#FEF4D9;  
    padding: 15px;  
    margin: 15px;
}

#help ol, #privacy ul, #terms ul, #terms ol {
    margin: 15px 40px;
}

#register h2, #privacy h2, #help h2, #terms h2{        
    padding-left:20px;
    padding-top:0px;
    font-family: tahoma,geneva,san-serif;  
    text-shadow: 3px 3px 12px #555252;
    margin-bottom: 10px;
}

#register h4{
    /*background: linear-gradient(to top, #389929, #f8bd01);*/
    /* border: 1px solid gray;  */
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background: linear-gradient(to bottom, var(--back-color), var(--cnt-bkcolor));
    color: var(--admin-bkcolor);
    font-size: 18px;
    margin-left: 10px;
    padding :6px 10px;
    width:96%;
    clear:both;
    margin-bottom:12px;
    text-align :center;
    text-shadow:2px 2px 3px white;
    opacity: 0.8;
}

#register p.inputs{
    margin: 0px;
    display: inline-block;
    padding: 0px 5px;
    margin-bottom: 5px;
    width: 50%;
    color: maroon;
}


#register span.inputs{
    padding: 5px;
    margin-bottom: 5px;    
    color: maroon;
}

#register label{
    width: 150px;
    text-align: right;    
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 5px;
    font-size: 14px;
}

#register input[type="text"], #register input[type="password"], #register input[type="email"], #register textarea{
    padding: 5px;
    border-radius: 2px;
    border: none;
    margin-bottom: 5px;
    width: 50%;
}

#register img{    
    margin-left: 30%;
}

#register table{
    margin-left:100px;
    width: 70%;
}

#register table td textarea{
    padding: 5px;
    border-radius: 2px;
    border: none;
    margin-bottom: 0px;
    width: 80%;
    color: maroon;    
}

#register select {
    padding: 3px;
    margin-bottom: 5px;    
}

#register select.mytamil {
    font-family: 'myBamini' !important;
    font-size: 16px;
}

#register span{
    font-size: 14px;
}
#register input[type="radio"]{
    font-size: 14px;
}

#register div#contactoffice{
    display: none !important;     
}

#basic{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: center;
    /* border: 1px solid gray;
    border-radius: 10px; */
}
.leftContent, .mainContent{
    width: 47%;
    margin: 10px;
    /* background: #389929; */
}

.mainContent img{
    /* background: #fff; */
    width: 150px;
    height: 150px;    
    padding:5px;
    border: 2px solid #fbc531;
    border-radius: 5px;
}

.mainContent a{
    text-decoration: none;
}

.mainContent a:hover{
    text-decoration: underline;
}

.top_label{    
    position: relative;
    top: -50px;    
}
#register .socio select{
    width: 150px;
}

#content{
    width: 100%;
    margin: 10px auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;    
}

/* ================== membership ====================== */
 /* #member {
    margin: 0px;
    padding: 0px;*/
    /* background: #9e02c5; */
    /*background: linear-gradient(360deg, #9e02c5, #fff 20%) no-repeat;
    background-size: cover;  
    font-family: 'Ubuntu', sans-serif;
    background: linear-gradient(to top, #9e02c5, #fff) no-repeat;
}
*/
#member {
    box-sizing: border-box;
    width: 100%;
    margin: 100px auto;
     /*background:#FEF4D9;   */
    /* font-family: 'Ubuntu', sans-serif; */
     /*background: linear-gradient(white, grey);     */
}

#member ul {
    margin: 0;
    padding: 0;
}


#member section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

#member .heading {
    padding: 20px;
    /* background: linear-gradient(45deg, #f321d6, #5121f3); */
    background: linear-gradient(45deg,   #389929, #fbc531);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    color: #fff;
    text-transform: uppercase;
}

#member .heading h2 {
    font-weight: 200;
}

#member .heading h3 {
    font-size: 16px;
    padding: 5px 0;
    text-transform: capitalize;
}

#member #boxes .box {
    width: 20%;
    overflow: hidden;
    background: #fff;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.2), 0 20px 50px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
}

#member #boxes .box ul li {
    list-style-type: none;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: bold;
    padding: 10px;
    color: #777;
    cursor: pointer;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    transition: .5s;
    letter-spacing: 1px;
}

#member #boxes .box li:hover {
    border-left: 10px solid #389929;
    border-right: 10px solid #389929;
    transition: .5s;
}

#member #boxes .box button {
    padding: 10px 20px;
    margin: 10px;
    border-radius: 25px;
    /* background: linear-gradient(45deg, #f321d6, #5121f3); */
    background: linear-gradient(45deg,   #389929, #fbc531);
    border: none;
    outline: none;
    color: #fff;
    font-weight: bold;
}

#member #boxes .box:nth-child(2) {
    transform: scale(1.2, 1.3);
}
/* ============ payment option ======================== */
#main{
    padding: 50px 150px;
    background:#FEF4D9;       
}
#main table {
    border: 2px solid var(--theme-color);  
    text-transform: capitalize;
    width: 900px;
    margin-left: 100px;
}

#main table thead {
    color: #fff;
    background-color: var(--theme-color);  
}

#main table tbody {
    color: #000;
    
}
#main table td{
    height:30px;
    padding:5px;
    
}
#main thead{
    text-align: center;
}
#main table td:nth-child(1){
    width: 20%;
}

#main table td:nth-child(2), #main table td:nth-child(3){
    width: 30%;
}
#main table td:nth-child(4){
    width: 20%;
}

#main p{    
    font-family:Verdana, Helvetica,san-serif;
    font-weight: bold;
    font-size:14px;     
    padding-left: 100px; 
    text-shadow:2px 2px 10px #b9b9b9;
}

#main h3{
    padding-left:100px;
    font-family:tahoma,geneva,san-serif;
    text-shadow:2px 2px 10px #b9b9b9;
}

/* ============== help ============================== */

#help li{
    color: #333fe6;
    font-size: 15px;
    font-family: Source Sans Pro;
}
#help #a1,#help #a2,#help #a3,#help #a4,#help #a5,#help #a6,#help #a7,#help #a8,#help #a9,#help #a10 { 
    color: #e84118;
}

#help p, #help li a{
    /* font-family: Merriweather|Montserrat|Raleway|Roboto|Source+Sans+Pro */
    font-family: Source Sans Pro;    
    font-size: 15px;
    text-align: justify;
}

#help .contlink,#privacy .contlink{
    color: #333fe6;
}

#help .contlink:hover, #privacy .contlink:hover{
    color: #858cf0;
}

#help p, #terms p{
    color: #353333;
    margin-left: 20px;
}

/* ============== privacy ============================ */
#privacy li, #terms li,  #terms p{
    color: rgb(53, 51, 51);
    margin-bottom: 10px;
    font-family: Source Sans Pro;    
    font-size: 15px;
    text-align: justify;
}

/* ============ search view ===================== */

.profcard{
    width: 70%;
    /* padding: 10px; */
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 15px 15% ;
    /* border: 1px solid red; */
    margin-bottom: 10px;
    box-sizing: border-box;
    overflow: hidden;
    background: #FEF4D9;
    border: 1px solid #eea342;
    /*border-top-left-radius: 50px;*/
    border-top-right-radius: 50px;
}

#searchview .profheader{
    width: 100%;
    /*background: #eea342;*/
    background: linear-gradient(to bottom, var(--back-color), var(--cnt-bkcolor));
    vertical-align: center;
    margin-bottom: 5px;
    color: var(--admin-bkcolor);
    text-shadow: 2px 2px 3px white;
}

#searchview .proflink{
    width: 100%;    
    vertical-align: center;    
    /* border-bottom: 2px solid #eea342; */
    padding-bottom: 5px;       
}

#searchview .proflinking{
    text-align: right;
    text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

#searchview .proflinking:hover{
    text-decoration: underline;
    color: blue;
}

#searchview h3{
    margin: 0;
    padding: 5px;
}

#searchview p{
    margin-bottom: 5px;
}
#searchview a{
    text-decoration: none;
}

.profphoto{
    width: 30%;
}
.profphoto img{
    width: 150px;
    height: 150px;
    padding:5px;
    /* background: #21d1c8; */
    border: 2px solid #eea342;
    border-radius: 5px;
    
}
.profcontent{
    width: 70%;
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    /* padding: 8px;     */
}


.profcontent p{
    color: #389929;
    margin: 0;
}

.profcontent span{
    color: maroon;
}

/* ============ footer navigation ===================== */
footer {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    border-top: 3px solid var(--theme-color);
    border-bottom: 10px solid var(--theme-color);
    padding-top: 10px;
}

footer p {
    flex: 1 100%;
    text-align: center;
    color: #e84118;
    text-shadow: 2px 3px 10px white;
    padding: 20px;
}

.navfooter {
    border-bottom: none;
}

.navfooter li a {
    /* color: #e84118; */
    color: #fff;
    background: none;
    border: none;
    border-radius: 0px;
    border-right: 1px solid rgb(102, 98, 98);
    font-size: 14px;
    font-weight: normal;
    padding: 10px 20px;
}

.navfooter li:last-child a {
    border: 0px;
}

.navfooter li a:hover {
    color: #e84118;
    border-bottom: none;
    background: none;
}

/* ============ FORM VALIDATION =============== */
.valid{
    /* border : 1px solid green; */
    color: green;
}
label.error{
    color : red;
    display: block !important;
    width: 76% !important;    
}


/* ================ pagination ==================== */
.pagination-list {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 95%;
}

.disp-page h3 {
    margin: 0;
    padding: 0;
}

.pagination {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    margin-right: 50px;    
}

.pagination li {
    height: 25px;
    margin-right: -1px;
    border: 1px solid #d1cccc;    
}
.pagination li:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.pagination li a {
    text-decoration: none;
    padding: 10px 15px;
    height: 25px;
    line-height: 25px;
    color: #e84118;
    font-weight: normal;
    transition: 0.5s;
}

li.active {
    background:#fbc531;

}

li.active a {
    color: white;
}

.mytamil{
    font-family: 'myBamini' !important;
    /* font-size: 16px !important; */
}

.mytamil1{    
     font: bold 18px 'mybamini' !important;
}

/* ======================== view history ================*/

.table_view{
    width: 80%;
}

#basic_his table{
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ddd;
    width: 100%;     
    background: white;  
    margin-top: 20px;
    margin-bottom: 20px;  
}

#basic_his table th {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    background-color: var(--admin-bkcolor);
    color: white;
}

#basic_his table td{
    /* font-family: Helvetica, Arial, sans-serif; */
    /* font-family: 'Roboto', sans-serif; */
    /* font-family: 'Montserrat', sans-serif; */
    /* font-family: 'Raleway', sans-serif; */
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
    /* font-family: 'Merriweather', serif; */
    font-size: 15px;
}

#basic_his th, tr, td{
    padding: 8px;
}

/* #basic table th:nth-child(4), table th:nth-child(5),table th:nth-child(6){
    width: 60px;    
} */

#basic_his table tr:nth-child(odd){
    background-color: #f2f2f2;
}

#basic_his table tr:hover {
    background-color: #ddd;
}