*{margin: 0;padding: 0;}
:root{
    /* colors */
    --color-primary:#3c3c3c;
    --color-second:#ce6335;
    --body-color:#fff;
    --gray-color:#f3f3f3;
    --gray-dark-color:#404040;
    --white-color:#fff;
    --text-color:#282828;
  
    /* fonts */
    --body-font:'Nunito', sans-serif;
    --font-bold:700;
    --font-regular:400;
    --font-medium:500;
    --font-semibold:600;
    --font-black:900;
    --font-light:300;
    --shadow: #ed1c237e 0 0 10px
}
a{text-decoration: none;transition: all ease .5s;}
figure,
p,
h1,h2,h3,h4,h5,h6{margin: 0;padding:0}
ul{list-style-type: none;margin: 0;padding: 0;}
.bg-gray{background: var(--gray-color);}
.bg-dark-gray{background: var(--gray-dark-color);}
.ptb-80{padding: 80px 0;}
.overflow{overflow: hidden;}
/* .text-black{color: var(--black-color);} */
body{margin: 0;padding:0;position: relative;font-family: var(--body-font);overflow-x: hidden;}
header{position: absolute;top: 0;left: 0;right: 0;z-index: 9;background-color: transparent;padding: 16px 8px;}
.header-menu ul{list-style-type: none;margin:0;padding: 0;}
.header-menu ul li{display: inline-block;margin: 0 4px;}
.header-menu ul li a{color: var(--color-primary);font-weight: var(--font-bold);padding: 8px 10px;}
.header-menu ul li a:hover{color:var(--color-second)}
.header-right{display: flex;align-items: flex-end;justify-content: end;gap: 10px;}
.header-right a{display:block;padding: 8px 25px;border-radius: 4px;}
.header-right .price-button a{background-color: var(--color-primary);color: var(--body-color);}
.header-right .customer-button a{background-color: var(--color-second);color: var(--body-color);}
.header-right .price-button a:hover{background-color: var(--color-second);box-shadow: #28282842 0 0 10px;}
.header-right .customer-button a:hover{background-color: var(--color-primary);box-shadow: #28282842 0 0 10px;}

.section-slide{background: #efefef;height: 100vh;z-index: 2;position: relative;overflow: hidden;}
.slide-content{padding: 120px 0;}
.slide-content h1{font-weight: var(--font-medium);font-size: 28px;}
.slide-content h2{font-weight: var(--font-bold);font-size: 58;}
.slide-content h2 span{position: relative;z-index: 2;}
.slide-content h2 span::after{position: absolute;content:'';bottom: 16px;left: 0;right: 0;height:8px;background-color: var(--color-second);z-index: -1;border-radius: 8px;}
.slide-content p{font-weight: var(--font-regular);font-size: 22px;margin: 6px 0 0;}


.pricing .cards {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;gap: 15px;}
.pricing .card {background: #fff;color: hsl(233, 13%, 49%);border-radius: 0.8rem;}
.pricing .cards .card.active {background: linear-gradient(135deg, #eea300, #ce6335);;color: #fff;display: flex;align-items: center;transform: scale(1.1);z-index: 1;}
.pricing ul {margin: 2.6rem;display: flex;flex-direction: column;align-items: center;justify-content: space-around;}
.pricing ul li {list-style-type: none;display: flex;justify-content: center;width: 100%;padding: 1rem 0;}
.pricing ul li.price {font-size: 3rem;color: hsl(232, 13%, 33%);padding-bottom: 2rem;}
.pricing .shadow {box-shadow: -5px 5px 15px 1px rgba(0, 0, 0, 0.1);}
.pricing .card.active .price {color: #fff;}
.pricing .btn {margin-top: 1rem;height: 2.6rem;width: 13.3rem;display: flex;justify-content: center;align-items: center;border-radius: 4px;background: linear-gradient(135deg, #eea300, #ce6335) no-repeat;color: #fff;outline: none;border: 0;font-weight: bold;transition: all ease .5s;background-size: 400% 400%;}
.pricing .btn:hover{background-position: 100% 100%;transition: all ease .5s;}
.pricing .active-btn {background: #fff;color: var(--color-primary);}
.pricing .bottom-bar {border-bottom: 2px solid  #3c3c3c1c;}
.pricing .card.active .bottom-bar {border-bottom: 2px solid #3c3c3c1c}
.pricing .pack {font-size: 1.1rem;}

@media (max-width: 280px) {
  .pricing ul {margin: 1rem;}
  .pricing h1 {font-size: 1.2rem;}
  .pricing .toggle {display: flex;flex-direction: column;justify-content: space-around;align-items: center;height: 80px;}
  .pricing .cards {margin: 0;display: flex;flex-direction: column;}
  .pricing .card {transform: scale(0.8);margin-bottom: 1rem;}
  .pricing .cards .card.active {transform: scale(0.8);}
}

@media (min-width: 280px) and (max-width: 320px) {
  .pricing ul {margin: 20px;}
  .pricing .cards {display: flex;flex-direction: column;}
  .pricing .card {margin-bottom: 1rem;}
  .pricing .cards .card.active {transform: scale(1);}
}

@media (min-width: 320px) and (max-width: 414px) {
  .pricing .cards {display: flex;flex-direction: column;}
  .pricing .card {margin-bottom: 1rem;}
  .pricing .cards .card.active {transform: scale(1);}
}
@media (min-width: 414px) and (max-width: 768px) {
  .pricing .card {margin-bottom: 1rem;margin-right: 1rem;}
  .pricing .cards .card.active {transform: scale(1);}
}
@media (min-width: 768px) and (max-width: 1046px) {
  .pricing .cards {display: flex;}
  .pricing .card {margin-bottom: 1rem; margin-right: 1rem; }
  .pricing .cards .card.active {transform: scale(1);}
}

.background-navy {background-color: var(--sala-primary-navy, #0057fc);}
.background-dark {background-color: var(--color-primary);}
.contact-box a {display: block;padding: 16px 25px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: var(--sala-alway-white, #ffffff);font-size: 16px;font-weight: 500;}
.contact-box a span {display: block;margin-top: 7px;font-size: 18px;}
section.contact {border-top: solid 1px var(--color-second);}
.contact-heading{margin-bottom: 18px;padding: 15px 15px 15px 0;}
.contact-heading h4{font-size: 32px;line-height: 1.25;font-weight: 600;position: relative;z-index: 0;}
.contact-heading p{font-size: 18px;line-height: 1.44;font-weight: 400;margin-top: 12px;}
.field-input {margin-bottom: 20px;}
.field-input label {color: var(--sala-neutral-dark, #111111);display: block;margin-bottom: 8px; }
section.contact input,section.contact  textarea {height: 48px;line-height: 48px;padding: 0 16px;background-color: var(--sala-shade-background, #F8F9FC);color: var(--sala-neutral-dark, #111111);border: 0;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;width: 100%}
section.contact textarea {height: 240px;resize: none;}
.btn-send{color: var(--body-color);padding: 10px 28px;width: auto;-webkit-appearance: button;display: block;border: none;border-radius: 5px;transition: all ease .5s;font-size: 22px;}
.btn-send:hover{background-color: var(--color-primary);}


.banner-section{text-align:center;}
section h3{text-align:center;margin-bottom: 40px;font-size: 38px;font-weight: var(--font-bold);}
section p{font-weight: var(--font-medium);font-size: 1.15rem;}
section p strong{width: 100%;display: block;margin-bottom: 8px;}

.background-orange{background-color: var(--color-second);}
.background-gray{background-color: var(--gray-color);}
section.background-gray h3,
section.background-gray p strong{color: var(--color-second);}

.background-dark p{color: var(--body-color);}
.free-section{padding-top: 180px;}
.free-content{background-color: var(--color-second);border-radius: 50px;height: 490px;transition: all ease .5s;}
.free-content:hover{box-shadow: #3c3c3c83 0 0 30px;}
.free-image img{margin-top: -120px;}
.f-circle{position: absolute;bottom: -70px;width: 250px;height: 250px;border-radius: 50%;left: 40px;}
.f-circle-2{position: absolute;top: -70px;width: 250px;height: 250px;border-radius: 50%;right: 40px;}
.free-bg{position: absolute;inset: 0;z-index: 0;overflow: hidden;}

.free-heading{color: var(--body-color);}
.free-heading h5{margin-bottom: 8px;font-size: 38px;font-weight: var(--font-bold);}
.free-heading p{margin-bottom: 8px;font-size: 18px;font-weight: var(--font-medium);}
.free-btn{padding: 20px 40px;color: var(--color-primary);font-weight: var(--font-bold);font-size: 16px;border-radius: 12px;background-color: var(--body-color);display: inline-block;box-shadow: #3c3c3c2c 0 0 10px;margin-top: 12px;position: relative;z-index: 2;overflow: hidden;}
.free-btn::after{content: '';top:0;bottom:0;left:0;background: var(--color-second);transition: all ease .5s;z-index:-1;position: absolute;width: 0;}
.free-btn:hover{color: var(--body-color);box-shadow: #ffffff4b 0 0 10px;}
.free-btn:hover::after{width: 100%;}

#style-2::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);	border-radius: 12px;	background-color: #F5F5F5;}
#style-2::-webkit-scrollbar{width: 8px;background-color: #F5F5F5;}
#style-2::-webkit-scrollbar-thumb{border-radius: 12px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: var(--color-second)}
.w-480{width: 480px;}

.circle{position: absolute;width: 250px;height: 250px;border-radius: 50%;left: 40px;bottom: 100px;z-index: 0;}
.circle-2{position: absolute;bottom: 0%;right: 15%;width: 200px;height: 200px;border-radius: 100%;z-index: 0;}
.circle-3{position: absolute;bottom: 0%;right: 35%;width: 200px;height: 200px;border-radius: 100%;z-index: 0;}

.circle-4{position: absolute;bottom: 0%;right: 28%;width: 300px;height: 300px;border-radius: 100%;z-index: 0;}
.img-shadow{filter: drop-shadow(4px 4px 10px gray);position: relative; z-index: 2;}

.position-left {position: absolute;top: 30px;left: 50%;z-index: 999;}
.position-right {position: absolute;top: 30px;right: 30%;z-index: 999}


.ripple {position: absolute;width: 60px;height: 60px;z-index: -1;left: 50%;top: 50%;opacity: 0;margin: -30px 0 0 -30px;border-radius: 100px;-webkit-animation: ripple 1.8s infinite;animation: ripple 1.8s infinite;background: var(--color-second)}

@-webkit-keyframes ripple {
  0% {
      opacity: 1;
      -webkit-transform: scale(0);
      transform: scale(0)
  }

  100% {
      opacity: 0;
      -webkit-transform: scale(1);
      transform: scale(1)
  }
}

@keyframes ripple {
  0% {
      opacity: 1;
      -webkit-transform: scale(0);
      transform: scale(0)
  }

  100% {
      opacity: 0;
      -webkit-transform: scale(1);
      transform: scale(1)
  }
}
.position-right .ripple:nth-child(2),
.position-letf .ripple:nth-child(2) {
  animation-delay: .3s;
  -webkit-animation-delay: .3s
}
.position-right .ripple:nth-child(3),
.position-left .ripple:nth-child(3) {
  animation-delay: .6s;
  -webkit-animation-delay: .6s
}

@keyframes ripple2 {
  0% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg)
  }

  50% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg)
  }

  75% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg)
  }

  100% {
      -webkit-transform: rotate(15deg);
      transform: rotate(15deg)
  }
}

.mobil-menu-button{display: none;}
.mobil-menu-button a{display: flex;flex-direction: column;row-gap: 5px;}
.mobil-menu-button a span{width: 36px;height: 2px;background: #111;transition: all ease .5s;}
.mobil-menu-button a span:nth-child(2){width: 30px;}
.mobil-menu-button a span:nth-child(3){width: 24px;}

.mobil-menu-button a:hover span:nth-child(2){width: 36px;}
.mobil-menu-button a:hover span:nth-child(3){width: 36px;}

.mobil-menu{position: fixed;z-index: 9999;background: #11111148;left: -100%;bottom: 0;width: 0;overflow: hidden;top: 0;transition: all ease .5s;display: none;}
.mobil-menu.show{left: 0;width: 100%;}
.mobil-menu-content{width: 280px;background: #111;height: 100vh;padding: 50px 0;position: relative;}
.mobil-menu-content ul li{display: block;}
.mobil-menu-content ul li a{color:#fff;padding: 8px 10px 8px 25px;margin-bottom: 8px;display: block;font-weight: var(--font-semibold);font-family: Nunito;}
.mobil-menu-content ul li a:hover{padding-left:40px;color: var(--color-second);}
.mobil-menu-content .mobil-logo{padding: 0 30px;margin-bottom: 30px;}
.mobil-close{position: absolute;right: -10px;top: 20px;font-size: 22px;}
.mobil-close a{color: var(--body-color);width: 30px;height: 30px;display: block;background:#ce6335;text-align: center;border-radius: 6px;padding-top: 4px;}

@media (max-width: 992px){
  .header-menu-list{display: none;}
  .free-content{height: auto;}
  .free-heading{padding: 30px}
  .section-why .row .col-lg-6,
  .section-what .row .col-lg-6{margin-bottom: 50px!important;}
  .slide-text{text-align: center;}
  .slide-image{text-align: center;}
  .slide-image img{width: 100%;}
  .slide-content .container{max-width: 100%;padding:0;margin: 0;}
  .slide-text{padding: 0 75px;}
  .mobil-logo{display: flex;align-items: center;column-gap: 16px;}
  .mobil-menu,
  .mobil-menu-button{display: block;}
}

.social li a{color: var(--body-color);}

.company-content{position: absolute;bottom: 20px;}
.company-nuans a{padding-left: 25px;color: #fff;font-size: 12px;}

footer {position: relative;bottom: 0;left: 0;right: 0;background: #111 url(/content/images/footer-bg.png) no-repeat center center/cover;height: auto;width: 100vw;padding-top: 40px;color: #fff;} 
.footer-content {display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;}
.footer-content h3 {font-size: 2.1rem;font-weight: 500;text-transform: capitalize;line-height: 3rem;}
.footer-content p {max-width: 500px;margin: 10px auto;line-height: 28px;font-size: 14px;color: #cacdd2;}
.socials {list-style: none;display: flex;align-items: center;justify-content: center;margin: 1rem 0 3rem 0;}
.socials li {margin: 0 10px;}
.socials a {text-decoration: none;color: #fff;padding: 5px;}
.socials a i {font-size: 1.1rem;width: 20px;transition: color 0.4s ease;}
.socials a:hover i {color: aqua;}
.footer-bottom {background: #000;width: 100vw;padding: 20px;padding-bottom: 40px;text-align: center;}
.footer-bottom p {float: left;font-size: 14px;word-spacing: 2px;}
.footer-bottom p a {color: #ccc;font-size: 16px;text-decoration: none;}
.footer-bottom span {text-transform: uppercase;}
.footer-menu {float: right;}
.footer-menu ul {display: flex;}
.footer-menu ul li {padding-right: 10px;display: block;}
.footer-menu ul li a {color: #cfd2d6;text-decoration: none;}
.footer-menu ul li a:hover {color: #27bcda;}


@media (max-width: 500px) {
  .footer-bottom p {float: none;}
  .footer-menu ul {display: flex;margin-top: 20px;text-align: center;width: 100%;justify-content: center;}
  .footer-menu{width: 100%;}
}

.fixed-logo{display: none;}

.fixed-header{position: fixed;top: 0;transition: all ease .5s;animation: fixedShow alternate .5s;box-shadow: #0003 0 10px 10px;z-index: 1050;}
.fixed-header .fixed-logo{display: block;}
.fixed-header .logo-img{display: none;}
.fixed-header{background: var(--color-primary);}
.fixed-header .mobil-menu-button a span{background: var(--body-color);}
.fixed-header .header-menu a{color: var(--body-color);}

@media (max-width: 480px) {
  section,
  body{overflow-x: hidden;}
  .img-shadow,
  header .row .col-6{width: 100%;}
  .header-right{justify-content: center;margin-top: 12px;}
  .slide-content{padding: 160px 0 0;}
  .slide-content h1{font-size: 22px;}
  .slide-content h2{font-size: 26px;}
  .slide-content p{font-size: 17px;}
  .section-slide{height: auto;}
  .slide-content h2 span::after{bottom:5px}
  .footer-content p{padding: 0 25px;}
}

@keyframes fixedShow {
  0%{top: -96px;}
  100%{top: 0;}
}

.footer-card{margin-bottom: 25px;}

.contact-iframe iframe{width: 100%;border: none;}

footer .troy-img {
  background: url(https://cdn.dsmcdn.com/frontend/web/assets/images/troy-logo-transparent.png) no-repeat;
  display: inline-block;
  width: 56px;
  height: 26px;
  margin-right: 13px;
  background-size: cover;
}
footer .master-card-img {
  background: url(https://cdn.dsmcdn.com/web/production/footer-master-card.png) no-repeat center left;
  width: 62px;
  height: 35px;
  display: inline-block;
  position: relative;
  top: 4px;
  background-size: contain;
}
footer .visa-img {
  background: url(https://cdn.dsmcdn.com/web/production/footer-visa-black.png) no-repeat center left;
  width: 75px;
  height: 24px;
  display: inline-block;
  background-size: cover;
  position: relative;
  top: -3px;
  margin-left: -14px;
}

.owl-stage{
  display: flex;
    align-items: center;
    gap: 20px;
}


.login-content{padding: 120px 0;height: 100vh;background: #efefef;background: url(/content/images/loginbg.png) no-repeat bottom right;}
.loginForm{padding: 40px;border-radius: 12px;box-shadow: #11111128 0 0 10px;background: #ffffffc4;backdrop-filter: blur(3px);}
.loginForm h4{font-weight:var(--color-primary);font-size: 28px;margin-bottom: 9px;}
.loginForm h6{font-weight:var(--color-primary);font-size:22px;margin-bottom: 9px;}
.loginForm label{font-weight: var(--font-bold);margin-bottom: 6px;}
.loginForm .form-group{margin-bottom: 22px;}
.loginForm .form-control{border-radius: 8px;padding: 16px 10px;}
.loginForm .form-control:focus{outline: none;box-shadow: none;border-color: var(--color-second);}
.loginForm .btn-block{background: var(--color-second);color: var(--body-color);padding: 12px 28px}

.checkbox{display: flex;column-gap: 10px;align-items: center;}
.checkbox label{margin-bottom: 0;}
.checkbox input{width: 20px;height: 20px;border-color: var(--color-second);border-radius: 4px;}

.register-height{height: auto!important;}