html { -webkit-font-smoothing: antialiased; font-size: 16px; } 
body { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #fdfdfd; font-weight: 300; background:radial-gradient(circle at 55% 35%, #0f2a57 0%, #0b1f3f 35%, #081735 55%, #050e22 75%, #030812 100%), linear-gradient(to bottom, #0a1c3a 0%, #051022 60%, #020611 100%); background-repeat: no-repeat; background-attachment: fixed; }
@-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; }
#page { overflow: hidden; }

:root {
--dark: #0f0f0f;
--border: #2e2e2e;
--accent: #c9a96e;
--light: #f0ece4;
--muted: #7a7a7a;
}
.animated { visibility: hidden; }
.visible { visibility: visible; } 
.ind-60 { padding-right: 60px; padding-left: 60px; }
.ind-50 { padding-right: 50px; padding-left: 50px; }
.ind-45 { padding-right: 45px; padding-left: 45px; }
.ind-35 { padding-right: 35px; padding-left: 35px; }
.ind-30 { padding-right: 30px; padding-left: 30px; }
.ind-25 { padding-right: 25px; padding-left: 25px; }
.ind-20 { padding-right: 20px; padding-left: 20px; }
.ind-15 { padding-right: 15px; padding-left: 15px; }
.ind-10 { padding-right: 10px; padding-left: 10px; }
.ind-5  { padding-right: 5px; padding-left: 5px; }

.wide-160 { padding-top: 160px; padding-bottom: 160px; }
.wide-150 { padding-top: 150px; padding-bottom: 150px; }
.wide-140 { padding-top: 140px; padding-bottom: 140px; }
.wide-130 { padding-top: 130px; padding-bottom: 130px; }
.wide-120 { padding-top: 120px; padding-bottom: 120px; }
.wide-110 { padding-top: 110px; padding-bottom: 110px; }
.wide-100 { padding-top: 100px; padding-bottom: 100px; }
.wide-90 { padding-top: 100px; padding-bottom: 90px; }
.wide-80 { padding-top: 100px; padding-bottom: 80px; }
.wide-70 { padding-top: 100px; padding-bottom: 70px; }
.wide-60 { padding-top: 100px; padding-bottom: 60px; }
.wide-50 { padding-top: 50px; padding-bottom: 50px; }
.wide-40 { padding-top: 100px; padding-bottom: 40px; }
.wide-30 { padding-top: 100px; padding-bottom: 30px; }

.m-top-160 { margin-top: 160px; }
.m-top-150 { margin-top: 150px; }
.m-top-140 { margin-top: 140px; }
.m-top-130 { margin-top: 130px; }
.m-top-120 { margin-top: 120px; }
.m-top-110 { margin-top: 110px; }
.m-top-100 { margin-top: 100px; }
.m-top-90 { margin-top: 90px; }
.m-top-80 { margin-top: 80px; }
.m-top-70 { margin-top: 70px; }
.m-top-60 { margin-top: 60px; }
.m-top-50 { margin-top: 50px; }
.m-top-45 { margin-top: 45px; }
.m-top-40 { margin-top: 40px; }
.m-top-35 { margin-top: 35px; }
.m-top-30 { margin-top: 30px; }
.m-top-25 { margin-top: 25px; }
.m-top-20 { margin-top: 20px; }
.m-top-15 { margin-top: 15px; }
.m-top-10 { margin-top: 10px; }
.m-top-5 { margin-top: 5px; }

/*------------------------------------------*/
/*    Margin Bottom
/*------------------------------------------*/

.m-bottom-160 { margin-bottom: 160px; }
.m-bottom-150 { margin-bottom: 150px; }
.m-bottom-140 { margin-bottom: 140px; }
.m-bottom-130 { margin-bottom: 130px; }
.m-bottom-120 { margin-bottom: 120px; }
.m-bottom-110 { margin-bottom: 110px; }
.m-bottom-100 { margin-bottom: 100px; }
.m-bottom-90 { margin-bottom: 90px; }
.m-bottom-80 { margin-bottom: 80px; }
.m-bottom-70 { margin-bottom: 70px; }
.m-bottom-60 { margin-bottom: 60px; }
.m-bottom-50 { margin-bottom: 50px; }
.m-bottom-45 { margin-bottom: 45px; }
.m-bottom-40 { margin-bottom: 40px; }
.m-bottom-35 { margin-bottom: 35px; }
.m-bottom-30 { margin-bottom: 30px; }
.m-bottom-25 { margin-bottom: 25px; }
.m-bottom-20 { margin-bottom: 20px; }
.m-bottom-15 { margin-bottom: 15px; }
.m-bottom-10 { margin-bottom: 10px; }
.m-bottom-5 { margin-bottom: 5px; }
.m-bottom-0 { margin-bottom: 0; }

/*------------------------------------------*/
/*    Margin Left
/*------------------------------------------*/

.m-left-70 { margin-left: 70px; }
.m-left-60 { margin-left: 60px; }
.m-left-50 { margin-left: 50px; }
.m-left-45 { margin-left: 45px; }
.m-left-40 { margin-left: 40px; }
.m-left-35 { margin-left: 35px; }
.m-left-30 { margin-left: 30px; }
.m-left-25 { margin-left: 25px; }
.m-left-20 { margin-left: 20px; }
.m-left-15 { margin-left: 15px; }
.m-left-10 { margin-left: 10px; }
.m-left-5 { margin-left: 5px; }

/*------------------------------------------*/
/*    Margin Right
/*------------------------------------------*/

.m-right-70 { margin-right: 70px; }
.m-right-60 { margin-right: 60px; }
.m-right-50 { margin-right: 50px; }
.m-right-45 { margin-right: 45px; }
.m-right-40 { margin-right: 40px; }
.m-right-35 { margin-right: 35px; }
.m-right-30 { margin-right: 30px; }
.m-right-25 { margin-right: 25px; }
.m-right-20 { margin-right: 20px; }
.m-right-15 { margin-right: 15px; }
.m-right-10 { margin-right: 10px; }
.m-right-5 { margin-right: 5px; }

/*------------------------------------------*/
/*    Padding Top
/*------------------------------------------*/

.p-top-160 { padding-top: 160px; }
.p-top-150 { padding-top: 150px; }
.p-top-140 { padding-top: 140px; }
.p-top-130 { padding-top: 130px; }
.p-top-120 { padding-top: 120px; }
.p-top-110 { padding-top: 110px; }
.p-top-100 { padding-top: 100px; }
.p-top-90 { padding-top: 90px; }
.p-top-80 { padding-top: 80px; }
.p-top-70 { padding-top: 70px; }
.p-top-60 { padding-top: 60px; }
.p-top-50 { padding-top: 50px; }
.p-top-45 { padding-top: 45px; }
.p-top-40 { padding-top: 40px; }
.p-top-35 { padding-top: 35px; }
.p-top-30 { padding-top: 30px; }
.p-top-25 { padding-top: 25px; }
.p-top-20 { padding-top: 20px; }
.p-top-15 { padding-top: 15px; }
.p-top-10 { padding-top: 10px; }

/*------------------------------------------*/
/*    Padding Bottom
/*------------------------------------------*/

.p-bottom-160 { padding-bottom: 160px; }
.p-bottom-150 { padding-bottom: 150px; }
.p-bottom-140 { padding-bottom: 140px; }
.p-bottom-130 { padding-bottom: 130px; }
.p-bottom-120 { padding-bottom: 120px; }
.p-bottom-110 { padding-bottom: 110px; }
.p-bottom-100 { padding-bottom: 100px; }
.p-bottom-90 { padding-bottom: 90px; }
.p-bottom-80 { padding-bottom: 80px; }
.p-bottom-70 { padding-bottom: 70px; }
.p-bottom-60 { padding-bottom: 60px; }
.p-bottom-50 { padding-bottom: 50px; }
.p-bottom-45 { padding-bottom: 45px; }
.p-bottom-40 { padding-bottom: 40px; }
.p-bottom-35 { padding-bottom: 35px; }
.p-bottom-30 { padding-bottom: 30px; }
.p-bottom-25 { padding-bottom: 25px; }
.p-bottom-20 { padding-bottom: 20px; }
.p-bottom-15 { padding-bottom: 15px; }
.p-bottom-10 { padding-bottom: 10px; }
.p-bottom-0 { padding-bottom: 0; }

/*------------------------------------------*/
/*    Padding Left
/*------------------------------------------*/

.p-left-100 { padding-left: 100px; }
.p-left-90 { padding-left: 90px; }
.p-left-80 { padding-left: 80px; }
.p-left-70 { padding-left: 70px; }
.p-left-60 { padding-left: 60px; }
.p-left-50 { padding-left: 50px; }
.p-left-45 { padding-left: 45px; }
.p-left-40 { padding-left: 40px; }
.p-left-35 { padding-left: 35px; }
.p-left-30 { padding-left: 30px; }
.p-left-25 { padding-left: 25px; }
.p-left-20 { padding-left: 20px; }
.p-left-15 { padding-left: 15px; }
.p-left-10 { padding-left: 10px; }
.p-left-5 { padding-left: 5px; }
.p-left-0 { padding-left: 0px; }

/*------------------------------------------*/
/*    Padding Right
/*------------------------------------------*/

.p-right-100 { padding-right: 100px; }
.p-right-90 { padding-right: 90px; }
.p-right-80 { padding-right: 80px; }
.p-right-70 { padding-right: 70px; }
.p-right-60 { padding-right: 60px; }
.p-right-50 { padding-right: 50px; }
.p-right-45 { padding-right: 45px; }
.p-right-40 { padding-right: 40px; }
.p-right-35 { padding-right: 35px; }
.p-right-30 { padding-right: 30px; }
.p-right-25 { padding-right: 25px; }
.p-right-20 { padding-right: 20px; }
.p-right-15 { padding-right: 15px; }
.p-right-10 { padding-right: 10px; }
.p-right-5 { padding-right: 5px; }
.p-right-0 { padding-right: 0px; }

/*------------------------------------------*/
/*   BACKGROUND SETTINGS
/*------------------------------------------*/

.bg-scroll {
width: 100%;
background-attachment: fixed !important;
background-repeat: no-repeat;
background-position: center center;   
background-size: cover;
}

.bg-fixed {
width: 100%;
background-repeat: no-repeat;
background-position: center center;   
background-size: cover;
}

/*------------------------------------------*/
/*   Background Colors for Sections
/*------------------------------------------*/

.bg-lightgrey {
background: -moz-linear-gradient(top, #030c26 0%, #0e1836 100%); 
background: -webkit-linear-gradient(top, #030c26 0%, #0e1836 100%); 
background: linear-gradient(to bottom, #030c26 0%, #0e1836 100%); 

}
.bg-grey { background-color: #e8e8e8 }
.bg-red { background-color: #e35029; }
.bg-yellow { background-color: #feca16; }
.bg-green { background-color: #42a045; }
.bg-blue { background-color: #242d4d; }
.bg-lightblue { background-color: #1e88e5; }
.bg-purple { background-color: #783bb1; }
.bg-lightpurple { background-color: #715fef; }

/*------------------------------------------*/
/*   BORDER SETTINGS FOR DEMOS
/*------------------------------------------*/

.b-top { border-top: 1px solid #ddd; }
.b-bottom { border-bottom: 1px solid #ddd; }
.b-left { border-left: 1px solid #ddd; }
.b-right { border-right: 1px solid #ddd; }

h1, h2, h3, h4, h5, h6 {
color: #1fda69;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -0.025rem;  /* -0.4px */
}

/* Header H5 */
h5.h5-xs { font-size: 1.125rem; }  /* 18px */
h5.h5-sm { font-size: 1.1875rem; } /* 19px */
h5.h5-md { font-size: 1.25rem; }   /* 20px */
h5.h5-lg { font-size: 1.375rem; }  /* 22px */
h5.h5-xl { font-size: 1.5rem; }    /* 24px */

/* Header H4 */
h4.h4-xs { font-size: 1.625rem; }  /* 26px */
h4.h4-sm { font-size: 1.75rem; }   /* 28px */
h4.h4-md { font-size: 1.875rem; }  /* 30px */
h4.h4-lg { font-size: 2rem; }      /* 32px */
h4.h4-xl { font-size: 2.125rem; }  /* 34px */

/* Header H3 */
h3.h3-xs { font-size: 2.375rem; }  /* 38px */
h3.h3-sm { font-size: 2.5rem; }    /* 40px */
h3.h3-md { font-size: 2.625rem; }  /* 42px */
h3.h3-lg { font-size: 2.75rem; }   /* 44px */
h3.h3-xl { font-size: 3rem; }      /* 48px */

/* Header H2 */
h2.h2-xs { font-size: 3.25rem; }   /* 52px */
h2.h2-sm { font-size: 3.375rem; }  /* 54px */
h2.h2-md { font-size: 3.5rem; }    /* 56px */
h2.h2-lg { font-size: 3.05rem; }   /* 60px */
h2.h2-xl { font-size: 4rem; }      /* 64px */

/*------------------------------------------*/
/*   PARAGRAPHS
/*------------------------------------------*/

p.p-sm { font-size: 0.95rem; }     /* 15.2px */
p { font-size: 18px; }             /* 16px */
p.p-md { font-size: 1.125rem; }    /* 18px */
p.p-lg { font-size: 1.25rem; }     /* 20px */
p.p-xl { font-size: 1.3175rem; }   /* 22px */

/*------------------------------------------*/
/*   LISTS
/*------------------------------------------*/

ul { margin: 0; padding: 0; list-style: none; }

/*------------------------------------------*/
/*   LINK SETTINGS
/*------------------------------------------*/

a { color: #333; text-decoration: none; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; }
a:hover { color: #666; text-decoration: none; }
a:focus { outline: none; text-decoration: none; }

/*------------------------------------------*/
/*   BUTTON SETTINGS
/*------------------------------------------*/
.btn { background-color: #e35029; color: #fff; font-size: 1rem; line-height: 1; font-weight: 400; letter-spacing: 0; padding: 1rem 2rem; border: 2px solid #e35029; position:relative; z-index: 2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.btn:before { background-color: rgba(255, 255, 255, 0.15);  position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content:'';    z-index:-2; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; transition: 0.5s all ease; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;  }
.btn-white:before, .btn-tra-black:before {   background-color: rgba(0, 0, 0, 0.75); }

/*------------------------------------------*/
/*   Button Color
/*------------------------------------------*/
.btn-black { color: #fff; background-color: #333; border-color: #333; }
.btn-white { color: #333; background-color: #fff; border-color: #fff; }
.btn-tra-white { color: #fff; background-color: transparent; border-color: #fff; }
.btn-tra-black { color: #333; background-color: transparent; border-color: #333; }
.btn-yellow { color: #333; background-color: #feca16; border-color: #feca16; }
.white-color .btn-yellow { color: #333; }
.btn-lightblue { color: #fff; background-color: #42a5f5; border-color: #42a5f5; }
.btn-green { color: #fff; background-color: #56a959; border-color: #56a959; }
.btn-lightgreen { color: #000000 !important; background-color: #38d762; border-color: #38d762; }
.btn-purple { color: #fff; background-color: #513c97; border-color: #513c97; }
.btn-lightpurple { color: #fff; background-color: #715fef; border-color: #715fef; }
.btn-teal { color: #fff; background-color: #2c95ce; border-color: #2c95ce; }

/*------------------------------------------*/
/*   Button Hover
/*------------------------------------------*/
.btn:hover { color: #fff; } 
.btn-tra-yellow:hover, .btn-yellow:hover { color: #333; } 
.btn-white:hover { border-color: #444; }
.btn:hover::before { left: 0; right: 0; opacity: 1; -webkit-transition: 0.5s all ease; -o-transition: 0.5s all ease; transition: 0.5s all ease; }

/*------------------------------------------*/
/*   Button Focus
/*------------------------------------------*/
.btn:focus { color: #fff;  -webkit-box-shadow: none; box-shadow: none;  }

/*------------------------------------------*/
/*    STORE BAGE ICONS
/*------------------------------------------*/
a.store { margin-right: 15px; }
.btn:last-child,  a.store:last-child { margin-right: 0; } 
.box-icon span { font-size: 4rem; }
.box-icon-xs span { font-size: 3rem; }
.box-icon-sm span { font-size: 3.5rem; }
.box-icon-md span { font-size: 4.5rem; }
.box-icon-lg span { font-size: 5rem; }
.box-icon-xl span { font-size: 5.5rem; }

/*------------------------------------------*/
/*   BOX ICON COLOR
/*------------------------------------------*/

.grey-icon span { color: #757575; }
.red-icon span {    background: -webkit-gradient(linear, left top, left bottom, from(#ee041a), to(#ff8212)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.green-icon span {    background: -webkit-gradient(linear, left top, left bottom, from(#029c09), to(#02ce0b)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.blue-icon span {    background: -webkit-gradient(linear, left top, left bottom, from(#1d07f4), to(#37a7fc)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.skyblue-icon span {    color: #42a5f5; }
.purple-icon span {    background: -webkit-gradient(linear, left top, left bottom, from(#1d07f4), to(#f402b8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.quote p { color: #666; font-style: italic; border-left: 3px solid #6bbb28; padding-left: 20px; margin-top: 25px; margin-bottom: 20px; }
.quote-avatar { display: inline-block; margin: 0 auto;  }
.quote-avatar img { width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; } 
.quote-author { display: inline-block; padding: 0 0 0 15px; text-align: left; position: relative; top: 10px; }  
.quote-author h5 { margin-bottom: 0; }
.quote-author span { font-size: 1rem;  font-weight: 300; display: block; }
.app-devices { padding: 15px 0 0 5px; }
.app-devices .svg-inline--fa { color: rgba(50, 50, 50, 0.3); font-size: 2.6rem; line-height: 1!important;  float: left; margin-right: 0.65rem;   }
.bg-green .app-devices .svg-inline--fa, .bg-lightpurple .app-devices .svg-inline--fa, .bg-lightblue .app-devices .svg-inline--fa { color: rgba(240, 240, 240, 0.5); }
.app-devices .svg-inline--fa.f-tablet { -moz-transform: rotate(90deg);  -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg);  -o-transform: rotate(90deg); transform: rotate(90deg);  } 
.app-devices .svg-inline--fa.f-phone { margin-right: 1.25rem; } 
.app-devices-desc p { font-style: italic; line-height: 1.25; padding-right: 20%; margin-bottom: 0; }
.box-list-icon { font-size: 0.9rem; line-height: 1.5rem; float: left; margin-right: 10px; }
.box-list p { overflow: hidden; margin-bottom: 8px; }

/*------------------------------------------*/
/*   SECTION TITLE
/*------------------------------------------*/

.section-title {
position: relative;
text-align: center;
margin-bottom: 60px;     
}

.section-title h2 {
letter-spacing: -1.5px;
}

.section-title p {
font-size: 1.3125rem;    /* 21px */
padding: 0 15%;
}

#content-7 .section-title p,
#content-8 .section-title p {
margin-top: 20px;
padding: 0 5%;
}

#content-8 .section-title {
margin-bottom: 20px;
}

/*------------------------------------------*/
/*   TEXT WEIGHT
/*------------------------------------------*/

.txt-300 { font-weight: 300; }
.txt-400 { font-weight: 400; }
.txt-500 { font-weight: 500; }
.txt-600 { font-weight: 600; }
.txt-700 { font-weight: 700; }
.txt-800 { font-weight: 800; }
.txt-900 { font-weight: 900; }

.txt-upper { text-transform: uppercase; }

/*------------------------------------------*/
/*   TEXT SETTINGS FOR DEMOS
/*------------------------------------------*/

.white-color,
.white-color h2, 
.white-color h3, 
.white-color h4, 
.white-color h5, 
.white-color h6, 
.white-color p, 
.white-color a, 
.white-color li,
.white-color i, 
.white-color span { color: #fff; }

.grey-color,
.grey-color h2, 
.grey-color h3, 
.grey-color h4, 
.grey-color h5, 
.grey-color h6, 
.grey-color p, 
.grey-color a,
.grey-color li, 
.grey-color span  { color: #666; }

.lightgrey-color,
.lightgrey-color h2, 
.lightgrey-color h3, 
.lightgrey-color h4, 
.lightgrey-color h5, 
.lightgrey-color p, 
.lightgrey-color a,
.lightgrey-color li, 
.lightgrey-color span  { color: #ccc; }

.yellow-color,
.yellow-color h2, 
.yellow-color h3, 
.yellow-color h4, 
.yellow-color h5, 
.yellow-color h6, 
.yellow-color p, 
.yellow-color a, 
.yellow-color li,
.yellow-color i, 
.yellow-color span { color: #f4c744; }

.green-color,
.green-color h2, 
.green-color h3, 
.green-color h4, 
.green-color h5, 
.green-color h6, 
.green-color p, 
.green-color a, 
.green-color li,
.green-color i, 
.green-color span { color: #42a045; }

.blue-color,
.blue-color h2, 
.blue-color h3, 
.blue-color h4, 
.blue-color h5, 
.blue-color h6, 
.blue-color p, 
.blue-color a, 
.blue-color li,
.blue-color i, 
.blue-color span { color: #01b7de; }

.red-color,
.red-color h2, 
.red-color h3, 
.red-color h4, 
.red-color h5, 
.red-color h6, 
.red-color p, 
.red-color a, 
.red-color li,
.red-color i, 
.red-color span { color:  #e35029; }




/* ==========================================================================
03.  PRELOAD SPINNER
=========================================================================== */

#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #fff;
}

#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}

.cssload-flex-container li {
height: 100px;
width: 100px;
position: relative;
text-align: center;
}

.cssload-loading {
display: inline-block;
position: relative;
width: 83px;
height: 83px;
border-radius: 100%;
-o-border-radius: 100%;
-ms-border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border: 5px solid transparent;
border-bottom: 5px solid rgb(40,40,40);
border-left: 5px solid rgb(40,40,40);
animation: cssload-spinR 2.3s linear infinite;
-o-animation: cssload-spinR 2.3s linear infinite;
-ms-animation: cssload-spinR 2.3s linear infinite;
-webkit-animation: cssload-spinR 2.3s linear infinite;
-moz-animation: cssload-spinR 2.3s linear infinite;
}

.cssload-loading:before, .cssload-loading:after {
content: '';
display: block;
border-radius: 100%;
-o-border-radius: 100%;
-ms-border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
position: absolute;
}

.cssload-loading:before {
height: 49px;
width: 49px;
border: 3px solid transparent;
border-top: 3px solid rgb(40,40,40);
border-right: 3px solid rgb(40,40,40);
animation: cssload-spinL 0.86s linear infinite;
-o-animation: cssload-spinL 0.86s linear infinite;
-ms-animation: cssload-spinL 0.86s linear infinite;
-webkit-animation: cssload-spinL 0.86s linear infinite;
-moz-animation: cssload-spinL 0.86s linear infinite;
transform-origin: center center;
-o-transform-origin: center center;
-ms-transform-origin: center center;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
top: 11%;
left: 11%;
}
.cssload-loading:after {
height: 10px;
width: 10px;
background: transparent;
border: 2px solid rgb(40,40,40);
top: 35.5%;
left: 35.5%;
}

@keyframes cssload-spinR {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@-o-keyframes cssload-spinR {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}

@-ms-keyframes cssload-spinR {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}

@-webkit-keyframes cssload-spinR {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}

@-moz-keyframes cssload-spinR {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}

@keyframes cssload-spinL {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}

@-o-keyframes cssload-spinL {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(-360deg);
}
}

@-ms-keyframes cssload-spinL {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(-360deg);
}
}

@-webkit-keyframes cssload-spinL {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}

@-moz-keyframes cssload-spinL {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(-360deg);
}
}




/* ==========================================================================
03.  HEADER & NAVIGATION
=========================================================================== */

/*------------------------------------------*/
/*   LOGO IMAGE    
/*------------------------------------------*/

.navbar-brand {
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
}

.navbar-dark .navbar-nav .nav-link {
color: #fff;
}

.navbar-light .navbar-nav .nav-link {
color: #555;
}

.bg-light { 
background-color: #fff!important; 
box-shadow: 0 0 2px rgba(50, 50, 50, 0.4); 
}

.header .nb-line {
border-bottom: 1px solid rgba(255, 255, 255, .18);
}

/*------------------------------------------*/
/*   NAVIGATION BAR    
/*------------------------------------------*/

.navbar {
padding: 0.75rem 1rem;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
}

.navbar.bg-tra  {
padding: 2.25rem 1rem;
background-color: transparent;  
}

/*------------------------------------------*/
/*   NAVIGATION MENU    
/*------------------------------------------*/

.navbar-expand-lg .navbar-nav .nav-link {
font-size: 1.05rem;
font-weight: 500;
padding: 0.65rem 1.5rem;
margin-left: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; 
}

.navbar-expand-lg .navbar-nav .nav-link.pre-link {
position: relative;
}

.navbar-expand-lg .navbar-nav .nav-link span {
background-color: #38d762;
width: 5px;
height: 5px;
display: block;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
position: absolute;
top: 14px;
right: 18px;
}

.dropdown-item { 
padding-top: 0.5rem; 
padding-bottom: 0.5rem; 
}

.dropdown-toggle::after {
vertical-align: .175em;
}

/*------------------------------------------*/
/*   Navbar Social Icons  
/*------------------------------------------*/

.header-socials {
margin-top: 4px;
margin-left: 4px;
display: inline-block; 
text-align: center;
}

.header-socials span {
float: left;
width: auto !important;
display: inline-block !important;
vertical-align: top;
clear: none !important;
margin-left: 5px;
}

.header-socials a {
width: 38px;
height: 38px;
background-color: transparent;
display: block;
color: #fff;
font-size: 1rem;
line-height: 34px !important;   
border: 2px solid #fff;  
margin-left: 3px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}

.navbar-light .header-socials a {
color: #333;  
border: 2px solid #333;  
}

.header-socials a:hover {
background-color: rgba(255, 255, 255, .65);
border-color: rgba(255, 255, 255, .45);
color: #333;
}

.navbar-light .header-socials a:hover {
background-color: rgba(20, 20, 20, .75);
border-color: rgba(20, 20, 20, .45);
color: #fff;
}

/*------------------------------------------*/
/*   Navbar Store Badge  
/*------------------------------------------*/

.header-store {
margin-left: 5px;
}

/*------------------------------------------*/
/*   Navigation Menu Hover
/*------------------------------------------*/

.navbar-light .nav-link:focus, 
.navbar-light .nav-link:hover {
color: #fff;
background-color: rgba(140, 140, 140, 0.2);
}

.navbar-dark .nav-link:focus, 
.navbar-dark .nav-link:hover {
color: #fff;
background-color: rgba(240, 240, 240, 0.2);
}

.dropdown-item:focus, 
.dropdown-item:hover {
color: #333;
text-decoration: none;
background-color: #eee;
}

/*------------------------------------------*/
/*   Navbar Scroll   
/*------------------------------------------*/

.navbar.scroll.bg-tra {
padding: 12px 0;
background: 
linear-gradient(to bottom, #0a1c3a 0%, #051022 60%, #020611 100%);
background-repeat: no-repeat;
background-attachment: fixed;
box-shadow: 0 0 2px rgba(50, 50, 50, 0.4);  
}

.navbar.scroll.navbar-dark.bg-tra .nav-link {
color: #dddddd;
}

.navbar.scroll.navbar-dark.bg-tra .nav-link:hover {
background-color: rgb(0, 216, 88);
color:#000000;
}


.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{background-color: rgb(0, 216, 88);
color:#000000;}
.navbar.scroll .header-socials a {
color: #666;    
border: 2px solid #666;  
}

.navbar.scroll .header-socials a:hover {
color: #000000;     
}

.navbar.scroll .header-socials a.ico-facebook:hover { background-color: #3b5998; border-color: #3b5998; }
.navbar.scroll .header-socials a.ico-twitter:hover { background-color: #00a9ed; border-color: #00a9ed; }
.navbar.scroll .header-socials a.ico-behance:hover { background-color: #2473f6; border-color: #2473f6; }
.navbar.scroll .header-socials a.ico-google-plus:hover { background-color: #cd1111; border-color: #cd1111; }
.navbar.scroll .header-socials a.ico-linkedin:hover { background-color: #015886; border-color: #015886; }
.navbar.scroll .header-socials a.ico-dribbble:hover { background-color: #d92d84; border-color: #d92d84; }
.navbar.scroll .header-socials a.ico-instagram:hover { background-color: #beb3a8; border-color: #beb3a8; }
.navbar.scroll .header-socials a.ico-pinterest:hover { background-color: #ac281a; border-color: #ac281a; }
.navbar.scroll .header-socials a.ico-youtube:hover { background-color: #cd1b20; border-color: #cd1b20; }
.navbar.scroll .header-socials a.ico-tumblr:hover { background-color: #3a5976; border-color: #3a5976; }
.navbar.scroll .header-socials a.ico-vk:hover { background-color: #3b5998; border-color: #3b5998;}

/*------------------------------------------*/
/*   Responsive Burger Menu   
/*------------------------------------------*/

.navbar-light .navbar-toggler,
.navbar.bg-tra .navbar-toggler {
color: #888;
border-color: #888;
padding: 0.25rem 0.5rem;
font-size: 1.05rem;
}

.navbar-dark.bg-tra .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler:focus {
outline: 0;
}

/*------------------------------------------*/
/*   Logo Image
/*------------------------------------------*/

.logo-white, 
.logo-black {
display: block;
}

.navbar-dark.bg-tra .logo-black,
.navbar-light.bg-tra .logo-white,
.scroll.navbar-dark.bg-tra .logo-white,
.navbar-dark.bg-dark .logo-black,
.navbar-light.bg-light .logo-white {
display: none;
}

.navbar-dark.bg-tra .logo-white,
.navbar-light.bg-tra .logo-black,
.scroll.navbar-dark.bg-tra .logo-black,
.navbar-dark.bg-dark .logo-white,
.navbar-light.bg-light .logo-black {
display: block;
}




/* ==========================================================================
04.  HERO 
=========================================================================== */

.hero-section .container {
position: relative;
z-index: 10;
}


#hero-11 {
position: relative;
/*background: -moz-linear-gradient(top, #0e1836 0%, #030c26 100%); 
background: -webkit-linear-gradient(top, #0e1836 0%, #030c26 100%); */
background: radial-gradient(circle at 55% 35%, #0f2a57 0%, #0b1f3f 35%, #081735 55%, #050e22 75%, #030812 100%),
linear-gradient(to bottom, #0a1c3a 0%, #051022 60%, #020611 100%); 

}



/*------------------------------------------*/
/*   HERO SPACING & ALIGNMENT
/*------------------------------------------*/
.hero-txt h2{text-align:left; font-size: 42px; color: #00d757;}
.heroimg{max-height:530px;}
.hero-row-200 {
padding-top: 150px;
padding-bottom: 0px;
}

.hero-row-180 {
padding-top: 200px;
padding-bottom: 160px;
}

.hero-row-160 {
padding-top: 180px;
padding-bottom: 140px;
}

.hero-row-140 {
padding-top: 160px;
padding-bottom: 140px;
}

.hero-row-120 {
padding-top: 150px;
padding-bottom: 120px;
}

.hero-row-100 {
padding-top: 130px;
padding-bottom: 100px;
}

/*------------------------------------------*/
/*  HERO APP LOGO
/*------------------------------------------*/ 

.hero-app-logo {
margin-bottom: 25px;
}

#hero-4 .hero-app-logo {
margin-bottom: 30px;
}

#hero-8 .hero-app-logo {
margin-bottom: 40px;
}

/*------------------------------------------*/
/*  HERO APP BIG TITLE
/*------------------------------------------*/ 

.hero-app-logo span {
font-size: 4.25rem;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -3px;
padding-left: 20px;
}

/*------------------------------------------*/
/*  HERO TEXT
/*------------------------------------------*/  

#hero-1 .hero-txt {
margin-top: 120px;
}

#hero-9-content {
padding-top: 180px;
padding-bottom: 380px;
}

/*------------------------------------------*/
/*   Hero Headers
/*------------------------------------------*/ 

.hero-section h4,
.hero-section h3,
.hero-section h2 { 
margin-bottom: 20px;
}

#hero-1.hero-section h2 { 
margin-bottom: 25px;
}

#hero-10.hero-section h2 { 
margin-bottom: 35px;
}

.hero-section h4 span,
.hero-section h3 span,
.hero-section h2 span { 
font-weight: 700;
}

/*------------------------------------------*/
/*   Hero Paragraph
/*------------------------------------------*/ 

#hero-1 .hero-txt p,
#hero-11 .hero-txt p { 
padding-right: 5%;
}

#hero-5 .hero-txt p { 
padding-right: 15%;
}

#hero-8 .hero-txt p { 
padding-bottom: 30px;
}

#hero-9 .hero-txt p { 
padding: 0 10%;
margin-bottom: 30px;
}

#hero-12 .hero-txt p { 
padding-bottom: 10px;
}

/*------------------------------------------*/
/*    HERO LINKS 
/*------------------------------------------*/

.hero-links {
margin-top: 10px;
}

.hero-links span {
font-size: 0.95rem;
line-height: 1;
margin-right: 25px;
}

.hero-links span:last-child {
margin-right: 0
}

.hero-links span a {
text-decoration: underline;
}

.hero-links span a:hover {
color: #444;
}

/*------------------------------------------*/
/*    HERO BUTTONS
/*------------------------------------------*/

#hero-4 .btn {
margin-top: 25px;
margin-bottom: 50px;
}

/*------------------------------------------*/
/*    HERO STORE BADGES
/*------------------------------------------*/

.hero-stores-badge {
margin-top: 20px;
}

#hero-12 .hero-stores-badge {
margin-top: 30px;
}

.hero-stores-badge p {
font-weight: 500;
margin-bottom: : 10px;
}

.os-version {
display: flex;
align-items: center;
align-content: center;
margin-top: 30px;
}
.hero-stores-badge span {
display: inline-block;
font-size: 14px;
font-style: normal;
margin-top: 0px;
line-height: 20px;
padding:0px 7px;
}

.hero-stores-badge span:first-child{padding-left:0px;}
.hero-stores-badge span svg{float:left;}
footer .os-version { justify-content: center; }
footer .os-version span { display: inline-block; font-size: 18px; font-style: normal; margin-top: 0px; line-height: 20px; padding:0px 7px; }
footer .os-version span:first-child{padding-left:0px;}
footer .os-version span svg{float:left;}

/*------------------------------------------*/
/*    HERO BOX
/*------------------------------------------*/

.hero-boxes {
margin-top: 70px;
}

.hbox {
width: 20%;
display: inline-block;
float: left;
text-align: center;
}

.hbox span {
display: block;
margin-bottom: 14px;
}

/*------------------------------------------*/
/*   HERO IMAGE
/*------------------------------------------*/

.hero-img {
text-align: center;
}

.hero-3-img { 
background-image: url(../images/hero-3-img.png);
background-repeat: no-repeat;
background-position: left bottom;   
background-size: cover;
position: absolute;
top: 0;
bottom: 2%;
width: 50%;
left: 50%;
}

.hero-9-image img {
margin-top: -320px;
}

.hero-11-img { 
background-image: url(../images/hero-11-img.jpg);
background-repeat: no-repeat;
background-position: center center;   
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
width: 48%;
left: 52%;
}

/*------------------------------------------*/
/*    HERO NEWSLETTER FORM
/*------------------------------------------*/

#hero-2 .newsletter-form {
margin-top: 40px;
margin-right: 10%;
}

/*------------------------------------------*/
/*    Newsletter Form Input
/*------------------------------------------*/

#hero-2 .newsletter-form .form-control {
height: 54px;
background-color: #fff;
border: 1px solid #eee;
border-right: none;
color: #222;
font-size: 1.05rem;
font-weight: 400;
padding: 0 1.4rem;
box-shadow: none;
-webkit-border-radius: 20px 0 0 20px;
-moz-border-radius: 20px 0 0 20px;
-o-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;   
}

#hero-2 .newsletter-form .form-control:focus {
border: 1px solid #eee;
border-right: none;
outline: 0;
box-shadow: none;
}

/*------------------------------------------*/
/*    Newsletter Form Placeholder
/*------------------------------------------*/

#hero-2 .newsletter-form .form-control::-moz-placeholder { color: #999; } 
#hero-2 .newsletter-form .form-control:-ms-input-placeholder { color: #999; }
#hero-2 .newsletter-form .form-control::-webkit-input-placeholder { color: #999; }

/*------------------------------------------*/
/*    Newsletter Form Button
/*------------------------------------------*/

#hero-2 .newsletter-form .btn {
width: 100%; 
height: 54px;
background-color: #fff;
border-color: #fff;
color: #f4c744;
font-size: 1.25rem;
margin-top: 0;
padding: 0 1.4rem;
-webkit-border-radius: 0 20px  20px 0;
-moz-border-radius: 0 20px  20px 0;
-o-border-radius: 0 20px  20px 0;
border-radius: 0 20px  20px 0;
}

#hero-2 .newsletter-form .btn:hover {
color: #444;
}




/* ==========================================================================
05.  FEATURES
=========================================================================== */

#features-4 .bg-inner {
background-image: url(../images/tra-bg-1.png);
background-position: center center;  
position: relative;
z-index: 1;
}

#features-5 {
position: relative;
z-index: 1;
padding-top: 120px;
padding-bottom: 90px;
margin-bottom: 50px;
margin-top: 50px;
}

.features-6-content {
position: relative;
z-index: 1;
}

/*------------------------------------------*/
/*   FEATURES TEXT
/*------------------------------------------*/

#features-2 .col-md-6 {
padding-right: 10px;
padding-left: 10px;
}

/*------------------------------------------*/
/*   FEATURE BOX
/*------------------------------------------*/

.fbox-1 {
text-align: center;
margin-bottom: 40px;
} 

.fbox-2 {
background-color: #fff; 
text-align: center;
padding: 50px 30px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
} 

.fbox-3 {
position: relative;
text-align: center;
background-color: #fff;   
border: 1px solid #d0d0d0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 50px 30px;
margin-bottom: 30px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;  
}

.fbox-3 .box-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: transparent;
opacity: 0; 
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

.fbox-3 span { 
color: #555;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

.fbox-3:hover {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.fbox-3:hover h5 {
color: #222;
}

.fbox-3.rose-hover:hover { border-top: 1px solid #f402b8; }
.fbox-3.rose-hover:hover .box-line { background-color: #f402b8; opacity: 1; }
.fbox-3.rose-hover:hover > span { color: #f402b8; }

.fbox-3.red-hover:hover { border-top: 1px solid #ee041a; }
.fbox-3.red-hover:hover .box-line { background-color: #ee041a; opacity: 1; }
.fbox-3.red-hover:hover > span { color: #ee041a; }

.fbox-3.orange-hover:hover { border-top: 1px solid #ff8212; }
.fbox-3.orange-hover:hover .box-line { background-color: #ff8212; opacity: 1; }
.fbox-3.orange-hover:hover > span { color: #ff8212; }

.fbox-3.green-hover:hover { border-top: 1px solid #4fcb36; }
.fbox-3.green-hover:hover .box-line { background-color: #4fcb36; opacity: 1; }
.fbox-3.green-hover:hover > span { color: #4fcb36; } 

.fbox-3.blue-hover:hover { border-top: 1px solid #1d07f4; }
.fbox-3.blue-hover:hover .box-line { background-color: #1d07f4; opacity: 1; }
.fbox-3.blue-hover:hover > span { color: #1d07f4; }

.fbox-3.skyblue-hover:hover { border-top: 1px solid #01b7de; }
.fbox-3.skyblue-hover:hover .box-line { background-color: #01b7de; opacity: 1; }
.fbox-3.skyblue-hover:hover > span { color: #01b7de; }

.fbox-3.purple-hover:hover { border-top: 1px solid #783bb1; }
.fbox-3.purple-hover:hover .box-line { background-color: #783bb1; opacity: 1; }
.fbox-3.purple-hover:hover > span { color: #783bb1; }

.fbox-5 {
margin-bottom: 30px;
} 

.fbox-6 {
margin-bottom: 40px;
} 

/*------------------------------------------*/
/*   FEATURE BOX TYPOGRAPHY
/*------------------------------------------*/

.fbox-5-txt, .fbox-6-txt {
overflow: hidden;
padding-left: 20px;
}

.fbox-1 h5, .fbox-2 h5, .fbox-3 h5 {
margin-top: 15px;
margin-bottom: 10px;  
}

.fbox-4 h5 {
margin-top: 8px;
margin-bottom: 8px;  
}

.fbox-3 h5 {
color: #757575;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

.fbox-1 p, .fbox-2 p, .fbox-3 p, 
.fbox-4 p, .fbox-5 p, .fbox-6 p {
line-height: 1.5;
margin-bottom: 0;
} 

.fbox-1 p {
padding: 0 5%;
}

/*------------------------------------------*/
/*   FEATURE BOX ICON
/*------------------------------------------*/

.fbox-5 span, .fbox-6 span {   
width: 65px;
height: 65px;
text-align: center;
float: left;
}

/*------------------------------------------*/
/*   FEATURES IMAGE
/*------------------------------------------*/

.fbox-4-img {
margin-top: -60px;
margin-bottom: -60px;
position: relative;
z-index: 999;
position: relative;
}

.features-5-img,
.features-6-img { 
background-image: url(../images/features-5-img.html);
background-repeat: no-repeat;
background-position: left center;   
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
width: 50%;
left: 50%;
}

.features-6-img { 
background-image: url(../images/features-6-img.png);
}




/* ==========================================================================
05.  CONTENT
=========================================================================== */

#content-5 .bg-inner {
position: relative;
z-index: 1;
}

.content-7-image {
background-image: url(../images/content-7.png);
background-position: bottom bottom; 
padding-bottom: 60px;
}

#content-7 .content-img {
margin-top: -80px;
margin-bottom: 50px;
}

/*------------------------------------------*/
/*   CONTENT SECTION TITLE 
/*------------------------------------------*/

#content-7 .section-title {
margin-bottom: 120px;
}

/*------------------------------------------*/
/*   CONTENT TEXT
/*------------------------------------------*/ 

.content-txt { 
margin-bottom: 40px; 
}

.cbox-1-txt {
overflow: hidden;
margin-left: 85px;
}

/*------------------------------------------*/
/*   CONTENT TEXT TYPOGRAPHY
/*------------------------------------------*/

.content-txt h2.h2-xs {
margin-bottom: 25px;
}

.content-txt h5.h5-md {
margin-top: 25px;
margin-bottom: 10px;
}

.content-txt .cbox-1 h5.h5-md {
line-height: 1.3;
margin-top: 0;
margin-bottom: 12px;
}

.content-txt .btn {
margin-top: 20px;
}

/*------------------------------------------*/
/*   CONTENT BOX ICON
/*------------------------------------------*/ 

.cbox-1 {
margin-bottom: 20px;
}

.cbox-1 span {
width: 70px;
height: 70px;
text-align: center;
float: left;
}

/*------------------------------------------*/
/*   CONTENT IMAGE
/*------------------------------------------*/ 

.content-img {
text-align: center;
margin-bottom: 40px;
}

.content-5-img {
text-align: center;
margin-bottom: -80px;
position: relative;
z-index: 999;
position: relative;
}

/*------------------------------------------*/
/*   CONTENT TABS
/*------------------------------------------*/ 

#pills-tab {
margin: 0 auto 80px;
}

.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
background-color: #e35029;
border-color: #e35029;
color: #fff;
box-shadow: 0 0 3px rgba(10, 10, 10, 0.05); 
}

.nav-pills.yellow-navi .nav-link.active {
background-color: #feca16;
border-color: #feca16;
color: #333;
}

.nav-pills.green-navi .nav-link.active {
background-color: #38d762;
border-color: #38d762;
}

.nav-pills.blue-navi .nav-link.active {
background-color: #42a5f5;
border-color: #42a5f5;
}

.nav-pills .nav-link {
background-color: transparent;
border: 1px solid #ccc;
color: #999;
font-size: 1.1rem;
padding: 10px 30px;
margin-right: 10px;
-webkit-transition: all 450ms ease-in-out;
-moz-transition: all 450ms ease-in-out;
-o-transition: all 450ms ease-in-out;
-ms-transition: all 450ms ease-in-out;
transition: all 450ms ease-in-out;
}




/* ==========================================================================
06.  STATISTIC
=========================================================================== */

#statistic-1 {
background-image: url(../images/tra-bg-2.png);
}

/*------------------------------------------*/
/*    STATISTIC BLOCK
/*------------------------------------------*/

.statistic-block {
text-align: center;
margin-bottom: 30px;
}

#statistic-2 .statistic-block {
padding: 40px;
margin-bottom: 0;
}

/*------------------------------------------*/
/*    Statistic Block Number
/*------------------------------------------*/

.statistic-number {
font-size: 4.25rem;
line-height: 1; 
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 10px;
}

#statistic-2 .statistic-number {
font-size: 4rem;
letter-spacing: -0.5px;
margin-top: 12px;
margin-bottom: 6px;
}

/*------------------------------------------*/
/*    Statistic Text
/*------------------------------------------*/

.statistic-txt {
margin-top: 10px;
}

.statistic-txt p {
padding: 0 2%;
margin-bottom: 0;
}

#statistic-2 .b-bottom { border-bottom: 1px solid #ccc; }
#statistic-2 .b-right { border-right: 1px solid #ccc; }




/* ==========================================================================
07.  VIDEO
=========================================================================== */

#video-1 {  
background-image: url(../images/tra-bg-1.png);
}

#video-3 {  
background-image: url(../images/tra-bg-2.png);
padding-top: 100px; 
padding-bottom: 150px;
}

#video-4 {  
padding-top: 150px; 
padding-bottom: 100px;
}

.video-inner-bg { 
background-color: rgba(255, 255, 255, .6);
position: relative;
z-index: 1;
margin-right: 40px;
margin-left: 40px;
}

#video-4 .video-inner-bg { 
margin-right: 30px;
margin-left: 30px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#video-3 .section-title { 
margin-bottom: 6.25rem;
}

/*------------------------------------------*/
/*   VIDEO CONTENT
/*------------------------------------------*/

.video-content {
background-color: #fff;
padding: 100px 80px;
position: relative;
z-index: 999;
margin-top: -50px;
margin-bottom: -50px;
}

#video-4 .video-content {
background-color: transparent;
padding: 0;
margin: -50px 70px;
}

/*------------------------------------------*/
/*   VIDEO TYPOGRAPHY
/*------------------------------------------*/

#video-2 h2 {
margin-bottom: 25px;
}

#video-3 h4 {
margin-bottom: 25px;
}

#video-1 p {  
padding: 0 5%;
margin-top: 10px;
margin-bottom: 30px;
}

.video-section .btn {  
margin-top: 20px;
}

/*------------------------------------------*/
/*   VIDEO PREVIEW
/*------------------------------------------*/

.video-preview {
text-align: center;
}

#video-1 .video-preview {
position: relative;
margin-top: 60px;
}




/* ===================================================================================
08.  SCREENSHOTS
=================================================================================== */  

#screens-1 {
background-image: url(../images/tra-bg-5.html);
padding-top: 100px;
padding-bottom: 150px;
}

/*------------------------------------------*/
/*   SCREENSHOTS CAROUSEL
/*------------------------------------------*/ 

.screenshots-wrap {
position: relative;
margin-bottom: 100px;
}

#screens-1 .screenshots-wrap {
margin-top: 78px;
}

.slick-slide {
width: 298px;
}

.carousel-item {
opacity: 0.5;
-webkit-transition: all 450ms ease-in-out;
-moz-transition: all 450ms ease-in-out;
-o-transition: all 450ms ease-in-out;
-ms-transition: all 450ms ease-in-out;
transition: all 450ms ease-in-out;
}

#screens-2 .carousel-item {
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}

.carousel-item.slick-current {
opacity: 1;
}

#screens-2 .carousel-item.slick-current {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
position:relative;
border-radius:10px;
}

#screens-2 .carousel-item.slick-current::before{
content:"";
border:2px solid #38d762;
width:100%; 
height:100%;
position:absolute;
border-radius:10px;
}

/*------------------------------------------*/
/*   IPHONE FRAME
/*------------------------------------------*/  

.iphone-frame {
position: absolute;
top: -79px;
width: 100%;
height: 100%;
z-index: 2;
}

.iphone-frame img {
max-width: 350px;
margin: 0 auto;
display: block;
}

/*------------------------------------------*/
/*   Screens Slick Carousel Dots
/*------------------------------------------*/

.screens-section .slick-dots {
position: absolute;
z-index: 4;
bottom: -150px;
}

#screens-2.screens-section .slick-dots {
bottom: -100px;
}

.screens-section .slick-dots li {
margin: 0 2px;
width: 15px;
height: 15px;
}

.screens-section .slick-dots li button:before,
.screens-section.bg-lightgrey .slick-dots li button:before {
content: "";
background: #aaa;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: 1;
width: 8px;
height: 8px;
left: auto;
-webkit-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
}

.no-bg.screens-section .slick-dots li button:before,
.no-bg.screens-section.bg-lightgrey .slick-dots li button:before {
background: #ccc;
}

.bg-green.screens-section .slick-dots li button:before,
.bg-purple.screens-section .slick-dots li button:before,
.bg-green.screens-section.bg-lightgrey .slick-dots li button:before,
.bg-purple.screens-section.bg-lightgrey .slick-dots li button:before  {
background: rgba(20, 20, 20, .2);
}

.screens-section .slick-dots li button:hover:before,
.screens-section .slick-dots li.slick-active button:before {
background: #fff;
}

.no-bg.screens-section .slick-dots li button:hover:before,
.bg-lightgrey.screens-section .slick-dots li button:hover:before,
.no-bg.screens-section .slick-dots li.slick-active button:before, 
.bg-lightgrey.screens-section .slick-dots li.slick-active button:before {
background: #555;
}




/* ===================================================================================
09.  TEAM
=================================================================================== */  

#team-1 {
background-position: bottom center; 
}

#team-1 .col-md-6 {
padding-right: 10px;
padding-left: 10px;
}

/*------------------------------------------*/
/*    TEAM MEMBER
/*------------------------------------------*/

.team-member {
position: relative;
background-color: #fff;
padding: 50px 20px;
text-align: center;
margin-bottom: 50px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-bottom: 1px solid transparent;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

.team-member .box-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: transparent;
opacity: 0; 
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

.team-member:hover {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.team-member.rose-hover:hover { border-bottom: 1px solid #f402b8; }
.team-member.rose-hover:hover .box-line { background-color: #f402b8; opacity: 1; }
.team-member.rose-hover:hover .team-img-meta span { color: #f402b8; }

.team-member.red-hover:hover { border-bottom: 1px solid #ee041a; }
.team-member.red-hover:hover .box-line { background-color: #ee041a; opacity: 1; }
.team-member.red-hover:hover .team-img-meta span { color: #ee041a; }

.team-member.orange-hover:hover { border-bottom: 1px solid #ff8212; }
.team-member.orange-hover:hover .box-line { background-color: #ff8212; opacity: 1; }
.team-member.orange-hover:hover .team-img-meta span { color: #ff8212; }

.team-member.green-hover:hover { border-bottom: 1px solid #4fcb36; }
.team-member.green-hover:hover .box-line { background-color: #4fcb36; opacity: 1; }
.team-member.green-hover:hover .team-img-meta span { color: #4fcb36; }

.team-member.blue-hover:hover { border-bottom: 1px solid #1d07f4; }
.team-member.blue-hover:hover .box-line { background-color: #1d07f4; opacity: 1; }
.team-member.blue-hover:hover .team-img-meta span { color: #1d07f4; }

.team-member.skyblue-hover:hover { border-bottom: 1px solid #01b7de; }
.team-member.skyblue-hover:hover .box-line { background-color: #01b7de; opacity: 1; }
.team-member.skyblue-hover:hover .team-img-meta span { color: #01b7de; }

.team-member.purple-hover:hover { border-bottom: 1px solid #783bb1; }
.team-member.purple-hover:hover .box-line { background-color: #783bb1; opacity: 1; }
.team-member.purple-hover:hover .team-img-meta span { color: #783bb1; }

/*------------------------------------------*/
/*    TEAM MEMBER PHOTO
/*------------------------------------------*/

.team-member-photo {
position: relative;
z-index: 1;
margin: 0 25px 25px;
}

.team-member-photo img {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}

/*------------------------------------------*/
/*    TEAM MEMBER TYPOGRAPHY
/*------------------------------------------*/

.team-img-meta span {
color: #888;
font-size: 1rem;
line-height: 1;
font-weight: 300;
display: block;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
} 

.join-team h4 {
font-weight: 400;
margin-bottom: 10px;
}

.join-team h4 span {
font-weight: 700;
margin-right: 5px;
}

.join-team p {
margin-bottom: 25px;
padding: 0 10%;
}

/*------------------------------------------*/
/*    Team Member Social Links
/*------------------------------------------*/

.tm-social ul {
display: inline-block; 
padding-left: 0;
margin: 25px auto 0;
}

.tm-social ul li {
width: auto !important;
display: inline-block !important;
vertical-align: top;
clear: none !important;
padding: 0;
}

.tm-social a {
color: #999;
font-size: 1.1rem;
line-height: 1;
margin: 0 10px;
display: block;
-webkit-transition: all 450ms ease-in-out;
-moz-transition: all 450ms ease-in-out;
-o-transition: all 450ms ease-in-out;
-ms-transition: all 450ms ease-in-out;
transition: all 450ms ease-in-out;
}

.tm-social a.ico-facebook:hover { color: #3b5998; }
.tm-social a.ico-twitter:hover { color: #00a9ed; }
.tm-social a.ico-instagram:hover { color: #e44772 }
.tm-social a.ico-dribbble:hover { color: #d92d84; }
.tm-social a.ico-behance:hover { color: #2473f6; }
.tm-social a.ico-pinterest:hover { color: #ac281a; }
.tm-social a.ico-linkedin:hover { color: #015886; }
.tm-social a.ico-google-plus:hover { color: #cd1111; }
.tm-social a.ico-youtube:hover { color: #cd1b20; }
.tm-social a.ico-tumblr:hover { color: #3a5976; }
.tm-social a.ico-vk:hover { color: #3b5998; }




/* ===================================================================================
10. PRICING TABLES
=================================================================================== */ 

/*------------------------------------------*/
/*   PRICING TABLE
/*------------------------------------------*/  

.pricing-table {
background-color: #fff;   
border: 1px solid #d0d0d0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 50px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}

.pricing-table:hover {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/*------------------------------------------*/
/*    Pricing Table Price Plan
/*------------------------------------------*/

.pricing-plan h4 {
color: #444;
font-weight: 400;
letter-spacing: -1px;
margin-bottom: 25px;
}

.pricing-plan h4 span {
color: #222;
font-weight: 700;
}

.pricing-table span.price {
font-size: 50px;
line-height: 50px;
font-weight: 600;
letter-spacing: -1px;
}

.pricing-table sup {
font-size: 34px;
font-weight: 500;
top: -6px;
right: 3px;
}

.pricing-table sup.validity {
color: #757575;
font-weight: 300;
font-size: 1.25rem;
top: 0px;
left: 3px;
}

/*------------------------------------------*/
/*    Pricing Table Body
/*------------------------------------------*/

ul.features {
color: #333;
font-size: 1.1rem;
line-height: 1;
font-weight: 300;
padding-top: 10px;
}

ul.features li {
padding: 9px 0;
} 

ul.features li .svg-inline--fa {
margin-right: 6px;
} 

ul.features li.disabled-option {
color: #888;
}

/*------------------------------------------*/
/*   Pricing Table Button
/*------------------------------------------*/

.pricing-table .btn {
display: block;
width: 100%;
margin-top: 30px;
}

/*------------------------------------------*/
/*   PRICING NOTICE TEXT
/*------------------------------------------*/

.pricing-notice p {
margin-top: 10px;
padding: 0 8%;
}

.pricing-notice p span {
font-weight: 700;
margin-right: 5px;
}




/* ===================================================================================
11.  TESTIMONIALS
=================================================================================== */ 

/*------------------------------------------*/
/*   TESTIMONIALS CAROUSEL
/*------------------------------------------*/ 

.review-1, .review-2 {
text-align: center;
margin-bottom: 40px;
padding: 0 30px;
-webkit-transition: all 450ms ease-in-out;
-moz-transition: all 450ms ease-in-out;
-o-transition: all 450ms ease-in-out;
-ms-transition: all 450ms ease-in-out;
transition: all 450ms ease-in-out;
}

.review-2 {
padding: 0;
-webkit-transform: scale(.85);
-ms-transform: scale(.85);
transform: scale(.85);
}

.review-2 .review-txt {
background-color: #fff;
border: 1px solid #eee;
padding: 45px 40px 55px;
margin: 0 2px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.review-1, .review-2 {
opacity: 0.3;
}

.review-1.slick-current,
.review-2.slick-current {
opacity: 1;
}

.review-2.slick-current {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

/*------------------------------------------*/
/*    Testimonial Message Avatar 
/*------------------------------------------*/ 

.review-1 .testimonial-avatar img,
.review-2 .testimonial-avatar img {
width: 90px;
height: 90px;
display: inline-block;
margin: 0 auto 15px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}

.review-2 .testimonial-avatar img {
margin: -45px auto 15px;  
}

/*------------------------------------------*/
/*   Testimonial Message Text
/*------------------------------------------*/

.review-2 h5 {
margin-bottom: 20px;
}

.review-1 p, .review-2 p {
color: #666;
font-size: 1.05rem;
font-style: italic;
} 

p.testimonial-autor {
color: #000;
font-size: 1.1rem;
font-weight: 600;
font-style: normal;
margin-bottom: 0;
}

.review-2 p.testimonial-autor {
line-height: 1.2;
margin-bottom: 0;
}

.testimonial-avatar span {
font-size: 0.95rem;
line-height: 1;
}

/*------------------------------------------*/
/*   App Rating
/*------------------------------------------*/

.app-rating .svg-inline--fa {
color: #ff8000;
font-size: 0.8rem;
line-height: 1;
margin-right: 1px;
}

.app-rating .svg-inline--fa:last-child {
margin-right: 0;
}

/*------------------------------------------*/
/*   Reviews Slick Carousel Dots
/*------------------------------------------*/

.reviews-section .slick-dots {
position: absolute;
z-index: 4;
bottom: -30px;
}

.reviews-section .slick-dots li {
margin: 0 2px;
width: 15px;
height: 15px;
}

.reviews-section .slick-dots li button:before {
content: "";
background: #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: 1;
width: 8px;
height: 8px;
left: auto;
-webkit-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
}

.reviews-section .slick-dots li button:hover:before {
background: #999;
}

.reviews-section .slick-dots li.slick-active button:before {
background: #666;
}




/* ==========================================================================
12.  FAQs
=========================================================================== */

#faqs-1 {   
background-position: center bottom; 
}

/*------------------------------------------*/
/*    FAQs TYPOGRAPHY
/*------------------------------------------*/

.question {
margin-bottom: 25px;
}

.question h5 {
line-height: 1.4;
font-weight: 600;
letter-spacing: 0;
margin-bottom: 8px;
}

.question p {
color: #666;
}

.more-questions-btn {
margin-top: 50px;
}

.more-questions-btn .btn {
margin-top: 20px;
}




/* ==========================================================================
13.  DOWNLOAD
=========================================================================== */

#download-1 {
background-image: url(../images/tra-bg-1.png);
}

#download-2 .bg-inner {
background-image: url(../images/download-2.jpg);
position: relative;
z-index: 1;
}

#download-3 .bg-inner {
background-image: url(../images/world-map.png);
position: relative;
z-index: 1;
}

#download-4.bg-lightgrey {
background-image: url(../images/tra-waves.png);
background-position: bottom center; 
}

/*------------------------------------------*/
/*   DOWNLOAD TEXT
/*------------------------------------------*/

#download-4 .download-txt {
text-align: center;
margin-bottom: 50px;
}

/*------------------------------------------*/
/*   DOWNLOAD TYPOGRAPHY
/*------------------------------------------*/

.download-section h2 {
margin-bottom: 15px;
}

#download-1 p, #download-4 p {
padding: 0 10%;
}

.download-section .stores-badge {
margin-top: 30px;
}

/*------------------------------------------*/
/*   DOWNLOAD IMAGE
/*------------------------------------------*/

.download-2-img, 
.download-3-img {
margin-top: -60px;
margin-bottom: -60px;
position: relative;
z-index: 999;
position: relative;
}




/* ===================================================================================
14.  MORE APPS
=================================================================================== */ 

.m-img {
background-color: #f0f0f0;   
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 60px 40px;
}

/*------------------------------------------*/
/*    MORE APPS TYPOGRAPHY
/*------------------------------------------*/

.more-app-box h5 {
line-height: 1;
margin-bottom: 5px;
margin-top: 25px;
}

.more-app-box span.app-cat {
color: #888;
font-size: 0.95rem;
line-height: 1;
display: block;
margin-bottom: 15px;
}

.more-app-box a {
color: #888;
margin-right: 12px;
}

.m-links a span {
text-decoration: underline;
margin-left: 1px;
}

.more-app-box a:hover {
color: #222;
}


/* ==========================================================================
16.  PRESS
=========================================================================== */

/*------------------------------------------*/
/*    PRESS LOGO
/*------------------------------------------*/ 

.press-logo {
overflow: hidden;
position: relative; 
background-color: transparent;
background-color: #fff;
padding: 70px 30px;
margin-bottom: 40px;
text-align: center;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-transition: all 450ms ease-in-out;
-moz-transition: all 450ms ease-in-out;
-o-transition: all 450ms ease-in-out;
-ms-transition: all 450ms ease-in-out;
transition: all 450ms ease-in-out;
} 

.press-logo img {
transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-moz-transform: scale(1);
overflow: hidden;
-webkit-transition: transform 450ms;
-moz-transition: transform 450ms;
-o-transition: transform 450ms;
transition: transform 450ms;
}

.press-logo:hover {
background-color: #fff;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
} 

.press-logo:hover img {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-moz-transform: scale(1.1);
}

/*------------------------------------------*/
/*    PRESS TEXT
/*------------------------------------------*/ 

.press-txt p {
margin-bottom: 30px;
padding: 0 10%;
}




/* ==========================================================================
17.  NEWSLETTER
=========================================================================== */

#newsletter-1 {
background-image: url(../images/tra-bg-1.png);
padding-top: 120px;
padding-bottom: 100px;
}

#newsletter-2 {
background-image: url(../images/tra-bg-2.png);
padding-top: 100px;
padding-bottom: 100px;
}

#newsletter-1 .newsletter-form  {
margin: 50px 15% 0;
}

/*------------------------------------------*/
/*    Newsletter Form Input
/*------------------------------------------*/

.newsletter-section .newsletter-form .form-control {
height: 60px;
background-color: transparent;
border: none;
border-bottom: 2px solid #fff;
color: #fff;
font-size: 1.35rem;
font-weight: 400;
padding: 0 0.5rem;
margin-right: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0; 
-webkit-box-shadow: 0 0;
-moz-box-shadow: 0 0;
box-shadow: 0 0;  
}

.newsletter-section .newsletter-form .form-control:focus {
border: none;
border-bottom: 2px solid #fff;
outline: 0;
box-shadow: none;
}

/*------------------------------------------*/
/*    Newsletter Form Placeholder
/*------------------------------------------*/

.newsletter-section .newsletter-form .form-control::-moz-placeholder { color: #eee; } 
.newsletter-section .newsletter-form .form-control:-ms-input-placeholder { color: #eee; }
.newsletter-section .newsletter-form .form-control::-webkit-input-placeholder { color: #eee; }

/*------------------------------------------*/
/*    Newsletter Form Button
/*------------------------------------------*/

.newsletter-section .newsletter-form .btn {
height: 60px;
background-color: transparent;
border: none;
border-bottom: 2px solid #fff;
font-size: 1.35rem;
padding: 0 1rem;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0; 
-webkit-box-shadow: 0 0;
-moz-box-shadow: 0 0;
box-shadow: 0 0;
}

.newsletter-section .newsletter-form .btn:hover {
padding: 0 1.25rem;
}

.newsletter-section .newsletter-form .btn:hover::before {
opacity: 0;
}




/* ==========================================================================
18.  BLOG
=========================================================================== */
#blog-page { margin-top: 160px; margin-bottom: 100px; }
#single-post-page { margin-top: 160px; margin-bottom: 60px; }
.blog-post { margin-bottom: 40px; }
.posts-holder .blog-post { margin-bottom: 60px; }
.blog-post h5 { margin-bottom: 15px; } 
.blog-post-txt p { margin-bottom: 35px; }
.blog-post-txt span, .sblog-post-txt span { font-size: 0.95rem; display: block; margin-bottom: 12px; }
.posts-holder .blog-post-txt span { margin-bottom: 8px; }
.blog-post-meta span { color: #888; font-size: 0.95rem; margin-right: 30px; }
.blog-post a { color: #111; font-weight: 600; text-decoration: underline; }
.blog-post a:hover { color: #888; }
.post-inner-img p.p-sm { color: #999; font-style: italic; margin-top: 10px; margin-bottom: 0; }
.blog-post-img { position: relative; }
#sidebar-right h5.h5-md { margin-bottom: 20px; }
#search-field .btn { padding: 14px 18px; margin-top: 0; -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; }
#search-field .form-control:focus { border-color: #999; outline: 0px none; box-shadow: none; }
ul.blog-category-list > li { padding: 10px 0; border-bottom: 1px dashed #c0c0c0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;   }
ul.blog-category-list > li:first-child { padding: 0 0 10px; } 
ul.blog-category-list > li:last-child { padding: 10px 0 0; border-bottom: none; }
ul.blog-category-list > li a, ul.blog-category-list > li span { color: #555; }
ul.blog-category-list li .svg-inline--fa { margin-right: 10px; }
ul.blog-category-list li a:hover { color: #000; text-decoration: none; }

/*------------------------------------------*/
/*   Popular Posts
/*------------------------------------------*/
.popular-posts li {  padding: 14px 0; border-bottom: 1px dashed #c0c0c0; }
.popular-posts li:first-child { padding: 0 0 14px; }
.popular-posts li:last-child { padding: 14px 0 0; border-bottom: 0;  }
.post-summary a {  color: #555; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; }
.popular-posts .post-summary a:hover {  color: #000; text-decoration: underline; } 
.popular-posts p {  color: #888;   font-size: 0.875rem; margin-top: 6px; margin-bottom: 0; }
.badge { font-size: 0.75rem; font-weight: 600; color: #222; border: 1px solid #ddd; background-color: #fbfbfb; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; margin-bottom: 8px; padding: 5px 10px; margin-right: 2px; -webkit-transition: all 450ms ease-in-out; -moz-transition: all 450ms ease-in-out; -o-transition: all 450ms ease-in-out; -ms-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out;   }
.badge a { color: #666!important; font-size: 0.75rem; font-weight: 300; text-transform: uppercase; line-height: 1.42857; }
.badge:hover { background-color: #444; border-color: #444; color: #fff; }
.badge:hover a { color: #fff!important; }
.page-link { color: #666; padding: .65rem .95rem; }
.page-link:hover, .page-link:focus { color: #444; background-color: #f2f2f2; border-color: #dee2e6; }
.page-item.active .page-link { z-index: 1; color: #fff; background-color: #444; border-color: #444; }
.share-social-icons { display: inline-block;  padding-left: 0; }
.share-social-icons li { width: auto !important; display: inline-block !important; vertical-align: top; clear: none !important; padding: 0; }
a.share-ico { width: 90px; height: 35px; font-size: 18px; line-height: 35px !important; text-align: center; margin-right: 3px; display: block; opacity: 0.75; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; }
a.share-ico.ico-facebook {background-color: #3b5998; border-color: #3b5998; color: #fff;}
a.share-ico.ico-twitter {background-color: #00a9ed; border-color: #00a9ed; color: #fff;}
a.share-ico.ico-behance {background-color: #00a8e7; border-color: #00a8e7; color: #fff;}
a.share-ico.ico-google-plus {background-color: #cd1111; border-color: #cd1111; color: #fff;}
a.share-ico.ico-linkedin {background-color: #015886; border-color: #015886; color: #fff;}
a.share-ico.ico-dribbble{background-color: #d92d84; border-color: #d92d84; color: #fff;}
a.share-ico.ico-instagram {background-color: #beb3a8; border-color: #beb3a8; color: #fff;}
a.share-ico.ico-pinterest {background-color: #ac281a; border-color: #ac281a; color: #fff;}
a.share-ico.ico-dropbox {background-color: #008ad2; border-color: #008ad2; color: #fff;}
a.share-ico.ico-skype {background-color: #00a9ed; border-color: #00a9ed;color: #fff;}
a.share-ico.ico-youtube {background-color: #cd1b20; border-color: #cd1b20;color: #fff;}
a.share-ico.ico-tumblr {background-color: #3a5976; border-color: #3a5976;color: #fff;}
a.share-ico.ico-vimeo {background-color: #00adee; border-color: #00adee; color: #fff;}
a.share-ico.ico-flickr {background-color: #d2d2d2; border-color: #d2d2d2; color: #fff;}
a.share-ico.ico-github {background-color: #222; border-color: #222; color: #fff;}
a.share-ico.ico-renren {background-color: #364a83; border-color: #364a83; color: #fff;}
a.share-ico.ico-vk {background-color: #3b5998; border-color: #3b5998; color: #fff;}
a.share-ico.ico-xing {background-color: #015f5e; border-color: #015f5e; color: #fff;}
a.share-ico.ico-weibo {background-color: #be4443; border-color: #be4443; color: #fff;}
a.share-ico.ico-rss {background-color: #ff6600; border-color: #ff6600; color: #fff;}
a.share-ico.ico-digg {background-color: #222; border-color: #222; color: #fff;}
a.share-ico.ico-deviantart {background-color: #57675d; border-color: #57675d; color: #fff;}
a.share-ico.ico-envelope {background-color: #999; border-color: #999; color: #fff;}
a.share-ico.ico-delicious {background-color: #0A0A0A; border-color: #0A0A0A; color: #fff;}
a.share-ico:hover { opacity: 1; }
.comment-meta { margin-bottom: 10px; }
.comment-meta h5 { line-height: 1.1; margin-bottom: 0; }
.comment-date { color: #888; font-size: 12px; font-weight: 400; text-transform: uppercase; margin-bottom: 5px; }
.btn-reply a { background-color: #888; color:  #fff; font-size: 12px;   font-weight: 400; padding: 3px 8px;  text-transform: uppercase; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.btn-reply a:hover { color:  #fff; background-color: #48af4b; }
.comment-reply { margin-left: 40px; }
.single-post-comments hr {  margin-top: 20px;  margin-bottom: 20px;  }

/*------------------------------------------*/
/*    SINGLE POST COMMENT FORM
/*------------------------------------------*/
#leave-comment h4.h4-lg { margin-bottom: 5px; }
.comment-form { position: relative; }
.comment-form p { color: #333; font-size: 15px; line-height: 15px; font-weight: 700; margin-bottom: 10px; padding-left: 5px; display: block; }
.comment-form .form-control { background-color: #fff; border-color: #ccc; color: #333; height: 46px; font-size: 15px; font-weight: 300; padding: 15px; margin-bottom: 20px; box-shadow: none;  }
.comment-form .form-control:focus { border-color: #48af4b; outline: 0px none; box-shadow: none; }
.comment-form textarea {  min-height: 200px;  }

/*------------------------------------------*/
/*    Forms Message
/*------------------------------------------*/
.comment-form label.error { color: #f6412d; font-size: 0.95rem; line-height: 1; margin-bottom: 20px; }
.comment-form-msg { position: absolute; bottom: 10px; left: 350px; }
.comment-form-msg .error, .comment-form-msg .loading { color: #45afff; font-size: 1.1rem; line-height: 1; font-weight: 600; }
.comment-form-msg .error { color: #f6412d; }


/* ==========================================================================
19.  CONTACTS
=========================================================================== */
#contacts-1.bg-lightgrey { background-image: url(../images/tra-waves.png); background-position: bottom center;  }
#contacts-2 { background-image: url(../images/tra-bg-5.html); }
.contacts-section .form-holder { position: relative; }
.btn.btn-lightgreen.submit { text-transform: uppercase; }
.contact-form .form-control { height: 54px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 0 0 0; color: #444; font-size: 1rem; font-weight: 300; padding: 0 20px; margin-bottom: 25px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 5px; }
#contacts-2 .contact-form .form-control { background-color: transparent; border: none; border-bottom: 1px solid #6cae87; color: #f5f5f5; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.5px; padding: 0 5px; margin-bottom: 35px; border-radius: 0px; }
.contact-form .custom-select { display: inline-block; width: 100%; height: 54px; line-height: 1; color: #444; font-size: 1rem; font-weight: 300; padding: 0 15px; margin-bottom: 25px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
.bg-lightgrey .contact-form .form-control { border: 1px solid #ddd; }
.contact-form textarea { min-height: 150px; } 
.contact-form textarea.form-control { padding: 20px;
}

#contacts-2 .contact-form textarea.form-control { 
padding: 20px 5px;
}

/*------------------------------------------*/
/*    Contact Form Placeholder
/*------------------------------------------*/

.contact-form .form-control::-moz-placeholder { color: #94a299; } 
.contact-form .form-control:-ms-input-placeholder { color: #94a299; }
.contact-form .form-control::-webkit-input-placeholder { color: #94a299; }

#contacts-2 .contact-form .form-control::-moz-placeholder { color: #94a299; } 
#contacts-2 .contact-form .form-control:-ms-input-placeholder { color: #94a299; }
#contacts-2 .contact-form .form-control::-webkit-input-placeholder { color: #94a299; }

/*------------------------------------------*/
/*    Contact Form Input Focus
/*------------------------------------------*/

.contact-form .form-control:focus, .contact-form .custom-select:focus { outline: 0px none; box-shadow: none; border-color: #6bbb28; }
#contacts-2 .contact-form .form-control:focus { outline: 0px none; box-shadow: none; border-color: #fff; } 
.contact-form label.error { color: #f6412d; font-size: 0.95rem; line-height: 1; margin-bottom: 20px; margin-left: 35px; }
#contacts-2 .contact-form label.error { margin-left: 5px; margin-bottom: 30px; }
.contact-form-msg { position: absolute; bottom: 10px; left: 10px; }
.contact-form-msg .error, .contact-form-msg .loading { color: #45afff; font-size: 1.1rem; line-height: 1; font-weight: 600; }
.contact-form-msg .error { color: #f6412d; }


/* ==========================================================================
20. FOOTER
========================================================================== */  
.footer { background-position: bottom center; }
.bg-dark.footer .white-color p { color: #ddd; }
.bg-dark.footer .white-color h5 a { color: #ccc; }
.footer h5 { margin-bottom: 20px; }
.footer-info p { font-size: 1.05rem; line-height: 1.65; margin-top: 20px; } 
.footer-socials-links h5 { letter-spacing: 0; margin-bottom: 13px; }
.footer-socials-links h5 a { text-decoration: underline; }
a.foo-facebook:hover { color: #3b5998; }
a.foo-twitter:hover { color: #00a9ed; }
a.foo-instagram:hover { color: #e44772 }
a.foo-dribbble:hover { color: #d92d84; }
a.foo-behance:hover { color: #2473f6; }
a.foo-pinterest:hover { color: #ac281a; }
a.foo-linkedin:hover { color: #015886; }
a.foo-google-plus:hover { color: #cd1111; }
a.foo-youtube:hover { color: #cd1b20; }
a.foo-tumblr:hover { color: #3a5976; }
a.foo-vk:hover { color: #3b5998; }

.bg-dark.footer .white-color h5 a:hover { color: #fff; }
#footer-4 .footer-logo { margin-bottom: 40px; }
.foo-links { display: inline-block;  padding-left: 0; margin: 0 auto; }
.foo-links li { width: auto !important; display: block !important; vertical-align: top; clear: none !important; margin: 0 0 8px 0; padding: 0; }
#footer-3 .foo-links li, #footer-4 .foo-links li, .bottom-footer .foo-links li { display: inline-block !important; margin-left: 22px; }
.foo-links li a { font-size: 1.05rem; line-height: 1.5; } 
#footer-3 .foo-links li a, .bottom-footer .foo-links li a { color: #666; font-size: 0.95rem; line-height: 1.5; }
.bg-dark .foo-links li a { color: #ddd; }
.foo-links li a:hover { color: #000; text-decoration: underline; }
.bg-dark .foo-links li a:hover { color: #ddd; }
.footer-stores-badge a.store { display: block; margin-bottom: 14px; }
.bottom-footer { border-top: 1px solid #ddd; margin-top: 30px; padding-top: 50px; }
.bg-grey .bottom-footer { border-color: #ccc; } 
.bg-dark .bottom-footer { border-color: #555; }
.footer-copyright p { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0; }
#footer-2 .footer-copyright p { margin-bottom: 2px; }
.footer-copyright p span { font-weight: 500; }
.bottom-form { background-color: #fff; min-width: 260px; max-width: 260px; border-top-right-radius: 6px; border-top-left-radius: 6px; box-shadow: 0 1px 15px 0 rgba(0,0,0,.33); position: fixed; right: 6em; bottom: 0; z-index: 998; }
.bottom-form-header { background-color: #38d762; border-color: #38d762; padding: 14px 20px; min-height: 45px; border-top-right-radius: 6px; border-top-left-radius: 6px; cursor: pointer; }
.bottom-form-header span { color: #fff; font-size: 30px; line-height: 1; display: inline-block; float: left; margin-right: 8px; }
.bottom-form-header p { color: #fff; font-size: 0.9rem; line-height: 30px!important; display: inline-block; margin-bottom: 0; }
.bottom-form-holder { height: 311px; padding-bottom: 30px; }
.bottom-form-control { width: 100%; border: none; border-bottom: 1px solid #eee; font-size: 0.9rem; line-height: 1; padding: 18px; }
.quick-contact-form textarea {  min-height: 60px;  border-bottom: none;  }
.quick-contact-form .btn { font-size: 0.9rem; padding: 0.6rem 1.75rem; margin-right: 30px; }
.quick-contact-form label.error { color: #f6412d; font-size: 0.95rem; line-height: 1; margin-bottom: 20px; margin-left: 35px; }
.quick-contact-form .contact-form-msg { position: absolute; bottom: 80px; left: 20px; }
.quick-contact-form .contact-form-msg .error, .quick-contact-form .contact-form-msg .loading { color: #45afff; font-size: 0.9rem; line-height: 1; font-weight: 300; }
.quick-contact-form .contact-form-msg .error { color: #f6412d; }

/* ==========================================================================
22. TERMS PAGE
========================================================================== */  

#terms-page { margin-top: 160px; margin-bottom: 60px; }
#terms-page p.p-notice { font-weight: 700; }
.terms-box {  margin-bottom: 40px; }
.terms-box h4 { margin-bottom: 15px; }
.terms-box p span { font-size: 1.1rem; line-height: 1; font-weight: 700;  margin-right: 5px; }
.terms-box p a { color: #333; font-weight: 700;  text-decoration: underline; }
.terms-box p a:hover { color: #666; }
ul.terms-list { list-style: disc; margin: 20px 0 20px 25px; }
ul.terms-list li { margin-bottom: 10px; }
ul.terms-list li:last-child { margin-bottom: 0; }


/* ===================================================================================
23.  SCROLL TO TOP
=================================================================================== */ 

#scrollUp { display: none; width: 50px; height: 50px; position: fixed; bottom: 20px; right: 20px; background-image: url(../images/back-to-top.png); background-repeat: no-repeat; background-position: 50% 48%; background-color: rgba(35, 35, 35, 0.5); -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; -webkit-transition: all 250ms linear; -moz-transition: all 250ms linear; transition: all 250ms linear;  }
#scrollUp:hover { background-color: #666; }
nav a#pull {   display: none;   }  
.intro-highlight { border-left: 3px solid #38d762; padding: 18px 24px; background: rgba(0,188,212,.05); border-radius: 0 12px 12px 0; font-size: 16px; font-style: italic; margin-top: 32px; }
.meta-feature-box { display:flex; align-items:center; gap:12px; padding:14px 16px; background:rgba(0,188,212,.05); border:1px solid #009ffe3d; border-radius:14px; backdrop-filter:blur(16px); }
.meta-icon-box { width:38px; height:38px; border-radius:10px; background:rgb(0, 216, 88); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.step-card { position:relative; border-radius:18px; padding:32px 28px; background:#0b1f40; border:1px solid rgba(255,255,255,0.07); position:relative; overflow:hidden; transition:border-color .3s,box-shadow .3s,transform .3s; height:100%; }
.step-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent-cyan),transparent); opacity:0; transition:opacity .3s; }
.step-card:hover { border-color:rgb(0, 162, 254); box-shadow:0 0 30px rgba(0,188,212,.08),0 20px 40px rgba(0,0,0,.3); transform:translateY(-4px); }
.step-card:hover::before { opacity:1; }
.step-num {   font-size:64px; font-weight:800; line-height:1; color:rgba(0,188,212,.07); position:absolute; top:16px; right:20px; }
.step-icon-wrap { width:52px; height:52px; border-radius:14px; background:rgba(0,188,212,.08); border:1px solid rgba(0,188,212,.2); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.step-title {   font-size:20px; font-weight:700; margin-bottom:12px; }
.step-detail { display:flex; align-items:center; gap:8px; font-size:18px; color:#f1f1f1; margin-top:6px; }
.step-bottom { display: flex; align-items: center; background: rgb(28, 48, 81); justify-content: center; margin-top: 20px; border-radius: 10px; }
.stepflow .steparrow{ position: absolute; top: 50%; right: -8px;}

.feature-card { padding:28px 24px; border-radius:16px; background:#0c1634; border:1px solid rgba(255,255,255,0.07); transition:all .3s; height:100%; }
.feature-card:hover { border-color:rgba(0,188,212,0.25); box-shadow:0 0 20px rgba(0,188,212,.07),0 10px 30px rgba(0,0,0,.2); transform:translateY(-3px); }
.feature-icon { width:46px; height:46px; border-radius:12px; background:rgba(0,188,212,.08); border:1px solid rgba(0,188,212,.18); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.feature-title {  font-size:20px; font-weight:700; margin-bottom:8px; }
.feature-desc { font-size:18px; color:var(--text-secondary); line-height:1.65; }
.toggle-list { margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.toggle-tag { display:inline-flex; align-items:center; gap:5px; background:rgba(0,188,212,.06); border:1px solid rgba(0,188,212,.15); border-radius:50px; padding:4px 10px; font-size:14px; color:#00d858; font-weight: bold; }

/* ─── FRAUD ─── */
.fraud-col { padding:36px 32px; border-radius:20px; height:100%; }
.fraud-col-without { background:rgba(220,38,38,.04); border:1px solid rgba(220,38,38,.15); }
.fraud-col-with { background:rgba(0,188,212,.04); border:1px solid rgba(0,188,212,.2); box-shadow:0 0 40px rgba(0,188,212,.07); }
.fraud-item { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:18px; }
.fraud-item:last-child { border-bottom:none; }
.fraud-highlight { text-align:center; margin-top:40px; padding:28px; border-radius:16px; background:rgba(0,188,212,.06); border:1px solid rgba(0,188,212,.2); }
.fraud-highlight-text { font-size:30px; font-weight:800; color:#1fda69; }

.industry-card { padding:26px 22px; border-radius:16px; background:#0c1634; border:1px solid rgba(255,255,255,0.07); transition:all .3s; height:100%; }
.industry-card:hover {  border-color:rgba(0,188,212,0.25); transform:translateY(-3px); box-shadow:0 0 24px rgba(0,188,212,.08); }
.industry-icon { font-size:44px; margin-bottom:0px; display:block; }
.industry-icon-svg { width: 56px; height: 56px; border-radius: 12px; background: rgba(0,188,212,.08); border: 1px solid rgba(0,188,212,.2); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.industry-name {  font-size:20px; font-weight:700; margin-bottom:6px; }
.industry-desc { font-size:18px; line-height:1.6; }
hr{border-top: 1px solid rgba(31, 218, 105, 0.37);}
.copyright{text-align:center; width:100%; padding-top: 20px;}
.copyright img{max-width:150px; margin-bottom: 20px;}
.copyright a{color:#38d762;}
.white-popup-block { background: #0e1836; padding: 20px 30px; text-align: left; max-width: 800px; margin: 40px auto; position: relative; }
.popup-modal-dismiss { background: #1fda69; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; border-radius: 100%; position: absolute; right: -10px; top: -10px; }
.breadcrumb{ background-image: url(../images/hero-11-img-sm.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 130px 0 10px; position:relative; margin-bottom: 0; }
.breadcrumb h2{color:#ffffff;} 
ol.breadcrumb-list li:last-child{color:#1fda69;}
.breadcrumb:before{ position:absolute; left:0; right:0; width:100%; height:100%; background:#030c26c4; content:""; top:0; }
ol.breadcrumb-list { padding: 0; list-style-type: none; display: flex; align-items: center; }
ol.breadcrumb-list li { color: #fff; padding-right: 10px; }
ol.breadcrumb-list li a { color: #fff; }
ol.breadcrumb-list a::after { content: "›"; margin: 0 0px 0 8px; } 
.privacypolicy ul { margin-bottom: 15px; }
.privacypolicy li { padding-left: 0px; display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.privacypolicy a { color: #fff; text-decoration: underline; }
.privacypolicy h3 { color: #fff; font-weight: 600; font-size: 1.35rem; margin-top: 25px; }
.privacypolicy p strong { font-weight: 500; }
ul.listoption li { position: relative; margin-bottom: 11px; padding-left: 18px; }
ul.listoption li svg { position: absolute; left: 0; top: 8px; }
.photo_bx { border-radius: 10px; width: 100%; position: relative; height: 700px; text-align:center; background: #0c16343b; border: 1px solid rgba(255,255,255,0.07); }
.photo_bx img { width:100%; height:100%; object-fit:contain; }
.photo_bx .overlayinfo { position: absolute; bottom: 1px; padding: 19px; width: 100%; }
.photo_bx .overlayinfo p { margin-bottom: 2px; }
.photo_bx .overlayinfo p strong{ font-weight:600 }
.ip-details-container{ background: #0d264d; border: 1px solid rgba(255,255,255,0.07); margin: 0px !important; height: calc( 700px - 280px ); padding:50px 0px 0px 0px; border-radius: 10px;  }
.details-top{ position: absolute; top: 0px; padding: 15px 10px; width: 100%; background: rgba(0,0,0,.2); font-weight:600;}
.details-top a{color:#1fda69; text-decoration:underline;}
ul.ip-details{ margin: 0px !important; height: 100%; padding: 15px; overflow-y:auto;  }
.ip-details{ overflow-y:auto; }
.ip-details::-webkit-scrollbar{ width:8px; }
.ip-details::-webkit-scrollbar-thumb{ background:#38d762; border-radius:8px; }

/* Firefox */
.ip-details{ scrollbar-width:thin; scrollbar-color:#38d762 #0f172a; }
ul.ip-details li { margin-bottom: 5px; border-bottom: 1px solid #ffffff24; padding-bottom:5px; }
ul.ip-details li:last-child{  border-bottom:none;  } 
ul.ip-details li strong {  display: inline-block; text-align: left;  font-weight: 600; }
ul.ip-details { margin-top: 25px; }
.hero-banner{ background-image: url(../images/hero-11-img-full.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; position:relative; background-attachment: unset !important; } 
/*.hero-banner::before{ background:linear-gradient(113deg, #142148, transparent); position:absolute; left:0; right:0; top:0; width:100%; height:100%; content:"" }*/
.common-usecases { width: 100%; }
.common-usecases ul { display: flex; gap: 20px; }
.common-usecases li { text-align: center; width: 33%; }
section.usecases { padding: 30px 0; }
.common-usecases li .step-icon-wrap { margin: 0 auto; margin-bottom: 11px; }

@media (max-width:991px){
.photo_bx { margin-bottom: 25px; }	
.navbar.bg-tra{ padding: 12px 0; background: linear-gradient(to bottom, #0a1c3a 0%, #051022 60%, #020611 100%); background-repeat: no-repeat; background-attachment: fixed; box-shadow: 0 0 2px rgba(50, 50, 50, 0.4); }
.navbar-light .navbar-toggler, .navbar.bg-tra .navbar-toggler { border-color: #fff; padding: 0.25rem 0.5rem; font-size: 1.05rem; background: #fff; }
.navbar-expand-lg .navbar-nav .nav-link { text-align: left; color: #fff; }
#hero-11 .hero-row-200 .col-md-6 { max-width: 100%; flex: 0 0 100%; }
ul.listoption li { text-align: left; }
.container { max-width: 100%; }
.hero-banner .hero-row-200 .col-md-6 { max-width: 100%; flex: 0 0 100%; }
.hero-section h4, .hero-section h3, .hero-section h2, #hero-1.hero-section h2 { text-align: center; }
.hero-stores-badge {
	margin-top: 20px; margin-bottom: 30px;text-align: center;
}
}

@media (max-width:767px){
.breadcrumb { padding: 137px 0 56px; } 
.common-usecases ul { flex-wrap: wrap; }
.common-usecases li { text-align: center; width: 100%; }
ul.listoption { margin-top: 18px; }
.hero-stores-badge span {
    display: flex;
    font-size: 14px;
    font-style: normal;
    margin-top: 0px;
    line-height: 20px;
    padding: 0px 7px;
    flex-direction: column;
    text-align: center;
}
.hero-stores-badge span svg {
    float: none;
    margin: 0 auto !important;
    margin-bottom: 8px !important;
}
.verifyphoto {
    flex-wrap: wrap;
}
}

.common-usecases {overflow:hidden; position: relative;}
.common-usecases img{}
.common-usecases p{ padding: 0px 20px 20px 20px; font-size: 18px; position: relative;}
.common-usecases h4{ padding: 20px 20px 0px 20px; font-size: 22px; position: relative;}
.usecases-num { font-size: 64px; font-weight: 800; line-height: 1; color: rgba(0, 216, 88, 0.25); position: absolute; top: 25px; right: 25px;}

.map{width: 100%; filter: grayscale(70%); margin-top: 20px; overflow: hidden; border-radius: 10px;} 
.verifyphoto{ display:flex; flex-wrap:no-wrap; justify-content:center; align-items:center;}
.verifyphoto label{ padding: 0px 10px; font-size: 26px; font-weight: bold; color: #38d762;}
.verifyphoto input{max-width:300px; height:50px; margin:0px ; border-radius:5px; margin-right:10px}
.verifyphoto a,.verifyphoto button{height:50px; border-radius:5px}


.slick-prev, .slick-next{ background: #16a257; z-index: 1000; width: 60px; height: 60px;}
.slick-prev:hover, .slick-next:hover{ background: #000000; }
.slick-next{ right:0px !important;}
.slick-prev{ left:0px !important}
.slick-prev::before, .slick-next::before{opacity:1;}

.gallery-header { padding: 4rem 0 2.5rem; text-align: center; border-bottom: 1px solid var(--border); margin-bottom: 3rem; }
.gallery-header h1 { font-weight: 300; font-size: 3.5rem; letter-spacing: 0.15em; color: var(--light); margin-bottom: 0.25rem; }
.gallery-header p { font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }

/* ── Grid ── */
.gallery-grid { column-count: 1; column-gap: 0px; padding: 0px; height:100%; }
@media (max-width: 768px) { .gallery-grid { column-count: 2; } }
@media (max-width: 480px) { .gallery-grid { column-count: 1; } }

.gallery-item { break-inside: avoid; margin-bottom: 0px; position: relative; overflow: hidden; cursor: pointer; border-radius: 0px; height:100%; }
.gallery-item img { width: 100%;  display: block; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: brightness(0.9); }
.gallery-item:hover img { transform: scale(1.04); filter: brightness(1); }
.gallery-item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 1rem; pointer-events: none; }
.gallery-item:hover .gallery-item-overlay { opacity: 1; } 
.gallery-item-overlay span { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.expand-icon { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; background: rgba(9, 18, 64, 0.5); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s ease; font-size: 0.65rem; color: #fff; pointer-events: none; padding: 7px; }
.gallery-item:hover .expand-icon { opacity: 1; }
.download-icon { position: absolute; top: 12px; right: 68px; width: 42px; height: 42px; background: rgba(9, 18, 64, 0.5); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s ease; font-size: 0.65rem; color: #fff; pointer-events: none; padding: 7px; }
.views-count { position: absolute; top: 12px; right: 118px; width: auto; height: 42px; background: rgba(9, 18, 64, 0.5); border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s ease; font-size: 14px; color: #fff; pointer-events: none; padding: 7px;} 

/* ── Lightbox ── */
#lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(10,10,10,0.97); flex-direction: column; animation: fadeIn 0.25s ease; }
#lightbox.active { display: flex; } 
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.lb-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.lb-counter { font-size: 0.7rem; letter-spacing: 0.2em; color: var(--muted); min-width: 60px; }
.lb-title { font-size: 1.1rem; letter-spacing: 0.1em; color: var(--accent);}
.lb-close { background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; transition: color 0.2s; padding: 0.25rem 0.5rem; min-width: 60px; text-align: right; } 
.lb-close:hover { color: var(--light); }
.lb-main { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 1rem 4rem; }
#lbImg { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; animation: zoomIn 0.3s ease; }
@keyframes zoomIn { from { transform: scale(0.96); opacity:0; } to { transform: scale(1); opacity:1; } }
.lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--light); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; font-size: 0.9rem; z-index: 10; }
.lb-arrow:hover { background: rgba(201,169,110,0.15); border-color: var(--accent); color: var(--accent); }
.lb-arrow.prev { left: 1rem; }
.lb-arrow.next { right: 1rem; }

/* Thumbnail strip */
.lb-thumbs { flex-shrink: 0; padding: 0.75rem 1rem; border-top: 1px solid var(--border); display: flex; gap: 8px; overflow-x: auto; align-items: center; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.lb-thumbs::-webkit-scrollbar { height: 4px; }
.lb-thumbs::-webkit-scrollbar-thumb { background: var(--border); }
.lb-thumb { flex-shrink: 0; width: 64px; height: 64px; object-fit: cover; border-radius: 2px; opacity: 0.45; cursor: pointer; border: 2px solid transparent; transition: opacity 0.2s, border-color 0.2s, transform 0.2s; filter: grayscale(30%); }
.lb-thumb:hover { opacity: 0.8; transform: translateY(-2px); }
.lb-thumb.active { opacity: 1; border-color: var(--accent); filter: none; transform: translateY(-2px); }
.verifybx {
    display: flex;
}
.verifybx input.form-control {
    min-width: 300px;
}

@media (max-width:767px){
	
.stepflow .steparrow {
    display: none;
}
.step-card {
    margin-bottom: 25px;
}	
#team-1 .col-6.col-md-4.col-lg-4.reveal {
    width: 100% !important;
    flex: 0 0 100%;
    max-width: 100%;
}
footer .os-version span {
    display: flex;
    font-size: 15px;
    font-style: normal;
    margin-top: 0px;
    line-height: 20px;
    flex-direction: column;
    padding: 0px 7px;
}
footer .os-version span svg {
    float: left;
    margin: 0 auto !important;
    margin-bottom: 10px !important;
}
.verifybx input.form-control {
    min-width: 239px;
}
.verifyphoto a, .verifyphoto button {
    height: 50px;
    border-radius: 5px;
    line-height: 25px;
}	
	
}