/* Title */
.ln-title-one .upper-title {
    display: block;
    color: #9E9E9E;
    font-size: 17px;
    letter-spacing: 1.26px;
    margin-bottom: 5px;
}
.ln-title-one h2 {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.138em;
}
/* Nav bar */
.landing-menu .purchase-btn {
    font-size: 18px;
    color: #000;
    width: 170px;
    line-height: 50px;
    border: 1px solid #000;
    border-radius: 50px;
    text-align: center;
}
.landing-menu .purchase-btn:hover {
    background: #244034;
    border-color: #244034;
    color: #fff;
}
.landing-navbar li a {
    font-weight: 500;
    color: #000;
    margin: 0 24px;
    padding: 15px 0;
    transition: all 0.2s ease-in-out;
}
.landing-navbar li a:hover {color: #0A4020; text-decoration: underline;}
/* Banner */
.landing-banner {
    background: #dfff5e;
    z-index: 2;
}
.landing-banner:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    bottom:0;
    background: #1A4137;
    height:18%;
    z-index: -1;
}
.landing-banner:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top:0;
    background: url(img/shape_01.svg) no-repeat right bottom;
    background-size: cover;
    z-index: -1;
}
.landing-banner h1 {
    font-weight: 700;
    font-size: 76px;
    line-height: 1.236em;
    color: #224133;
    letter-spacing: 0px;
}
.landing-banner h1 span {
    display: inline-block;
    position: relative;
    z-index: 1;
}
.landing-banner h1 span img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -14%;
    z-index: -1;
}
.landing-banner .shape_01 {
    z-index: -1;
    top:16%;
    left: 5%;
    max-width: 60px;
    width: 3.2%;
    animation: rotated 50s infinite linear;
}
.landing-banner .shape_02 {
    z-index: -1;
    top:28%;
    right: 6%;
    max-width: 35px;
    width: 2%;
    animation: rotatedTwo 50s infinite linear;
}
/* Template Info */
.template-info {
    background: #1A4137;
    z-index: 1;
}
.template-info .bg-wrapper {
    background: url(img/shape_04.svg) no-repeat center;
    background-size: cover;
}
.template-info h3 {
    font-size: 65px;
    color: #D3F15A;
}
.template-info .shape_01 {
    top:5%;
    left: 5%;
    max-width: 60px;
    width: 3.5%;
}
.template-info .shape_02 {
    bottom:8%;
    right: 6%;
    max-width: 35px;
    width: 2%;
}
.template-info .shape_03 {
    bottom:18%;
    left: 4%;
    width: 7%;
}
/* Home Demo */
.home-demo {
    z-index: 1;
}
.home-demo .page-item .img-meta {
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid #040404;
}
.home-demo a.img-meta:hover img {
    transform: scale3d(1.1, 1.1, 1.0);
}
/* Loading Score Banner */
.loading-score-banner {
    background: #E6ECE7;
}
.loading-score-banner .card-wrapper {
    height: 250px;
    padding: 15px;
    background: #FFFFFF;
    box-shadow: 0px 40px 80px rgba(0, 30, 57, 0.04);
    border-radius: 15px;
    text-align: center;
}
.loading-score-banner .card-wrapper .score {
    font-size: 45px;
    color: #244034;
}
.loading-score-banner .card-wrapper p {line-height: 1.6em;}
.loading-score-banner .card-wrapper li a {
    font-size: 18px;
    color: #FFB043;
    margin: 0 8px;
}
/* Core Feature */
.lan-core-feature {
    z-index: 1;
    background: #1A4137;
}
.lan-core-feature .content-wrapper {margin: 0 -20px;}
.lan-core-feature .block {
  padding: 0 20px;
  margin-top: 50px;
}
.lan-core-feature .feature {
  width: 230px;
  height: 220px;
  text-align: center;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}
.lan-core-feature .feature .icon {height: 54px;}
.lan-core-feature .feature .icon img {max-height: 100%; transition: all 0.3s ease-in-out;}
.lan-core-feature .feature p {
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  margin: 25px 0 0;
}
.lan-core-feature .feature:hover {background: rgba(255, 255, 2555, 0.02); border-color: #234637;}
.lan-core-feature .feature:hover .icon img {transform: translateY(-5px);}
.lan-core-feature .shape_01 {
    z-index: 0;
    left: 0;
    top:0;
    transform: translateY(-50%);
    max-width: 9%;
}

/* Figma File Banner */
.figma-file-banner {
    background: #DFFF5E;
    z-index: 1;
}
.figma-file-banner .icon {
    width: 155px;
    margin: 0 auto;
}
.figma-file-banner .shape_01 {
    z-index: 0;
    right: 0;
    top:0;
    transform: translateY(-50%);
    max-width: 10%;
}
.figma-file-banner .shape_02 {
    z-index: 0;
    left: 0;
    bottom:0;
    transform: translateY(50%);
    max-width: 10%;
}
.figma-file-banner .shape_03 {
    top:16%;
    left: 5%;
    max-width: 60px;
    width: 3.2%;
    animation: rotated 50s infinite linear;
}
.figma-file-banner .shape_04 {
    bottom:10%;
    right: 6%;
    max-width: 35px;
    width: 2%;
    animation: rotatedTwo 50s infinite linear;
}
/* Footer */
.lan-footer {
    z-index: 1;
}
.lan-footer .shape_01 {
    z-index: 0;
    left: 5%;
    bottom:1%;
    max-width: 14%;
}
.lan-footer .shape_02 {
    z-index: 0;
    right: 0;
    bottom:0;
    max-width: 9%;
}


/* ------------- Responsive File -------------- */
@media (min-width: 1200px) and (max-width: 1399px) { 
    .landing-banner h1 {font-size: 55px;}
    .landing-banner .feature-wrapper h2 {font-size: 75px;}
    .ln-title-one h2 {font-size: 68px;}
    .template-info h3 {font-size: 60px;}

}


@media (max-width: 1199px) { 
    .landing-navbar li a {font-size: 15px; margin: 0 12px;}
    .landing-menu .purchase-btn {font-size: 15px; width: 160px; line-height: 45px;}
    .landing-banner .feature-wrapper {height: 150px; border-radius: 50px;}
    .landing-banner .feature-wrapper h2 {font-size: 35px;}
    .ln-title-one .upper-title {font-size: 14px;}
    .loading-score-banner .card-wrapper {height: 160px;}
    .loading-score-banner .card-wrapper .score {font-size: 30px; margin-bottom: 5px;}
    .lan-core-feature .feature {width: 200px; height: 190px;}
    .lan-core-feature .feature p {font-size: 17px; line-height: 28px; margin-top: 20px;}
    .lan-core-feature .feature .icon {height: 45px;}
    .lan-core-feature .block {margin-top: 25px;}
    .figma-file-banner .icon {width: 80px;}

}


@media (min-width: 992px) and (max-width: 1199px) { 
    .landing-banner h1 {font-size: 45px;}
    .ln-title-one h2 {font-size: 55px;}
    .template-info h3 {font-size: 45px;}
    

}

@media (max-width: 991px) {
    .landing-banner h1 {font-size: 38px;}
    .ln-title-one h2 {font-size: 35px;}
    .landing-banner h1 span:before {height: 10px; bottom: 9px;}
    .template-info h3 {font-size: 38px;}


 }

 @media (max-width: 575px) {
    .landing-navbar li a {margin: 0 0 0 15px;}
  }