@import url('./font.css'); 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    color: #16191cff;
};

:root {
  }
  body {
    font-family: 'Inter-Regular';
    font-size: 14px;
  }
  
  .long,
.short {
  display: flex;

  border-radius: 12px;
  border: 1px solid #ffffff33;
  padding: 24px;
}
.long {
  background: #25262eff;
}
.short {
  background: #3470D7;
}
.default-buy-btn{
  border: 1px solid #ADB7CD;
  width: 100%;
  border-radius: 8px;
  height: 42px;
  color: #042040;
  font-weight: bold;
}
.default-buy-btn:hover{
  border: 1px solid #16191C;
  background-color: #fff;
}
.primary-buy-btn{
  width: 100%;
  border-radius: 8px;
  height: 42px;
  background-color: #4088FF;
  color: #fff;
  font-weight: bold;
}
.primary-buy-btn:hover{
  background-color: #3470D7;
}
.concat-buy-btn{
  width: 100%;
  border-radius: 8px;
  height: 42px;
  background-color: #16191C;
  color: #fff;
  font-weight: bold;
}
.concat-buy-btn:hover{
  background-color:#2e3033;
}
.pay-methods{
  display: flex;
  img{
    height: 32px;
  }
}


.nav-item:hover {
  background-color: rgba(64, 136, 255, 0.1);
  color: #4088FF;
}

.nav-item:hover .down-icon {
  display: none;
}

.nav-item:hover .down-icon-up {
  display: block;
}
.product-flat-box{
  display: none;
}
.product-nav:hover.product-flat-box{
  display: block;
}


.btn-parent:hover .right-arrow{
  display: none;
}
.btn-parent:hover .right-arrow-active{
  display: block;
}

.pricing-card:hover .buy-arrow-active{
  display: block;
}
.pricing-card:hover .buy-arrow{
  display: none;
}
.submit-btn:hover .submit-to-right {
  display: none;

}
.submit-btn:hover .submit-to-right-active {
display: block;

}


.nav-item1:hover .nav-item1-subMenu{
  display: block;
  top: 40px;
  padding-top: 20px;
  left: 20px;
}
.nav-item2:hover .nav-item2-subMenu{
  display: block;
  top: 40px;
  padding-top: 20px;
  left: 20px;
}
.nav-item3:hover .nav-item3-subMenu{
  display: block;
  top: 40px;
  padding-top: 20px;
  left: -175px;
}
.nav-item4:hover .nav-item4-subMenu{
  display: block;
  top: 40px;
  padding-top: 20px;
  left: -340px;
}

.pay-list-scroll::-webkit-scrollbar {
  background-color: transparent;
  width: 8px;
}
.pay-list-scroll::-webkit-scrollbar-track {
  background-color: transparent !important;
}
.pay-list-scroll::-webkit-scrollbar-thumb {
  background: #8b8b8b;
  width: 1px !important;
  border-radius: 4px !important;
}
.pay-list-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.coupon-wrap:hover{
  border:1 solid #6b7280 !important;
}
.uni-popup-content{
  padding: 4px 0;
  box-shadow: 0 4px 10px #0000001a;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid rgba(229,230,235);
  overflow: auto;
}
.popup-wrap{
  background-color: #fff;
}
.uni-popup-content li{
  line-height: 36px;
  cursor: pointer;
}
.uni-popup-content li:hover{
  background-color: rgba(242,243,245);
}

.arrow-delay {
  transition: all .1s ease;
}
.custom-border{
  position: relative;
  background-color: #1F2029;
  border-radius: 16px;
  border-left: 1px solid   rgba(255, 255, 255, 0.2);
  border-right: 1px solid   rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  /* border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)) 1 1; */
}

.dropdown-tab:hover{
  background-color: rgba(64, 136, 255, 0.1);
  color: #4088FF;
}
.dropdown-box {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  position: absolute;
  right: 31px;
}
#avatar-control:hover .dropdown-box{
  display: block;
}
#avatar-control:hover .dropdown-down-icon{
  transform: rotate(180deg);
  transition: all 0.2s ease-in;
}


/* login or register Form style */

.login-form .input-col {
  width: 100%;
}

.login-form .input-col .control-group {
  padding-bottom: 8px;
  width: 100%;
}

.login-form .input-col .form-input-wrap {
  border: 1px solid #dfe6f3;
  /* padding: 16px; */
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  padding: 0 16px;
}

.login-form .input-col .form-input-wrap input {
  outline: none;
  width: 100%;
  height: 55px;
}
.pop-message{
  z-index: 999999;
  position: fixed;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.start-now:hover .to_right{
  display: none;
}
.start-now:hover .to_right_active{
  display: block;
}
.truncate-title{
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
}
.ellipsisClass{
  display: -webkit-box;
  font-size: 16px;
  font-style: normal;
  max-height: 69px;
  overflow: hidden;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  line-height: 2em !important;
}

.truncate-title {
  overflow: hidden; /* 隐藏超出部分 */
  display: -webkit-box; /* 使用弹性盒子布局 */
  -webkit-box-orient: vertical; /* 设置文本垂直排列 */
  -webkit-line-clamp: 2; /* 限制显示两行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: normal; /* 允许换行 */
  word-wrap: break-word; /* 允许单词内换行 */
 
}
.truncate-title  span{
  text-wrap: wrap !important;
}

.blogClass:hover .titleClass {
  text-decoration: underline;
}
.cover-image:hover img {
  transform: scale(1.2);
  transition: all 0.3s;
}
.signUp-btn {
  width: 116px;
  height: 42px;
  margin-left: 1.5rem;
  display: flex;
  padding-left: 1.5rem;
  align-items: center;
  border-width: 2px;
  border-color: #16191C;
  border-style: solid;
  border-radius: 0.5rem;
  background: linear-gradient(180deg,#fff,#dfe6f3);
  color: #fff;
  transition: background 0.3s;
}
.signUp-btn:hover {
  background: linear-gradient(180deg, #DFE6F3, #DFE6F3);
  color:#16191c
}
.pricingClass:hover {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.htmlClass  {
    text-wrap: wrap !important;
    font-weight: 400;
    font-size: 18px;
    color: #16191c;
    font-family: 'Inter-Regular' !important;
    line-height: 27px;
    text-align: left;
  }
  .htmlClass span {
    text-wrap: wrap !important;
    font-weight: 400;
    font-size: 18px;
    color: #16191c;
    line-height: 27px;
    font-family: 'Inter-Regular' !important;
    text-align: left;
  }
  .htmlClass h3{
    font-weight: 600;
    font-size: 34px;
    color: #16191c;
    font-family: 'Inter-Regular' !important;
    line-height: 54px;
    text-align: left;
  }
  .titleClass {
    display: -webkit-box; /* 将元素设置为弹性盒子 */
    -webkit-box-orient: vertical; /* 设置盒子方向为垂直 */
    -webkit-line-clamp: 3; /* 限制显示的行数 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
  .blogClass:hover .titleClass {
    text-decoration: underline;
  }
  .truncate {
    display: -webkit-box; /* 将元素设置为弹性盒子 */
    -webkit-box-orient: vertical; /* 设置盒子方向为垂直 */
    -webkit-line-clamp: 2; /* 限制显示的行数 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
    word-wrap: break-word; /* 允许单词内换行 */
    overflow: hidden;
    white-space: normal;
  }

  .title-shadow{
    box-shadow: 0px 0px 4px 0px rgba(64,136,255,0.46); border: 1px solid rgba(64,136,255,0.4);
  }

.conuntries-box:hover .countryRight-icon{
  display: none;
}

.conuntries-box:hover .countryRight-hover{
  display: block !important;
}
.view-local:hover .right-arrow-icon{
  display: none;
}
.view-local:hover .right-arrow-icon-hover{
  display: block;
}
.single-line{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px;
  line-height: 22px;
  cursor: pointer;
}