/*
Theme Name: Wake a agency
Theme URI: https://wakeaagency.io/
Author: Innosoftworks
Author URI: https://innosoftworks.com/
Description: Wordpress theme designed for Ipek & Parnters with Blog Integration.
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wakeaagency.io
Tags: one-column, two-columns, custom-menu, featured-images, left-sidebar, right-sidebar
*/
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');



body{

    margin: 0;

    font-family: "Rubik", Sans-serif;

}

html {

  scroll-behavior: smooth;

}

/* typography */

h1,

h2,

h3,

h4,

h5,

h6,

span,

p,

a {

	clear: both;

}

a {

    text-decoration: none;

}

h1{

    font-family: "Bai Jamjuree", sans-serif;

    font-size: 60px;

    line-height: 70px;

    font-weight: 700;

    margin: 0;

}

h2{

    font-family: "Bai Jamjuree", sans-serif;

    font-size: 40px;

    line-height: 48px;

    font-weight: 700;

    margin: 0;

}

h5{

    font-family: "Bai Jamjuree", sans-serif;

    font-size: 20px;

    line-height: 24px;

    font-weight: 700;

    margin: 0;

}

a{

    font-family: "Bai Jamjuree", sans-serif;

    font-size: 16px;

    line-height: 26px;

    font-weight: 500;

    margin: 0;

}

p{

    font-family: "Rubik", Sans-serif;

    font-size: 16px;

    line-height: 26px;

    font-weight: 400;

    margin: 0;

}





.custom-container {

    width: 100%;

    max-width: 1140px;

    margin: 0 auto;

}

.btn-dark-custom {

    font-family: "Bai Jamjuree", sans-serif;

    background-color: black;

    color: white;

    border: 1px solid black;

    padding: 10px 20px;

    font-weight: bold;

    border-radius: 6px;

    margin: 20px 0;

}

.btn-dark-custom:hover {

    background-color: transparent;

    color: black;

}

.btn-green-custom{

    font-family: "Bai Jamjuree", sans-serif;

    background-color: #198754;

    color: white;

    border: 1px solid #198754;

    padding: 10px 20px;

    font-weight: bold;

    border-radius: 6px;

    margin: 20px 0;

}

.btn-green-custom:hover{

    background-color: transparent;

    color: #198754;

}



/* HEADER SECTION */

.header-inner.row.align-items-center {

    width: 100%;

}

.navbar{

    padding: 20px 0px;

}

.navbar-nav .nav-bar{

    color: #000000;

    font-family: "Rubik", Sans-serif;

    font-size: 16px;

    font-weight: 400;

    text-decoration: none;

    line-height: 26px;

    color: #000000;

    padding: 0px 20px 0px 20px;

}

.navbar-nav .nav-bar:hover {

    color: #2F855A;

}

header .header-btn a {

    display: inline-block;

    margin: 0;

}



/* Hero section */

.hero-section {

    position: relative;

    padding: 60px 0;

    background-color: #F4F1EE;

    z-index: 1;

}

.hero-section:after {

    content: '';

    display: block;

    height: 100%;

    width: 100%;

    background-image: url('assets/images/hero-banner.webp');

    background-position: center;

    background-size: cover;

    position: absolute;

    top: 0;

    left: 0;

    z-index: -1;

}

.hero-section .txt-sec {

    position: relative;

    width: 100%;

    max-width: 55%;

    padding: 0;

}

.hero-section .hero-image {

    position: relative;

    width: 100%;

    max-width: 45%;

    padding: 0;

}

.custom-txt {

    font-family: "Rubik", Sans-serif;

    font-size: 16px;

    font-weight: 500;

    text-transform: uppercase;

    line-height: 26px;

    letter-spacing: 1px;

    color: #2F855A;

}

.badge-custom {

    color: white;

    font-weight: bold;

    border-radius: 5px 0px 0px 5px;

    background: linear-gradient(270deg, #C3B091 0%, #2F855A 100%);

    box-shadow: 0px 10px 30px rgba(47, 133, 90, 0.45098);

    display: inline-block;

    padding: 5px 0 0 14px;

    height: 34px;

}

.hero-section .heading-txt {

    color: #000000;

}

.hero-section .highlight {

    color: #2c7753;

    font-weight: bold;

}

.hero-section .highlight-dig {

    position: relative;

}

.hero-section .highlight-dig::before {

    content: '';

    position: absolute;

    bottom: -40px;

    left: 0;

    display: block;

    width: 100%;

    height: 40px;

    background: url('assets/images/hero_txt_shape.webp');

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

}

.hero-section .play-img {

    position: absolute;

    top: 20px;

    right: 0;

}



/* service section */

.services-section {

    padding: 100px 0;

    background-color: #ffffff;

}



.section-lable-txt {

    margin-top: 20px;

}

.services-section .card-custom {

    border-radius: 30px;

    box-shadow: -21px 40px 70px 0px rgba(47.00000000000001, 133, 90.00000000000001, 0.08);

    padding: 30px 25px;

    text-align: center;

    border: 1px solid #2F855A1A;

}

.services-section .card-custom.h-100:hover {

    background: linear-gradient(180deg, #A4FFD2 0%, #2F855A 100%);

}

.services-section .card-custom.h-100:hover .icon-circle {

    background: #fff;

}

.services-section .card-custom.h-100:hover svg.custom-icon {

    fill: #2F855A;

}

.services-section .card-custom.h-100:hover p,

.services-section .card-custom.h-100:hover h5,

.services-section .card-custom.h-100:hover .learn-more {

    color: #fff;

}

.services-section .icon-circle {

    background: linear-gradient(180deg, #A4FFD2 0%, #2F855A 100%);

    width: 90px;

    height: 90px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

}

.services-section svg.custom-icon {

    fill: #fff;

    transition: all linear .3s;

}

.services-section .card-custom h5 {

    margin-bottom: 20px;

    transition: all linear .3s;

}

.services-section .card-custom p {

    text-align: center;

    font-weight: 400;

    color: #242424;

    transition: all linear .3s;

}

.services-section .learn-more {

    display: block;

    font-family: "Bai Jamjuree", sans-serif;

    margin: 20px 0px;

    font-weight: 700;

    color: #2F855A;

    text-decoration: none;

    transition: all linear .3s;

}



/* About section */

.about-section {

    position: relative;

    padding: 100px 0;

    background-color: #F4F1EE;

    z-index: 1;

}

.about-section:after {

    content: '';

    display: block;

    height: 100%;

    width: 100%;

    background-image: url('assets/images/about-bg.webp');

    background-position: center;

    background-size: cover;

    position: absolute;

    top: 0;

    left: 0;

    z-index: -1;

}

.about-section .about-inner {

    display: flex;

}

.about-section .col-content {

    width: 100%;

    max-width: 65%;

    margin: 0;

}

.about-section .col-content-img {

    width: 100%;

    max-width: 35%;

    padding: 0;

}



.about-section .highlight-text span {

    color: #2c7753;

}

.about-section .img-small {

    width: 220px;

    border-radius: 16px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    border: 2px solid #fff;

}



.about-section .img-large {

    border-radius: 24px;

    width: 100%;

    height: auto;

    object-fit: cover;

}

.about-section .mb-0 {

    margin-bottom: 0!important;

}

.about-section p.mb-0.custom-para {

    padding-right: 80px;

    font-weight: 400;

}



/* Contact us section */

.elementor-elemen-bg {

    position: relative;

    background-image: url('assets/images/bg-contact.png');

    background-size: cover;

    background-position: center;

    color: white;

    padding: 80px 0;

 

}

.elementor-elemen-bg h2 {

    width: 100%;

    max-width: 500px;

    margin: 0 auto 20px;

}

.elementor-elemen-bg p {

    width: 100%;

    max-width: 350px;

    margin: 0 auto 20px;

}

.elementor-elemen-bg button {

    margin: 10px auto 0;

}



/* form section */

.form .card {

    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.06);

    border-radius: 10px;

    width: 100%;

}

.form form {

    padding: 60px 80px;

}

.form .form-control {

    padding: 12px 20px;

    background-color: #F9F9F9;

    border: 1px solid #E6E6E6;

    box-shadow: none !important;

    outline: none;

}
.form form textarea.form-control{height: 122px;}

/* footer section */

.footer-bg {

    position: relative;

    padding: 60px 0;

     top: 0; left: 0; right: 0; bottom: 0;

    background-color: rgba(47, 133, 90, 1);

    z-index: 1;

}

.footer-bg:after {

    content: '';

    display: block;

    height: 100%;

    width: 100%;

    background-image: url('assets/images/bg_layer.png');

    background-position: center;

    background-size: cover;

    position: absolute;

    top: 0;

    left: 0;

    z-index: -1;

}

.footer-content {

    position: relative;

}

footer .logo{

    width: 58%;

}

footer .links{

    width: 18%;

}

footer .info{

    width: 24%;

}

footer .info a {

    padding-bottom: 10px;

    color: #fff !important;

    text-decoration: none !important;

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    gap: 15px;

}

footer .info a svg {

    width: 20px;

    fill: #fff;

}

footer .info a span {

    width: calc(100% - 35px);

}

footer .logo p {

    width: 90%;

    margin-top: 20px;

}

footer a.text-white:hover {

    text-decoration: underline;

}

/*********************************************************************** 

Media Quries 

***********************************************************************/

@media only screen and (max-width: 990px) {

    h1{

        font-size: 38px;

        line-height: 48px;

    }

    h2{

        font-size: 34px;

        line-height: 44px;

    }

    a{

        font-size: 16px;

        line-height: 26px;

    }

    .custom-container {

        width: calc(100% - 40px);

    }

    /* header section */

    header .header-inner {

        padding: 0;

        margin: 0;

    }

    header .header-logo {

        width: 50%;

        padding: 0;

    }

    header .header-menu {

        width: 10%;

        padding: 0;

        text-align: right;

    }

    header .header-menu .header-nav {

        width: 100%;

        position: absolute;

        top: 86px;

        left: 0;

        background: #fff;

        opacity: 0;

        visibility: hidden;

        z-index: 999;

    }

    header .header-menu .header-nav.show {

        opacity: 1;

        visibility: visible;

    }

    header .header-btn {

        width: 40%;

        padding: 0;

    }



    /* hero section */

    .hero-section .custom-container {

        padding-right: calc(1.5rem * .5);

        padding-left: calc(1.5rem * .5);

    }

    .hero-section .play-img {

        width: 100%;

        max-width: 80px;

    }

    .hero-section .txt-sec {

        display: flex;

        flex-direction: column;

        justify-content: start;

        align-items: start;

    }

    .hero-section .heading-txt {

        text-align: start;

    }

    .hero-section .highlight-dig::before {

        bottom: 213px;

    }

    .text-muted {

        text-align: start;

    }

    .hero-image {

        margin-top: 0px !important;

    }



    /* service section */

    .services-section {

        padding: 60px 0px;

        background-color: #ffffff;

    }



    /* about section */



    .about-content.d-flex.align-items-center.mt-4 {

        flex-direction: column;

        justify-content: start;

        align-items: start !important;

        gap: 10px;

    }

    .about-section .img-small {

        width: 126px;

    }

    .about-section p.mb-0.custom-para {

        padding-right: 0;

    }

    .form form {

        padding: 30px 20px;

    }

    footer .logo {

        width: 40%;

    }

    footer .links {

        width: 20%;

    }

    footer .info {

        width: 40%;

    }

}

/* For Mobile */

@media only screen and (max-width: 767px) {

    h1{

        font-size: 32px;

        line-height: 42px;

    }

    h2{

        font-size: 28px;

        line-height: 38px;

    }

    .btn-dark-custom {

        width: 100%;

    }



    /* header section */

    .header-inner.row.align-items-center {

        margin: 0 auto;

    }

    .col-2.header-logo {

        width: 20%;

        padding: 0;

    }

    .col-7.header-menu {

        width: 20%;

        order: 1;

    }

    .col-3.header-btn.text-end {

        width: 60%;

        padding: 0;

    }

    .col-3.header-btn.text-end>.btn-green-custom {

        padding: 10px 5px;

        font-size: 14px;

    }

    header ul.navbar-nav {

        padding: 20px 0;

    }

    header .navbar-nav .nav-item {

        text-align: left;

    }

    header .navbar-nav .nav-item .nav-bar {

        display: inline-block;

        padding: 10px 15px 10px 15px;

    }



    /* hero section */

    .hero-section {

        padding: 50px 0;

    }

    .hero-section .txt-sec {

        padding-top: 30px;

        max-width: 100%;

    }

    .hero-inner.row.align-items-center {

        display: flex;

        flex-direction: column-reverse;

    }

   .hero-section .hero-image {

        max-width: 100%;

    }

    .hero-section .highlight-dig::before {

        content: unset;

    }

    .hero-section .btn-dark-custom,

    .about-section .btn-dark-custom {

        margin: 0;

        width: fit-content;

    }

    .about-section .btn-dark-custom {

        margin: 15px 0 0;

    }



    /* service section */

    .services-section .card-custom {

        padding: 20px;

    }



    /* about section */

    .about-section {

        padding: 60px 0;

    }

    .about-section .about-inner {

        flex-direction: column-reverse;

    }

    .about-section .col-content {

        max-width: 100%;

        padding-top: 40px;

    }

    .about-section:after {

        opacity: 0.4;

    }

    .about-section .col-content-img {

        max-width: 100%;

    }

    .about-section .img-small {

        display: none;

    }



    /* form section */

    form{

        padding: 0;

    }

    .form form {

        padding: 10px;

    }

    .form form .btn-dark-custom {

        margin: 0;

    }



    /* Footer */

    footer .logo,

    footer .links,

    footer .info {

        width: 100%;

    }

    footer .links {

        margin: 40px 0;

    }

}