@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900&display=swap');


html {
  scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif; 
}

p {
    font-weight: 700;
    line-height: 22px;
    font-size:15px;
}

h1, h2, h3, h5 {
    text-transform: uppercase;
    font-weight: bold;
    color:#fff; 
}

h1 sup {
    font-weight: 300;
    font-size: 15px;
    position: relative;
    top:-15px;
}

.btn-default {
    font-weight: bold;
    border-radius: 10px;
    padding: 8px 20px;
    letter-spacing: 2px;
}


.navbar-default {
    background: transparent!important;
    border:none;
}


.navbar-default ul li a {
    color:#fff!important;
    background: none!important;
    padding-top: 66px;
    font-size:12px;
}

.showcase {
    background: url(../img/bkg.jpg) no-repeat center center scroll; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;   
    text-align: center;
    margin-top: -120px;
    padding: 150px 0 50px;
    color:#fff;
}

.showcase h1 {
    padding-top: 40px;
}

.showcase h5 {
    padding-top: 40px;
}

.showcase img.logo {
    margin: -110px auto;
    width: 160px;
    position: absolute;
    left: 50%;
    margin-left: -75px !important;
    display: block;
}

img.flag {
    width: 80px;
    padding-top: 40px;
}

.stipe img {
    height: 12px;
    width: 100%
}

.products {
    background: #dfe52b;
}

.products .blue .col-sm-6 {
    background: #2aaad8;
}

.green {
    text-align: right;
}

.green img {
    height: 400px;
    margin: 40px;
}

.green .text {
    padding-left: 160px;
    padding-top: 110px;
}

.blue img {
    height: 410px;
    margin: 40px 40px;
}

.blue .text { 
    padding-top: 110px;
    padding-right: 110px;
}

.scence {
    text-align: center;
    color:#fff;
}

.scence h3 {letter-spacing: 6px}

.scence p {font-weight: 400}

.scence .col-sm-3 {
    padding: 0;
}

.purple-box {
    background: #834e9e;
    padding: 60px 20px 0;
    min-height: 235px;
}

.orange-box {
    background: #f7931e;
    padding: 60px 20px 0;
    min-height: 235px;
}

.green-box {
    background: #9fcc3b;
    padding: 60px 20px 0;
    min-height: 235px;
}

.blue-box {
    background: #29abe2;
    padding: 60px 20px 0;
    min-height: 235px;
}

.coming-soon {
    background: #000;
    padding-bottom: 10px;
    text-align: center
}

.info-section {
    padding: 40px 0;
    text-align: center;
}

.info-section img {
    margin: auto;
    width: 150px;
    padding-bottom: 50px;
}

.info-section h3 {
    color:#2aaad8;
    padding-top: 20px;
}

.your-brand {
    background: url(../img/section-bkg.jpg) no-repeat center center scroll; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;   
    padding: 40px 0;
}

.your-brand .col-sm-7 {
    padding-top: 100px;
}

.your-brand h1 {
    padding-bottom: 20px;
}

.your-brand .btn {
    margin-top: 40px;
}

.contact-section {
    background: #333333;
     padding: 40px 0;
}

.contact-section h3 {margin-left: -16px;}

input, select {
   border-radius: 0!important;
}

.btn-info {
    background: #2aaad8;
    padding: 8px 22px;
}

.footer-logo {
    padding-top: 40px;
    width: 200px;
}

.footer {
    background: #000;
    text-align: center;
    color: #fff;
    padding: 10px;
}

.scence .col-sm-6, .scence .col-md-3 {padding: 0}

@media (max-width:767px) {
    h1, h2 {font-size:180%}
    .navbar-toggle {background: #2aaad8!important;border:none;}
    .icon-bar {background:#dfe52b!important}
    .navbar-header {background: #dfe52b}
    .navbar-collapse {background: #333!important;border:none;}
    .navbar-collapse ul a {padding: 10px!important}
    .showcase img.logo {margin: -40px auto;}
    .showcase h1 {padding-top: 80px;}
    .green .btn, .blue .btn {margin-bottom: 20px;}
    .green img {height: auto;margin: 40px 0;}
    .green .text {padding-left: 0px;padding-top: 0px;}
    .blue img {height: auto;margin: 40px 0px;}
    .blue .text {padding-top: 0px;padding-right: 0px;}
    .your-brand {text-align: center} 
    .your-brand .col-sm-7 {padding-top: 0px;}
    .your-brand .btn {margin-top: 20px;}
    .contact-section {padding: 10px}
    .contact-section img {margin: auto}
    .contact-section h3 {text-align: center;} 
}

@media (min-width:768px) and (max-width:1023px) {
    .green img {height: auto;margin: 0px;padding-top: 100px;}
    .green .text {padding-left: 0px;padding-top: 50px;}
    .blue img {height: auto;margin: 0px;padding-top: 80px;}
    .blue .text {padding-top: 50px;padding-right: 0px;padding-bottom: 50px;}
    
}

@media (min-width:1024px) and (max-width:1240px) {
    .green img {height: auto;margin: 0px;padding-top: 30px;}
    .green .text {padding-left: 0px;padding-top: 50px;}
    .blue img {height: auto;margin: 0px;padding-top: 15px;}
    .blue .text {padding-top: 50px;padding-right: 0px;padding-bottom: 50px;}
    .scence h3 {font-size:150%}
    .scence p {font-size:90%}
}