/*--------------------------------------------------------------------------

	Project Name: sree - Coming Soon Template
	Project Description: A simple and clean coming soon page made exclusively for ThemeForest market
	File Name: main.scss
	Author: ThemesEase
	Author URI: http://themesease.com
	Version: 1.0.0

--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------*/
/* [TABLE OF CONTENTS]
/*
/*	1. VARIABLES & MIXINS
/*	2. COMMON
/*	3. BUTTONS & INPUTS
/*	4. HEADER
/*	5. SECTIONS
/*	6. HEADLINE & TOP SECTION
/*	7. COUNTDOWN
/*	8. FEATURES, ABOUT & CONTACT SECTIONS
/*	9. SWITCHER
/*	10. SWEET-ALERT
/*	11. MEDIA QUERIES
/*--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------*/
/* 1. VARIABLES & MIXINS */
/*--------------------------------------------------------------------------*/


#contactUs * { color: #fff }
#contactUs {
  background: var(--main-color-2);
}
html, body {
    font-weight: 300;
    color: #666;
    font-size: 12px;
    line-height: 1.75em;
  }
  
  @media (min-width: 600px) {
    html, body {
      font-size: calc( 12px + (13 - 12) * ((100vw - 600px) / (1140 - 600)));
    }
  }
  
  @media (min-width: 1140px) {
    html, body {
      font-size: 13px;
    }
  }
  
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
  }
  
  p, blockquote, pre,
  address,
  dl, ol, ul,
  table {
    margin-bottom: 1.75em;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    color: #333;
    clear: both;
  }
  
  h1 {
    font-size: 24.397254206px;
    margin-top: 1.0759407505em;
    line-height: 1.2911289006em;
    margin-bottom: 0.2151881501em;
  }
  
  @media (min-width: 600px) {
    h1 {
      font-size: calc( 24.397254206px + (26.4303587232 - 24.397254206) * ((100vw - 600px) / (1140 - 600)));
    }
  }
  
  @media (min-width: 1140px) {
    h1 {
      font-size: 26.4303587232px;
      margin-top: 1.0759407505em;
      line-height: 1.2911289006em;
      margin-bottom: 0.2151881501em;
    }
  }
  
  h2 {
    font-size: 21.1694224808px;
    margin-top: 1.2399960379em;
    line-height: 1.4879952454em;
    margin-bottom: 0.2831441258em;
  }
  
  @media (min-width: 600px) {
    h2 {
      font-size: calc( 21.1694224808px + (22.9335410208 - 21.1694224808) * ((100vw - 600px) / (1140 - 600)));
    }
  }
  
  @media (min-width: 1140px) {
    h2 {
      font-size: 22.9335410208px;
      margin-top: 1.2399960379em;
      line-height: 1.4879952454em;
      margin-bottom: 0.2804406706em;
    }
  }
  
  h3 {
    font-size: 18.3686428147px;
    margin-top: 1.4290658414em;
    line-height: 1.7148790097em;
    margin-bottom: 0.3324926924em;
  }
  
  @media (min-width: 600px) {
    h3 {
      font-size: calc( 18.3686428147px + (19.8993630493 - 18.3686428147) * ((100vw - 600px) / (1140 - 600)));
    }
  }
  
  @media (min-width: 1140px) {
    h3 {
      font-size: 19.8993630493px;
      margin-top: 1.4290658414em;
      line-height: 1.7148790097em;
      margin-bottom: 0.3289019598em;
    }
  }
  
  h4 {
    font-size: 15.9384149077px;
    margin-top: 1.6469642779em;
    line-height: 1.9763571335em;
    margin-bottom: 0.3913926575em;
  }
  
  @media (min-width: 600px) {
    h4 {
      font-size: calc( 15.9384149077px + (17.26661615 - 15.9384149077) * ((100vw - 600px) / (1140 - 600)));
    }
  }
  
  @media (min-width: 1140px) {
    h4 {
      font-size: 17.26661615px;
      margin-top: 1.6469642779em;
      line-height: 1.9763571335em;
      margin-bottom: 0.386623442em;
    }
  }
  
  h5 {
    font-size: 13.8297136229px;
    margin-top: 1.8980870259em;
    line-height: 2.2777044311em;
    margin-bottom: 0.3796174052em;
  }
  
  @media (min-width: 600px) {
    h5 {
      font-size: calc( 13.8297136229px + (14.9821897582 - 13.8297136229) * ((100vw - 600px) / (1140 - 600)));
    }
  }
  
  @media (min-width: 1140px) {
    h5 {
      font-size: 14.9821897582px;
      margin-top: 1.8980870259em;
      line-height: 2.2777044311em;
      margin-bottom: 0.3796174052em;
    }
  }
  
  h6 {
    font-size: 12px;
    margin-top: 2.1875em;
    line-height: 2.625em;
    margin-bottom: 0.5104166667em;
  }
  
  @media (min-width: 600px) {
    h6 {
      font-size: calc( 12px + (13 - 12) * ((100vw - 600px) / (1140 - 600)));
    }
  }
  
  @media (min-width: 1140px) {
    h6 {
      font-size: 13px;
      margin-top: 2.1875em;
      line-height: 2.625em;
      margin-bottom: 0.4739583333em;
    }
  }
  
  blockquote {
    font-style: italic;
  }
  
  blockquote cite {
    display: block;
    font-style: normal;
  }
  
  pre {
    padding: 0.875em;
    margin-bottom: 1.75em;
  }
  
  pre code {
    padding: 0;
  }
  
  code {
    font-family: "Courier New", "Courier", "Lucida Sans Typewriter", "Lucida Typewriter", "monospace";
    padding: 0.0875em 0.2625em;
    line-height: 0;
  }
  
  big, small, sub, sup {
    line-height: 0;
  }
  
  abbr, acronym {
    border-bottom: 1px dotted currentColor;
    cursor: help;
  }
  
  address {
    font-style: normal;
  }
  
  dt {
    color: #333;
    font-weight: bold;
  }
  
  ul {
    padding-left: 1.1em;
  }
  
  ol {
    padding-left: 1.4em;
  }
  
  fieldset {
    padding: 0.875em 1.75em 1.75em;
    border-width: 1px;
    border-style: solid;
    max-width: 100%;
    margin-bottom: 1.8846153846em;
  }
  
  @media (min-width: 1140px) {
    fieldset {
      margin-bottom: 2.0192307692em;
    }
  }
  
  fieldset button, fieldset input[type="submit"] {
    margin-bottom: 0;
  }
  
  legend {
    color: #333;
    font-weight: bold;
  }
  
 form textarea {padding: 10px;} 
 
  input[type="text"], input[type="email"], input[type="password"], textarea {
    display: block;
    max-width: 100%;
    padding: 0.4375em;
    font-size: 12px;
    margin-bottom: 1.3461538462em;
  }
  
  @media (min-width: 600px) {
    input[type="text"], input[type="email"], input[type="password"], textarea {
      font-size: calc( 12px + (13 - 12) * ((100vw - 600px) / (1140 - 600)));
    }
  }
  
  @media (min-width: 1140px) {
    input[type="text"], input[type="email"], input[type="password"], textarea {
      font-size: 13px;
      margin-bottom: 0.5552884615em;
    }
  }
  
  input[type="submit"], button {
    display: block;
    cursor: pointer;
    font-size: 12px;
    padding: 0.4375em 1.75em;
    margin-bottom: 1.1105769231em;
  }
  
  @media (min-width: 600px) {
    input[type="submit"], button {
      font-size: calc( 12px + (13 - 12) * ((100vw - 600px) / (1140 - 600)));
    }
  }
  
  @media (min-width: 1140px) {
    input[type="submit"], button {
      font-size: 13px;
      margin-bottom: 1.3125em;
    }
  }
  
  label {
    display: block;
    padding-bottom: 0.21875em;
    margin-bottom: -0.1009615385em;
  }
  
  table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    margin-bottom: 2.4230769231em;
  }
  
  @media (min-width: 1140px) {
    table {
      margin-bottom: 2.1538461538em;
    }
  }
  
  th {
    text-align: left;
    color: #333;
    padding: 0.21875em 0.875em;
  }
  
  @media (min-width: 1140px) {
    th {
      padding: 0.4375em 0.875em;
    }
  }
  
  td {
    padding: 0.875em;
    padding: 0.21875em 0.875em;
  }
  
  @media (min-width: 1140px) {
    td {
      padding: 0.4375em 0.875em;
    }
  }
  
  /* @include grid-overlay(red, 19); */
  /*--------------------------------------------------------------------------*/
  /* 2. COMMON */
  /*--------------------------------------------------------------------------*/
  body {
    letter-spacing: 0;
  }
  
  .text-muted {
    color: #525252;
  }
  
  ::-moz-selection {
    background-color: var(--main-color);
    color: #fff;
  }
  
  ::selection {
    background-color: var(--main-color);
    color: #fff;
  }
  
  ul {
    list-style: none;
  }
  
  a {
    text-decoration: none !important;
  }
  
  .mbn {
    margin-bottom: 0 !important;
  }
  
  .mb10 {
    margin-bottom: 10px !important;
  }
  
  .mb20 {
    margin-bottom: 20px !important;
  }
  
  .mb30 {
    margin-bottom: 30px !important;
  }
  
  .mb40 {
    margin-bottom: 40px !important;
  }
  
  .mb50 {
    margin-bottom: 50px !important;
  }
  
  .mb60 {
    margin-bottom: 60px !important;
  }
  
  .mtn {
    margin-top: 0 !important;
  }
  
  .mt10 {
    margin-top: 10px !important;
  }
  
  .mt20 {
    margin-top: 20px !important;
  }
  
  .mt30 {
    margin-top: 30px !important;
  }
  
  .mt40 {
    margin-top: 40px !important;
  }
  
  .mt50 {
    margin-top: 50px !important;
  }
  
  .mt60 {
    margin-top: 60px !important;
  }
  
  .mln {
    margin-left: 0;
  }
  
  .ml10 {
    margin-left: 10px;
  }
  
  .ml20 {
    margin-left: 20px;
  }
  
  .ml30 {
    margin-left: 30px;
  }
  
  .ml40 {
    margin-left: 40px;
  }
  
  .ml50 {
    margin-left: 50px;
  }
  
  .ml60 {
    margin-left: 60px;
  }
  
  .mrn {
    margin-right: 0;
  }
  
  .mr10 {
    margin-right: 10px;
  }
  
  .mr20 {
    margin-right: 20px;
  }
  
  .mr30 {
    margin-right: 30px;
  }
  
  .mr40 {
    margin-right: 40px;
  }
  
  .mr50 {
    margin-right: 50px;
  }
  
  .mr60 {
    margin-right: 60px;
  }
  
  .pbn {
    padding-bottom: 0 !important;
  }
  
  .pb10 {
    padding-bottom: 10px;
  }
  
  .pb20 {
    padding-bottom: 20px;
  }
  
  .pb30 {
    padding-bottom: 30px;
  }
  
  .pb40 {
    padding-bottom: 40px;
  }
  
  .pb50 {
    padding-bottom: 50px;
  }
  
  .pb60 {
    padding-bottom: 60px;
  }
  
  .pb70 {
    padding-bottom: 70px;
  }
  
  .pb80 {
    padding-bottom: 80px;
  }
  
  .ptn {
    padding-top: 0 !important;
  }
  
  .pt10 {
    padding-top: 10px;
  }
  
  .pt20 {
    padding-top: 20px;
  }
  
  .pt30 {
    padding-top: 30px;
  }
  
  .pt40 {
    padding-top: 40px;
  }
  
  .pt50 {
    padding-top: 50px;
  }
  
  .pt60 {
    padding-top: 60px;
  }
  
  .pt70 {
    padding-top: 70px;
  }
  
  .pt80 {
    padding-top: 80px;
  }
  
  .pt90 {
    padding-top: 90px;
  }
  
  .pln {
    padding-left: 0;
  }
  
  .pl10 {
    padding-left: 10px;
  }
  
  .pl20 {
    padding-left: 20px;
  }
  
  .pl30 {
    padding-left: 30px;
  }
  
  .pl40 {
    padding-left: 40px;
  }
  
  .pl50 {
    padding-left: 50px;
  }
  
  .pl60 {
    padding-left: 60px;
  }
  
  .prn {
    padding-right: 0;
  }
  
  .pr10 {
    padding-right: 10px;
  }
  
  .pr20 {
    padding-right: 20px;
  }
  
  .pr30 {
    padding-right: 30px;
  }
  
  .pr40 {
    padding-right: 40px;
  }
  
  .pr50 {
    padding-right: 50px;
  }
  
  .pr60 {
    padding-right: 60px;
  }
  
  #contactUs ..underline {

    color: #fff !important;
  } 

  .underline {
    position: relative;
    padding-bottom: 0.4em;
    margin-bottom: 0.6em;
    font-size: 36px;
    font-weight: 700;
  }
  
  .underline:after {
    content: "";
    width: 32px;
    height: 2px;
    background: var(--main-color-2);
    position: absolute;
    bottom: 0;
    left: 0;
  }
  
 
  .full-underline::after {
    width: 100%;
  }
  
  .longer-underline::after {
    width: 60px;
  }
  
  .text-center .underline::after {
    width: 4%;
    left: 48%;
  }
  
  .text-center .longer-underline::after {
    width: 8%;
    left: 46%;
  }
  
  p {
    color: #525252;
  }
  
  /*--------------------------------------------------------------------------*/
  /* 3. BUTTONS & INPUTS */
  /*--------------------------------------------------------------------------*/
  button, input[type="button"], input[type="reset"], input[type="submit"] {
    background-color: var(--main-color);
    color: #fff;
    border: 1px solid var(--main-color);
    outline: none;
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  
  button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus,
  button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
    background-color: #fff;
    color: var(--main-color);
    border-color: var(--main-color);
    outline: none;
  }
  
  button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {
    background-color: #fff;
    color: var(--main-color);
    border-color: var(--main-color);
    outline: none;
  }
  
  .sr-btn {
    display: inline-block;
    margin: 0 0.667em;
    min-height: 43px;
    outline: none;
    background-color: var(--main-color);
    color: #fff;
    border: 1px solid var(--main-color);
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    font-weight: 700;
    font-size: 15px;

  }
  
  .sr-btn:hover {
    background-color: #fff;
    color: var(--main-color);
    border-color: var(--main-color);
  }
  
  .sr-btn:active {
    background-color: #fff;
    color: var(--main-color);
    border-color: var(--main-color);
  }
  
  .sr-btn .icon {
    font-size: 1.5em;
    margin-right: 5px;
  }
  
  .sr-btn.white-btn {
    background-color: #fff;
    color: var(--main-color);
    border-color: #fff;
  }
  
  .sr-btn.white-btn:hover {
    background-color: #11181f;
    color: #fff;
    border-color: #11181f;
  }
  
  .sr-btn.white-btn:active {
    background-color: #11181f;
    color: #fff;
    border-color: #11181f;
  }
  
  input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
    border: 0px;
    min-height: 3.375em;
    width: 100%;
    padding: 0 1em;
  }
  
  input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, input:not([type]):focus, textarea:focus,
  input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, input:not([type]):hover, textarea:hover {
    border: 0px;
    outline: none;
  }
  
  input[type="color"]:active, input[type="date"]:active, input[type="datetime"]:active, input[type="datetime-local"]:active, input[type="email"]:active, input[type="month"]:active, input[type="number"]:active, input[type="password"]:active, input[type="search"]:active, input[type="tel"]:active, input[type="text"]:active, input[type="time"]:active, input[type="url"]:active, input[type="week"]:active, input:not([type]):active, textarea:active {
    border: 0px;
  }
  
  /*--------------------------------------------------------------------------*/
  /* 4. HEADER */
  /*--------------------------------------------------------------------------*/
  .header {
    position: fixed;
    width: 100%;
    height: 80px;
    padding: 20px 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    z-index: 101;
  }

  .header img {
    height: 32px;
  }
  
  .light-header .dark-logo {
    display: none;
  }
  
  .dark-header .dark-logo {
    display: none;
  }
  
  .social-btn {
    color: #fff;
    font-size: 20px;
    margin: 8px;
    line-height: 40px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  
  .social-btn:hover {
    color: var(--main-color);
  }
  
  .fp-viewing-home.light-header .header, .fp-viewing-aboutUs.light-header .header, .fp-viewing-features.light-header .header {
    background: #fff;
    height: 50px;
    padding: 5px 0px;
    box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
  }
  
  .fp-viewing-home.light-header .social-btn, .fp-viewing-aboutUs.light-header .social-btn, .fp-viewing-features.light-header .social-btn {
    color: #323232;
  }
  
  .fp-viewing-home.light-header .social-btn:hover, .fp-viewing-aboutUs.light-header .social-btn:hover, .fp-viewing-features.light-header .social-btn:hover {
    color: var(--main-color);
  }
  
  .fp-viewing-home.light-header .light-logo, .fp-viewing-aboutUs.light-header .light-logo, .fp-viewing-features.light-header .light-logo {
    display: none;
  }
  
  .fp-viewing-home.light-header .dark-logo, .fp-viewing-aboutUs.light-header .dark-logo, .fp-viewing-features.light-header .dark-logo {
    display: inline-block;
  }
  .fp-viewing-aboutUs.dark-header .header, 
  .fp-viewing-features.dark-header .header 
  {
    background: #323232;
    height: 50px;
    padding: 5px 0px;
    box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
  }
  
  .fp-viewing-home.dark-header .social-btn, .fp-viewing-aboutUs.dark-header .social-btn, .fp-viewing-features.dark-header .social-btn {
    color: #fff;
  }
  
  .fp-viewing-home.dark-header .social-btn:hover, .fp-viewing-aboutUs.dark-header .social-btn:hover, .fp-viewing-features.dark-header .social-btn:hover {
    color: var(--main-color);
  }
  
  .fp-viewing-home.dark-header .dark-logo, .fp-viewing-aboutUs.dark-header .dark-logo, .fp-viewing-features.dark-header .dark-logo {
    display: none;
  }
  
  .fp-viewing-home.dark-header .light-logo, .fp-viewing-aboutUs.dark-header .light-logo, .fp-viewing-features.dark-header .light-logo {
    display: inline-block;
  }
  
  .fixed-header.light-header .header {
    background: #fff;
    height: 50px;
    padding: 5px 0px;
    box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
  }
  
  .fixed-header.light-header .social-btn {
    color: #323232;
  }
  
  .fixed-header.light-header .social-btn:hover {
    color: var(--main-color);
  }
  
  .fixed-header.light-header .light-logo {
    display: none;
  }
  
  .fixed-header.light-header .dark-logo {
    display: inline-block;
  }
  
  .fixed-header.dark-header .header {
    background: #323232;
    height: 50px;
    padding: 5px 0px;
    box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
  }
  
  .fixed-header.dark-header .social-btn {
    color: #fff;
  }
  
  .fixed-header.dark-header .social-btn:hover {
    color: var(--main-color);
  }
  
  .fixed-header.dark-header .dark-logo {
    display: none;
  }
  
  .fixed-header.dark-header .light-logo {
    display: inline-block;
  }
  
  /*--------------------------------------------------------------------------*/
  /* 5. SECTIONS */
  /*--------------------------------------------------------------------------*/
  .content-section:nth-of-type(even) {
    background-color: #f2f2f2;
  }
  
  .content-section:nth-of-type(odd) {
    background-color: #fff;
  }
  
  #fp-nav ul li a span,
  .fp-slidesNav ul li a span {
    background: var(--main-color); //rgba(0, 0, 0, 0.7);
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
  }
  
  #fp-nav ul li a.active span,
  .fp-slidesNav ul li a.active span,
  #fp-nav ul li:hover a.active span,
  .fp-slidesNav ul li:hover a.active span {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background: var(--main-color); //rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    border: 1px solid var(--main-color); //rgba(0, 0, 0, 0.7);
  }
  
  #fp-nav ul li .fp-tooltip {
    font-family: "Montserrat", sans-serif;
    top: -8px;
    color: #424242;
  }
  .section-title {
    margin-bottom: 2.25em;
    font-size: 15px;
  }
  
  .section-description, .section-description *, .section-title p {
    color: #646466;
  }
  
  /*--------------------------------------------------------------------------*/
  /* 6. HEADLINE & HEAD SECTION */
  /*--------------------------------------------------------------------------*/
  .particles-div {
    background-color: #11181f;
    background-image: -webkit-linear-gradient(#11181f, var(--main-color));
    background-image: linear-gradient(#11181f, var(--main-color));
    position: relative;
    z-index: 1;
  }
  
  .particles-div canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  .headline {
    color: #fff;
    font-size: 60px;
    text-shadow: 1px 3px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-top: 0;
    font-weight: bold;
    line-height: 73px;;
  }
  .headline img { display: block; margin: auto; width: 100px; height: 100px;}
  
  .headline small {
    text-transform: capitalize;
    font-size: 0.444em;
    display: block;
    margin-top: 1em;
    color: rgba(255, 255, 255, 0.75);
  }
  
  .static-img-div {
    background: url(../images/Image_02.jpg);
    background-color: rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-attachment: fixed;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  
  .solid-color-div {
    background-color: var(--main-color) !important;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
  
  .solid-color-div .bg-icon {
    font-size: 38.443em;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
  }
  
  .gradient-div {
    background-color: #1a252f;
    background-image: -webkit-linear-gradient(#1a252f, var(--main-color));
    background-image: linear-gradient(#1a252f, var(--main-color));
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
  }
  
  .gradient-div .bg-icon {
    font-size: 38.443em;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
  }
  
  /*IE FIX FOR particles-div */
  .particles-div .content {
    position: relative;
    z-index: 5;
  }
  
  .particles-div canvas {
    z-index: 1;
  }
  
  .content-section {
    position: relative;
    z-index: 5;
  }
  
  /*--------------------------------------------------------------------------*/
  /* 7. COUNTDOWN */
  /*--------------------------------------------------------------------------*/
  .countdown {
    background: transparent;
    color: #fff;
    border: 0px;
    margin-bottom: 2.25em;
    font-size: 1em;
    font-weight: 400 !important;
    text-shadow: 1px 3px 6px rgba(0, 0, 0, 0.1);
  }
 .countdown span {
    font-size: 3.375em;
  }

@media ( max-width: 580px ) {
 .countdown-section {
	display: block;
    	font-size: .6em !important;
 }
 .countdown-section span {
    font-size:2.6em !important;
    display: block;
  } 
} 
 
  
  .countdown .countdown-section {
    border-left: 1px dashed #fff;
    display: inline-block;
    width: 20%;
    text-align: center;
    padding: 1em 0;
  }
  
  .countdown .countdown-section:last-child { border-right: 0 none !important; }
  .countdown .countdown-section:first-child {
    border-left: 0 none;
  }
  
  .notify-div {
    margin-top: 3.375em;
    text-align: center;
  }
  
  .notify-div input {
    width: 300px;
    display: inline-block;
  }
  
  /*--------------------------------------------------------------------------*/
  /* 8. FEATURES, ABOUT & CONTACT SECTIONS */
  /*--------------------------------------------------------------------------*/
  .bg-icon {
    position: absolute;
    font-size: 25.629em;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0.2;
    top: -30px;
    right: -25px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  
  .feature-left-icon img {

    margin: 0 15px 0 0;
    max-width: 30px;
    max-height: 50px;

  }


  .feature-left-icon {
    background: var(--main-color-2);
    padding: 16px;
    position: relative;
    height: 152px;
  }
  

  .feature-left-icon .feature-desc {
    font-size: 13px;
    font-weight: 500;
  }

  .feature-left-icon .icon {
    color: #fff;
    font-size: 3.063em;
    width: 80px;
    display: inline-block;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
  }
  
  .feature-left-icon p {
    color: #f2f2f2;
  }
  
  .feature-left-icon .feature-title {
    margin-top: 0px;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0;
    font-weight: 600;
  }
  
  .feature-left-icon .bg-icon {
    font-size: 17.086em;
    top: 5px;
    right: -5px;
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  .feature-left-icon:before, .feature-left-icon:after { display: none !important; }
  /*
  .feature-left-icon:before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid black;
    top: -4px;
    left: -4px;
    border-width: 2px 0 0 2px !important;
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  */
  #services .feature-title {
    font-size: 16px;
    font-weight: 600;
  }
 
  .feature-left-icon:after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid black;
    bottom: -4px;
    right: -4px;
    border-width: 0 2px 2px 0 !important;
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  
  .feature-left-icon:hover:before {
    width: 25px;
    height: 25px;
  }
  
  .feature-left-icon:hover::after {
    width: 25px;
    height: 25px;
  }
  .feature-left-icon:hover .bg-icon {
    font-size: 25.629em;
  }
  
  .sr-box {
    background: #323232;
    padding: 2em;
    color: #fff;
    position: relative;
  }
  
  .sr-box h4 {
    color: #fff;
  }
  
  .sr-box p {
    color: #cccccc;
  }
  
  .sr-box:before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid #323232;
    top: -4px;
    left: -4px;
    border-width: 2px 0 0 2px !important;
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  
  .sr-box:after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid #323232;
    bottom: -4px;
    right: -4px;
    border-width: 0 2px 2px 0 !important;
    -webkit-transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  
  .sr-box:hover:before {
    width: 80%;
    height: 80%;
  }
  
  .sr-box:hover::after {
    width: 80%;
    height: 80%;
  }
  
  .sr-box:hover .bg-icon {
    font-size: 38.443em;
  }
  
  .only-img {
    padding:0;
    overflow: hidden;
  }

  .only-img img {object-fit: cover; height: 310px;}

  .content-section .social-btn {
    color: #323232 !important;
  }
  
  .contact-us-form input, .contact-us-form textarea {
    margin-bottom: 1.5em;
  }
  
  .intro-para p {
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
  }
  
  /*--------------------------------------------------------------------------*/
  /* 9. SWITCHER */
  /*--------------------------------------------------------------------------*/
  .switcher {
    position: fixed;
    top: 100px;
    padding: 20px;
    left: -200px;
    background: #323232;
    width: 200px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
  }
  
  .switcher .handle {
    position: absolute;
    right: -40px;
    width: 40px;
    height: 40px;
    color: #f2f2f2;
    font-size: 26px;
    line-height: 40px;
    background: #323232;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    box-shadow: 0 5px 20px 5px rgba(0, 0, 0, 0.05);
  }
  
  .switcher p {
    color: #f2f2f2;
  }
  
  .switcher h5 {
    font-size: 14px;
    color: #fff;
  }
  
  .switcher .color {
    width: 25px;
    height: 25px;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
  }
  
  .switcher .alizarin {
    background: #e74c3c;
  }
  
  .switcher .torquoise {
    background: #1abc9c;
  }
  
  .switcher .sunflower {
    background: #f1c40f;
  }
  
  .switcher .carrot {
    background: #e67e22;
  }
  
  .switcher .peterriver {
    background: #3498db;
  }
  
  .switcher .wisteria {
    background: #8e44ad;
  }
  
  .switcher .nephritis {
    background: #27ae60;
  }
  
  .switcher .midnightblue {
    background: var(--main-color);
  }
  
  .switcher .switch-header {
    padding: 5px 10px;
    border: 1px solid #f2f2f2;
    display: block;
    text-align: center;
    margin: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #f2f2f2;
  }
  
  .switcher p {
    font-size: 11px;
  }
  
  .switcher p a {
    color: #fff;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  
  .switcher p a:hover {
    color: var(--main-color);
  }
  
  /*--------------------------------------------------------------------------*/
  /* 10. SWEET ALERT */
  /*--------------------------------------------------------------------------*/
  .sweet-alert {
    border-radius: 0px;
    font-family: "Montserrat", sans-serif;
  }
  
  .sweet-alert button, .sweet-alert input[type="button"], .sweet-alert input[type="reset"], .sweet-alert input[type="submit"] {
    border-left-color: var(--main-color) !important;
    border-right-color: var(--main-color) !important;
    background-color: var(--main-color) !important;
  }
  
  .sweet-alert button.styled {
    border-radius: 0px;
    margin: auto;
  }
  
  /*--------------------------------------------------------------------------*/
  /* 11. MEDIA QUERIES */
  /*--------------------------------------------------------------------------*/
  @media only screen and (max-width: 768px) {
    .headline {
      font-size: 32px !important;
      line-height: 1.3em;
    }
    .feature-left-icon {
      margin-bottom: 2em;
    }
    .sr-box {
      margin-bottom: 2em;
    }

    .mobile-center {
      text-align: center; 
    }
    .mobile-center .underline::after { left: 48%; width: 4%; }
    header { position: relative !important; background: #323232; }

.container  .row.mb30 { margin: 0 !important}
}
  


  #contactUs form input {color: #000 !important}
  #contactUs ,
  #contactUs h1 ,
  #contactUs h2 ,
  #contactUs h3 ,
  #contactUs h4 ,
  #contactUs h5 ,
  #contactUs  span,
  #contactUs p,
  #contactUs a,
  #contactUs  div
  {
    color: #fff !important;
  } 
  #contactUs  h5.underline {
    font-size: 16px !important;
  }
  #contactUs   .underline:after {
    background: #fff !important;
  }