@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body,
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-family: "Poppins", serif;
    color: #000;
  }
.my-container{
    margin: 0 auto;
    padding: 0 15px;
}

:root{
  --main-color:#00364a;
  --fff-color: #fff;
}
.main-bg-color{
  background-color: var(--main-color);
}
.main-text{
  color: var(--main-color) !important;;
}
.text-fff{
  color: var(--fff-color);
}
.main-logo{
  width: 176px;
}
.phone-icon{
  animation: vibrate 3s ease-in-out infinite;

}
.menu ul{
  list-style: none;
  gap: 15px;
}
header{
  background: #454545;
}
.menu ul li>a {
  color: var(--main-color);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  position: relative;
  text-decoration: none;
}




.banner-form-w{
  padding: 20px;
  background: #124352;
  color: #fff;
  border-radius: 25px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.singapore-name-color{
  color: #b8955c;
  padding-bottom: 6px;
}

.register-size{
  background: #fff;
  color: #b8955c;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 20px;
  border-radius: 15px;
  margin-top: 5px;
  box-shadow: 0 0 10px #b8955c3f;
  animation: shake 3s ease-in-out infinite;
}
.submit-btn{
  background-color: #b8955c;
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  border: none;
  text-align: center;
}
.form-control{
  padding: 20px 10px;
  border-radius: 50px;
}

.border-b{
  border-bottom: 1px solid #9393935d;
}
.about-section{
  background: url(../images/about.jpg) no-repeat center center/cover;
  background-attachment: fixed;
  color: #fff;
}
.about-overlay{
  background: rgba(0, 0, 0, 0.8);
  padding: 150px 0;
}
.about-section p{
  font-size: 1.2rem;
  font-weight: 300;
}
.nav-tabs .nav-link.active{
  border: none;
  background: #fff;
  color: #124352;
}
.nav-tabs {
  border-bottom: none;
  gap: 10px;
}

.nav-tabs{
  background-color: #b8955c;
  padding: 4px 0;
}
.nav-tabs .nav-link {
  border-radius: 3px;
  background-color: #124352;
  color: #fff;
  font-weight: 500;
  transition: all 0.5s;
  border: none;
}

.swiper-slide img{
  width: 100%;
  border-radius: 5px;
}
.swiper-slide{
  padding: 4px;
  border: 2px solid #124352;
  border-radius: 5px;
}

.swiper-button-next,
.swiper-button-prev{
  width: 40px;
  height: 40px;
  background: #124352;
  color: #fff;
  border-radius: 10px;
}
.swiper-button-next::after,
.swiper-button-prev::after{
  font-size: 20px;
}

.city{
  background: url(../images/city.jpg) no-repeat center center/cover;
  background-attachment: fixed;
  color: #fff;
}
.city-overlay{
  background: rgba(0, 0, 0, 0.7);
  padding: 150px 0;
}

.city-overlay p{
  font-size: 1.2rem;
  font-weight: 300;
}

/* h1,h2,h3,h4,h5,h6{
  color: #999;
} */
.c-fff{
  color: #fff !important;
}
.f-h3{
  font-size: 30px;
    font-weight: 500;
    color: rgb(16, 19, 39);
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0px;
}

.c-h2 a{
  color: rgb(0, 66, 82);
    text-decoration: none;
    font-weight: 700;
}

.cf-email{
  font-weight: 300;
    color: #b8955c;
    font-size: 20px;
    text-align: center;
    padding: 10px 0px;
    
}

.social-links{
  padding: 10px 0 ;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.enquire{
  font-size: 19px;
  padding: 4px 6px;
  background-color: #b79855;
  color: #fff;
  text-align: center;
}

.pri-pol{
  text-align: center;
  padding-bottom: 10px;
}
.pri-pol a{
  color:#000;
  text-decoration: none;
}
.copyright-text{
  text-align: center;
  color:#000;
}

.register{
position: fixed;
bottom: 10px;
right: 10px;
background:#b79855 ;
animation: bounce 1s ease-in-out infinite;
color: #fff;
box-shadow: 0 0 10px #b8955c3f;
border-radius: 50px;
}
.brochure{
  position: fixed;
  bottom: 10px;
  left: 10px;
  background:#b79855 ;
  /* animation: bounce 1s ease-in-out infinite; */
  color: #fff;
  box-shadow: 0 0 10px #b8955c3f;
  border-radius: 50px;
  
}
.register:hover{
animation: none;
color: #fff;
}
.model-btn-close{
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 30px;
  cursor: pointer !important;
  border:none;
  background: none !important;
}

.iti {
  width: 100%;
  color: #000;
  font-size: 12px;
  /*height:41px;*/
}
.banner-number .iti__flag-container{
    margin-bottom:23px;
}

.model-width{
  width: 100% !important;
  padding: 20px;
  background: #124352;
  color: #fff;
  border-radius: 25px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.form-group{
    height:65px;
    margin:0px;
}

@keyframes shake {
  0% { transform: translateX(0); }
  10% { transform: translateX(-10px); }
  20% { transform: translateX(10px); }
  30% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  50% { transform: translateX(-10px); }
  60% { transform: translateX(10px); }
  70% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
  90% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}

@keyframes vibrate {
  0% { transform: translateX(0) translateY(0) rotate(0); }
  10% { transform: translateX(-1px) translateY(-1px) rotate(-1deg); }
  20% { transform: translateX(1px) translateY(1px) rotate(1deg); }
  30% { transform: translateX(-1px) translateY(1px) rotate(-1deg); }
  40% { transform: translateX(1px) translateY(-1px) rotate(1deg); }
  50% { transform: translateX(-1px) translateY(-1px) rotate(-1deg); }
  60% { transform: translateX(1px) translateY(1px) rotate(1deg); }
  70% { transform: translateX(-1px) translateY(1px) rotate(-1deg); }
  80% { transform: translateX(1px) translateY(-1px) rotate(1deg); }
  90% { transform: translateX(-1px) translateY(-1px) rotate(-1deg); }
  100% { transform: translateX(0) translateY(0) rotate(0); }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0); /* Start and end at the original position */
  }
  25% {
    transform: translateY(-20px); /* Move up */
  }
  50% {
    transform: translateY(0); /* Return to original position */
  }
  75% {
    transform: translateY(-10px); /* Move up slightly */
  }
}