@import url('https://fonts.googleapis.com/css2?family=Acme&family=Comfortaa:wght@300;400;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');


* {
     margin: 0px;
     padding: 0px;
}



html {
     overflow-x: hidden;
     scroll-padding-top: 9rem;
     scroll-behavior: smooth;
    
 }
 
 html::-webkit-scrollbar {
     width: 6px;
 }
 
 html::-webkit-scrollbar-track {
     background: transparent;
 
 }
 
 html::-webkit-scrollbar-thumb {
     background: hsl(0, 5%, 27%);
     border-radius: 6px;
 }
 


.google-te-combo {
     width: 200px; 
     scroll-behavior: smooth;
     border-radius: 6px; 
 }
 
 .google-te-combo::-webkit-scrollbar {
     width: 8px; 
 }
 
 .google-te-combo::-webkit-scrollbar-track {
     /* background: #f1f1f1; */
     background: transparent; 
 }
 
 .google-te-combo::-webkit-scrollbar-thumb {
     background: #888; 
     border-radius: 6px; /* Rounded corners for the scrollbar thumb */
 }
 
 .google-te-combo::-webkit-scrollbar-thumb:hover {
     background: #555; /* Color of the scrollbar thumb on hover */
 }

.up-nav {
     background-color: cadetblue;
     margin: 5px 5px;
     padding: 10px 5px;
     display: flex;
     justify-content: space-around;
     flex-direction: row;
     border-radius: 4px;

}
.google-te-combo{
     height: 30px;
     border-radius: 20px;
     padding: 4px;
    outline: none;

}

.nav-sticy {
     position: sticky;
     top: 0;
     right: 0;
     z-index: 10;
     will-change: transform;
}


/* Reach us css*/
.payment-cont {

     position: relative;
     overflow: hidden;
     background-color: #FFF;
     clear: both;
}

.cont-pay {
     padding: 5px 30px;
     position: relative;

}

.payment-con {
     display: flex;
     flex-direction: row;
     position: relative;


}



.fancy-title {
     position: relative;
     margin-bottom: 30px;
}

.nobottom-margin {
     margin-bottom: 0 !important;

}

.frm-info-pay {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: row;

}

.sm-form-control {
     display: block;
     width: 100%;
     height: auto;
     padding: 8px 1px;
     font-size: 15px;
     line-height: 1.42857143;
     color: #555555;
     background-color: #ffffff;
     background-image: none;
     border: 2px solid #DDD;
     border-radius: 0 !important;
     transition: border-color ease-in-out .15s;
}




/*footer section with footer-winget*/

#footer-sidebar {
     color: #fff;
     background: #34495e;
     padding: 20px 0;
}

.footer-widget h4:after {
     content: "";
     background-color: #2c3e50;
     display: block;
     width: 50px;
     height: 2px;
     margin: 5px 0;
}

.footer-widget a {
     color: #fff;
}

.footul {
     list-style: none;
     padding: 0;
     margin: 0;
     padding-left: 24px;
}

.footul li {
     margin-bottom: 3px;
}

.footul li:before {

     padding-right: 5px;
}

.footul li a {
     text-decoration: none;
}

.footul li a:hover {
     color: #238373;
}

#footer {
     color: #fff;
     background: #2c3e50;
     padding: 18px 50px;
}

#social-icons {
     list-style: none;
     color: #fff;
     margin: 0;
     padding: 0;
}

#social-icons li {
     display: inline-block;
     padding-left: 5px;
}

#social-icons li a {
     color: #fff;
     font-size: 23px;

}

/*register css*/
select[name=slc] {
     width: 100%;
     padding: 0px 30px;
     margin: 8px 0;
     display: inline-block;
     box-sizing: border-box;
}

.modal-body {

     z-index: 1;
     /* Sit on top */
     left: 0;
     top: 0;
     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: auto;
     /* Enable scroll if needed */
     background-color: rgb(0, 0, 0);
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.4);
     /* Black w/ opacity */

}

.modal-content {

     border: 1px solid #888;
     width: 60%;
     /* Could be more or less, depending on screen size */
}

.modal-header,
.h4,
.close {
     background-color: #238373;
     color: white !important;
     text-align: center;
     font-size: 30px;
}

@media screen and (max-width: 768px) {
     .google-te-combo{
          margin-top:10px ;
          margin-bottom: 10px;
     }
   
     .up-nav,
     .row-c,
     .payment-con,
     .row-pay {
          flex-direction: column;
     }
     .pay-head h3{
          font-size: large;
     }

     
     .footer-widget {
          margin-bottom: 20px;
     }

     #footer {
          text-align: center;
     }

     #social-icons {
          margin-top: 10px;
     }
}