/* Global */
html {scroll-behavior: smooth;}
body {font-family: 'Roboto', sans-serif;color:#FFF;font-size:16px;background-color: #080D0e; margin-top:0px;}
h1,h2,h3,h4,h5,h6 {font-family: 'Kodchasan', sans-serif;text-transform: uppercase;color:#fff;}
a{text-decoration: none;color:#fff;}
a:hover {text-decoration: none;color:#68a7d5;}
a:focus {outline:0;}
a:active:focus {outline:0;}
.border-right, .border-bottom, .border-top, .border-left{border-color:#707070!important;}
.section {padding: 60px 0;}
.column-count{column-count: 2;column-gap: 40px;}
.vh-75  {height: 75vh;}

/*Navbar*/
.navbar {padding:30px 0;}
.navbar.is-scroll {background-color: #000;}
.navbar-light .navbar-nav .nav-item {padding-right: 60px;}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus{color:#fff;font-family: 'Kodchasan', sans-serif;text-transform: uppercase;}
.navbar .navbar-nav .nav-item.active a.nav-link {border-bottom: 1px solid #fff;}
.navbar-nav .nav-item:last-child {padding-right: 0px;}

/*Button*/
a.btn, button.btn {padding:15px 30px;border-radius:30px;font-family: 'Kodchasan', sans-serif;text-transform: uppercase;}
a.btn.btn-primary, button.btn.btn-primary, .btn-primary:not(:disabled):not(.disabled):active {background-color:#68a7d5;border:none;}
.btn:focus{box-shadow:none!important;}
a:-webkit-any-link:focus-visible {outline-offset:0px !important;}
:focus-visible {outline: -webkit-focus-ring-color auto 0px!important;}
a.btn.btn-tertiary {background-color:none; color:#fff;position: relative;padding: 0;margin-left: 30px;margin-right: 30px;}
a.btn.btn-tertiary::after {content: "";height: 1px;width: 100%;background-color:#fff;position: absolute;left: 0; bottom: 0px;}
.btn-link, .btn-link:focus {text-decoration: none;color: #fff;font-weight: 700;}
.btn-link:hover{text-decoration: none;color: #fff;}
button:focus {outline:none;}

/*Accordion*/
#accordion .card .card-header .icon-down.position-absolute, #accordion .card .card-header .icon-up.position-absolute {top:0;right:0;}
#accordion .card .card-header {border-radius: 25px!important;background-color: #fff;border-bottom:none;padding: 20px;}
#accordion .card {border:none;border-radius: 25px;margin-bottom:10px;}
#accordion .accordion-slider {margin-top:30px;}
#accordion .accordion-slider .card {padding-right:10px;}
#accordion .accordion-slider .card .card-bg {height:160px;background-repeat:no-repeat;background-position: center;background-size:cover;}
#accordion .accordion-slider .slider-nav button {top: 35%;}
#accordion .accordion-slider .slider-nav button:nth-child(2) {right:0;}

/*Slider*/
.slider .card .card-bg {height:300px;background-repeat:no-repeat;background-position: center;background-size:cover;}
.slider .slider-nav button {top: 43%;}
.slider .slider-nav button:nth-child(2) {right:0;}
.slider-nav .btn:disabled {opacity: .45;}

/*Gallery*/
.gallery .slider .card .card-bg {height:550px;border-radius:100px 100px 0 0;}
.gallery .slider .card {border-radius:100px 100px 0 0;}
.gallery .slider .slider-nav button {top: 50%;}

/*Icon*/
.icon20 {width:20px;height:20px;background-repeat:no-repeat;background-position: center;background-size:cover;}
.icon60 {width:60px;height:60px;background-repeat:no-repeat;background-position: center;background-size:cover;}
.icon-inline{display: inline-block;position:relative;margin-right: 10px;top: 4px;}
.icon-amazon_white {background-image: url(/assets/icons/icon-amazon_white.svg);}
.icon-temperature {background-image: url(/assets/icons/icon-temperature.svg);}
.icon-diamond {background-image: url(/assets/icons/icon-diamond.svg);}
.icon-heart {background-image: url(/assets/icons/icon-heart.svg);}
.icon-reusable {background-image: url(/assets/icons/icon-reusable.svg);}
.icon-hand {background-image: url(/assets/icons/icon-hand.svg);}
.icon-time {background-image: url(/assets/icons/icon-time.svg);}
.icon-mail {background-image: url(/assets/icons/icon-mail.svg);}
.navbar-light .navbar-toggler-icon {
    background-image: url(/assets/icons/icon-burger.svg);}

/*Typography*/
h1 {font-size: 100px;color: #fff;font-weight:700;margin-bottom: 0px;}
h2 {font-size: 54px;color: #68a7d5;font-weight:700;margin-bottom: 0px;}
h3 {font-size: 40px;color: #fff;font-weight:700;margin-bottom: 30px;}
h3 span, h1 span {color:#68a7d5;}
h4 {font-size: 26px;color: #fff;}
h5 {font-size: 24px;font-weight:700;}
h6{font-size:18px;font-weight: 700;}
.text-grey {color:#919191;}

/*Background*/
.bg-hero {background-image: url(/assets/img/bg-hero.jpg);background-position:bottom right;}
.bg-badge {background-image: url(/assets/img/bg-badge.svg);background-repeat: no-repeat;}
.bg-target {background-image: url(/assets/img/bg-target.jpg);background-repeat: no-repeat;background-position:bottom center;}
.bg-characteristics {background-image: url(/assets/img/bg-net.png);}

/*Section - Advantages*/
.section.advantages .advantage-img {height: 200px;}
.section.advantages .table-card {border-radius:20px;border:1px solid #707070; padding:30px; min-height:315px;}
.section.advantages .table-title {padding:10px;min-height: auto!important;}

/*Section Hero*/
.section.hero {height:750px;}

/*Badge*/
.badge{height: 200px;width: 200px;padding:60px 30px;bottom:0;right:0}
.badge .badge-text p {font-size: 18px; width: 100%;font-family: 'Kodchasan', sans-serif;}

/*Modal*/
.modal {color:#080D0e;}
.modal h3 {color:#68a7d5;}
.modal h4,h5 {color:#080D0e;}
.modal-footer {justify-content: flex-start;}

/* Anchor */
#characteristics {display: block;position: relative;top: -200px;visibility: hidden;}
#target {display: block;position: relative;top: -200px;visibility: hidden;}
#advantages {display: block;position: relative;top: -200px;visibility: hidden;}

/*Responsive */

/* Smartphone */
@media only screen and (max-width:767px) and (min-width:320px){
    .navbar-toggler {padding:0;}
    .bg-hero { background-image: url(/assets/img/bg-hero_mobile.jpg);background-position: bottom right -300px;}
    h1 {font-size: 60px;}
    h2 {font-size: 30px;}
    .section.advantages .table-card{min-height:435px;}
    .navbar {background-color: #000;padding:15px;}
    .section.hero {margin-top: 70px;}
    .navbar .navbar-nav .nav-item {padding-right: 15px;padding-bottom:30px;}
    .navbar-collapse {margin-top:30px;}
    .section.hero h2 {margin-top:60px;}
    .badge .badge-text p {font-size: 15px;}
    .badge {height: 150px;width: 150px;padding: 40px 30px;}
    .bg-badge {background-size:contain;}
    h3 {font-size: 30px;}
    h4{font-size: 22px;}
    .section.advantages .table-card {min-height: auto;}

}

/* Ipad Pro */
@media only screen and (min-width:1024px) and (max-width:1366px){
    .badge {line-height: 1.1!important;}
    .bg-hero {background-position: bottom right -200px;}
}

/* Tablet Normal */

@media only screen and (min-width:768px) and (max-width:1023px){
    .navbar-toggler {padding:0;}
    .bg-hero {background-position: bottom right -300px!important;}
    h1 {font-size: 80px;}
    h2 {font-size: 40px;}
    .section.advantages .table-card{min-height:435px;}
    .navbar {background-color: #000;}
    .section.hero {margin-top: 70px;}
    .navbar .navbar-nav .nav-item {padding-right: 0;padding-bottom:30px;}
}