Team:ASTWS-China/css/home.css

body { 

 font-family: "Open Sans", sans-serif;
 color: #444444;

}

a { 

 color: #009970;
 text-decoration: none;

}

a:hover { 

 color: #00cc95;
 text-decoration: none;

}

h1, h2, h3, h4, h5, h6 { 

 font-family: "Raleway", sans-serif;

}

/*--------------------------------------------------------------# Back to top button--------------------------------------------------------------*/ .back-to-top { 

 position: fixed;
 visibility: hidden;
 opacity: 0;
 right: 15px;
 bottom: 15px;
 z-index: 996;
 background: #009970;
 width: 40px;
 height: 40px;
 border-radius: 50px;
 transition: all 0.4s;

}

.back-to-top i { 

 font-size: 28px;
 color: #fff;
 line-height: 0;

}

.back-to-top:hover { 

 background: #00c28e;
 color: #fff;

}

.back-to-top.active { 

 visibility: visible;
 opacity: 1;

}

/*--------------------------------------------------------------# Disable AOS delay on mobile--------------------------------------------------------------*/ @media screen and (max-width: 768px) { 

 [data-aos-delay] {
   transition-delay: 0 !important;
 }

}

/*--------------------------------------------------------------# Header--------------------------------------------------------------*/

  1. header {
 transition: all 0.5s;
 z-index: 997;
 transition: all 0.5s;
 top: 20px;

}

  1. header .header-container {
 background: #fff;

}

  1. header.header-scrolled {
 background: #fff;
 box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
 top: 0;

}

  1. header .logo {
 overflow: hidden;
 padding: 16px 30px 12px 30px;

}

  1. header .logo h1 {
 font-size: 26px;
 padding: 0;
 line-height: 1;
 font-weight: 700;
 font-family: "Poppins", sans-serif;

}

  1. header .logo h1 a,
  2. header .logo h1 a:hover {
 color: #fff;
 text-decoration: none;

}

  1. header .logo img {
 padding: 0;
 margin: 0;
 max-height: 40px;

}

@media (max-width: 992px) { 

 #header {
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
   top: 0;
   background: #009970;
 }

 #header.header-scrolled,
 #header .header-container {
   background: #009970;
 }

 #header .logo {
   padding-left: 0;
 }

 #header .logo h1 {
   font-size: 24px;
 }

}

/*--------------------------------------------------------------# Navigation Menu--------------------------------------------------------------*/ /*** Desktop Navigation */ .navbar { 

 padding: 0;

}

.navbar ul { 

 margin: 0;
 padding: 0;
 display: flex;
 list-style: none;
 align-items: center;

}

.navbar li { 

 position: relative;

}

.navbar a, .navbar a:focus { 

 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 0 10px 30px;
 color: #36343a;
 transition: 0.3s;
 font-size: 13px;
 font-weight: 500;
 text-transform: uppercase;
 font-family: "Poppins", sans-serif;
 white-space: nowrap;
 transition: 0.3s;

}

.navbar a i, .navbar a:focus i { 

 font-size: 12px;
 line-height: 0;
 margin-left: 5px;

}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a { 

 color: #009970;

}

.navbar .getstarted { 

 background: #009970;
 padding: 10px 25px;
 margin-left: 30px;
 margin-right: 15px;
 border-radius: 50px;
 color: #fff;

}

.navbar .getstarted:hover { 

 color: #fff;
 background: #00b383;

}

.navbar .dropdown ul { 

 display: block;
 position: absolute;
 left: 14px;
 top: calc(100% + 30px);
 margin: 0;
 padding: 10px 0;
 z-index: 99;
 opacity: 0;
 visibility: hidden;
 background: #fff;
 box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
 transition: 0.3s;

}

.navbar .dropdown ul li { 

 min-width: 200px;

}

.navbar .dropdown ul a { 

 padding: 10px 20px;
 text-transform: none;
 font-weight: 500;

}

.navbar .dropdown ul a i { 

 font-size: 12px;

}

.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a { 

 color: #009970;

}

.navbar .dropdown:hover > ul { 

 opacity: 1;
 top: 100%;
 visibility: visible;

}

.navbar .dropdown .dropdown ul { 

 top: 0;
 left: calc(100% - 30px);
 visibility: hidden;

}

.navbar .dropdown .dropdown:hover > ul { 

 opacity: 1;
 top: 0;
 left: 100%;
 visibility: visible;

}

@media (max-width: 1366px) { 

 .navbar .dropdown .dropdown ul {
   left: -90%;
 }

 .navbar .dropdown .dropdown:hover > ul {
   left: -100%;
 }

}

/*** Mobile Navigation */ .mobile-nav-toggle { 

 color: #fff;
 font-size: 28px;
 cursor: pointer;
 display: none;
 line-height: 0;
 transition: 0.5s;

}

@media (max-width: 991px) { 

 .mobile-nav-toggle {
   display: block;
 }

 .navbar ul {
   display: none;
 }

}

.navbar-mobile { 

 position: fixed;
 overflow: hidden;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background: rgba(29, 28, 31, 0.9);
 transition: 0.3s;
 z-index: 999;

}

.navbar-mobile .mobile-nav-toggle { 

 position: absolute;
 top: 15px;
 right: 15px;

}

.navbar-mobile ul { 

 display: block;
 position: absolute;
 top: 55px;
 right: 15px;
 bottom: 15px;
 left: 15px;
 padding: 10px 0;
 background-color: #fff;
 overflow-y: auto;
 transition: 0.3s;

}

.navbar-mobile a { 

 padding: 10px 20px;
 font-size: 15px;
 color: #36343a;

}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a { 

 color: #009970;

}

.navbar-mobile .getstarted { 

 margin: 15px;

}

.navbar-mobile .dropdown ul { 

 position: static;
 display: none;
 margin: 10px 20px;
 padding: 10px 0;
 z-index: 99;
 opacity: 1;
 visibility: visible;
 background: #fff;
 box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);

}

.navbar-mobile .dropdown ul li { 

 min-width: 200px;

}

.navbar-mobile .dropdown ul a { 

 padding: 10px 20px;

}

.navbar-mobile .dropdown ul a i { 

 font-size: 12px;

}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a { 

 color: #009970;

}

.navbar-mobile .dropdown > .dropdown-active { 

 display: block;

}

/*--------------------------------------------------------------# Hero Section--------------------------------------------------------------*/

  1. hero {
 width: 100%;
 height: 80vh;
 background: url("T--ASTWS-China--hero.bg.jpg")
   center center;
 background-size: cover;
 position: relative;

}

  1. hero .container {
 padding-top: 80px;

}

  1. hero:before {
 content: "";
 background: rgba(0, 0, 0, 0.6);
 position: absolute;
 bottom: 0;
 top: 0;
 left: 0;
 right: 0;

}

  1. hero h1 {
 margin: 0 0 10px 0;
 font-size: 48px;
 font-weight: 700;
 line-height: 56px;
 color: #fff;

}

  1. hero h2 {
 color: #eee;
 margin-bottom: 40px;
 font-size: 15px;
 font-weight: 500;
 font-family: "Open Sans", sans-serif;
 letter-spacing: 0.5px;
 text-transform: uppercase;

}

  1. hero .btn-get-started {
 font-family: "Poppins", sans-serif;
 text-transform: uppercase;
 font-weight: 500;
 font-size: 14px;
 letter-spacing: 1px;
 display: inline-block;
 padding: 8px 28px;
 border-radius: 50px;
 transition: 0.5s;
 margin: 10px;
 border: 2px solid #fff;
 color: #fff;

}

  1. hero .btn-get-started:hover {
 background: #009970;
 border: 2px solid #009970;

}

@media (min-width: 1024px) { 

 #hero {
   background-attachment: fixed;
 }

}

@media (max-width: 768px) { 

 #hero {
   height: 100vh;
 }

 #hero .container {
   padding-top: 60px;
 }

 #hero h1 {
   font-size: 32px;
   line-height: 36px;
 }

}

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

  1. Sections General
*/

section { 

 padding: 60px 0;
 overflow: hidden;

}

.section-bg { 

 background-color: #f6f6f7;

}

.section-title { 

 padding-bottom: 30px;

}

.section-title h2 { 

 font-size: 32px;
 font-weight: bold;
 text-transform: uppercase;
 margin-bottom: 20px;
 padding-bottom: 20px;
 position: relative;

}

.section-title h2::after { 

 content: "";
 position: absolute;
 display: block;
 width: 50px;
 height: 3px;
 background: #009970;
 bottom: 0;
 left: 0;

}

.section-title p { 

 margin-bottom: 0;

}

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

  1. About
*/

.about .content h2 { 

 font-weight: 700;
 font-size: 45px;
 line-height: 80px;
 margin-bottom: 20px;
 text-transform: uppercase;

}

.about .content h3 { 

 font-family: "Raleway";
 font-weight: 300;
 font-size: 16px;
 line-height: 25px;
 margin-bottom: 10px;
 text-align: justify;
 text-indent: 3em;

}

.about .content ul { 

 list-style: none;
 padding: 0;

}

.about .content ul li { 

 padding: 10px 0 0 28px;
 position: relative;

}

.about .content ul i { 

 left: 0;
 top: 7px;
 position: absolute;
 font-size: 20px;
 color: #009970;

}

.about .content p:last-child { 

 margin-bottom: 0;

}