/* start global variables */
        
         :root {
            --main-color: #b5c796;
            --secondary-color: #538220;
            --section-padding: 60px;
            --section-color: #f4f0e5;
            --section-secondary-color: floralwhite;
            --text-secondary-color: #777;
            --foter-color: #32481a;
        }
        /* end  global variables */
        /* start global rules */
        
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            font-family: "Work Sans", "sans-serif";
        }
        
        .parent {
            background-color: rgb(254, 255, 254);
        }
        
        .container {
            padding-left: 15px;
            padding-right: 15px;
            margin-left: auto;
            margin-right: auto;
        }
        /*small */
        
        @media (min-width:768px) {
            .container {
                width: 750px;
            }
        }
        /* Medium */
        
        @media (min-width:992px) {
            .container {
                width: 970;
            }
        }
        /* Large */
        
        @media (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }
        /* End global rules */
        /* start component */
        
        .special-heading {
            color: var(--main-color);
            font-size: 100px;
            margin: 0;
            font-weight: 800;
            text-align: center;
            letter-spacing: -3px;
        }
        
        .special-heading+p {
            color: var(--secondary-color);
            text-align: center;
            margin: 5px 0 0;
            font-size: 20px;
        }
        
        @media (max-width: 767px) {
            .special-heading {
                font-size: 60px;
            }
            .special-heading+p {
                margin: 5px 0 0;
            }
        }
        /* end component */
        /* stert header */
        
        .header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 55px;
        }
        
        .header .logo {
            width: 135px;
        }
        
        .header .links {
            position: relative;
            cursor: pointer;
        }
        
        .header .links:hover .icon span:nth-child(2) {
            width: 100%;
        }
        
        .header .links .icon {
            width: 30px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        
        .header .links .icon span {
            background-color: black;
            height: 3px;
            margin-bottom: 5px;
        }
        
        .header .links .icon span:first-child {
            width: 100%;
        }
        
        .header .links .icon span:nth-child(2) {
            width: 60%;
            transition: 0.2s;
        }
        
        .header .links .icon span:last-child {
            width: 100%;
        }
        
        .header .links ul {
            background-color: var(--section-color);
            margin: 0px;
            padding: 0px;
            position: absolute;
            right: 0px;
            list-style: none;
            min-width: 200px;
            top: calc(100% + 15px);
            display: none;
            z-index: 1;
        }
        
        .header .links:hover ul {
            display: block;
        }
        
        .header .links ul::before {
            content: "";
            position: absolute;
            top: -20px;
            border-style: solid;
            border-width: 10px;
            border-color: transparent transparent azure transparent;
            right: 5px;
        }
        
        .header .links ul li a {
            text-decoration: none;
            color: var(--secondary-color);
            display: block;
            padding: 15px;
            transition: 0.2s;
        }
        
        .header .links ul li a:hover {
            padding-left: 25px;
        }
        
        .header .links ul li:not(:last-child) a {
            border-bottom: 1px solid #eee;
        }
        
        @media (max-width:900px) {
            .header .links {
                display: none;
            }
            .header .logo {
                margin-left: auto;
                margin-right: auto;
            }
        }
        /* end header */
        /*start landing*/
        
        .landing {
            background-image: url(../images/landing_backgr.jpg);
            background-size: cover;
            height: calc(100vh - 71px);
        }
        
        .landing .intro-text {
            padding-top: 30px;
            padding-bottom: 30px;
            background-color: #f4f0e5;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            max-width: 100%;
            width: 500px;
        }
        
        .landing .intro-text h1 {
            margin: 0;
            font-weight: 300;
            font-size: 50px;
            color: #b5c796;
        }
        
        .landing .intro-text p {
            margin: 0;
            color: #538220;
        }
        /*end landing*/
        /*start features*/
        
        .features {
            display: none;
            background-color: azure;
            padding-top: var(--section-padding);
            padding-bottom: var(--section-padding);
        }
        
        .features .container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            grid-gap: 20px;
            justify-content: space-between;
        }
        
        .features .feat {
            padding: 20px;
            text-align: center;
        }
        
        .features i {
            color: var(--main-color);
        }
        
        .features h3 {
            font-weight: 800;
            margin: 30px 0;
        }
        
        .features p {
            line-height: 1.8;
            color: rgb(66, 64, 64);
            font-size: 17px;
        }
        /*end features*/
        /* start services */
        
        .services {
            padding-top: var(--section-padding);
            padding-bottom: var(--section-padding);
            background-color: var(--section-secondary-color);
        }
        
        .services-content {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            grid-gap: 20px;
            margin-top: 100px;
        }
        
        .services-content .col .serv {
            display: flex;
            padding-bottom: 88px;
        }
        
        @media (max-width: 767px) {
            .services-content .col .serv {
                flex-direction: column;
                text-align: center;
            }
        }
        
        .services-content .col .serv i {
            color: var(--main-color);
            flex-basis: 60px;
        }
        
        .services-content .col .serv .text {
            flex: 1;
        }
        
        .services-content .col .serv .text h3 {
            color: var(--main-color);
            font-weight: 800;
            margin: 0 0 30px;
        }
        
        .services-content .col .serv .text p {
            line-height: 1.6;
            color: #444;
            font-weight: 300;
            font-size: 12px;
        }
        
        .services-content .col .image {
            text-align: center;
            position: relative;
            z-index: 0;
        }
        
        .services-content .col .image::before {
            content: "";
            position: absolute;
            background-color: var(--secondary-color);
            width: 100px;
            height: calc(100% + 100px);
            top: -50px;
            right: 0;
            z-index: -1;
        }
        
        .services-content .col .image img {
            width: 260px;
            height: 400px;
        }
        
        @media (max-width:1199px) {
            .services-content .col .image {
                display: none;
            }
        }
        /* end services */
        /* start portofolio */
        
        .portofolio {
            padding-top: var(--section-padding);
            padding-bottom: var(--section-padding);
            background-color: var(--section-color);
        }
        
        .portofolio .portofolio-content {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            grid-gap: 20px;
            margin-top: 100px;
        }
        
        .portofolio .portofolio-content .portofolio-card {
            background-color: white;
        }
        
        .portofolio .portofolio-content .portofolio-card img {
            width: 100%;
            max-width: 100%;
        }
        
        .portofolio .portofolio-content .portofolio-card .card-info {
            padding: 20px;
        }
        
        .portofolio .portofolio-content .portofolio-card .card-info h3 {
            color: var(--main-color);
            margin: 0;
        }
        
        .portofolio .portofolio-content .portofolio-card .card-info p {
            color: var(--text-secondary-color);
            line-height: 1.6;
            margin-bottom: 0;
        }
        /* end portofolio */
        /* start about */
        
        .about {
            padding-top: var(--section-padding);
            padding-bottom: calc(var(--section-padding) + 60px);
            background-color: var(--section-secondary-color);
        }
        
        .about .about-content {
            margin-top: 100px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        
        @media (max-width: 991px) {
            .about .about-content {
                flex-direction: column;
                text-align: center;
            }
        }
        
        .about .about-content .image {
            height: 225px;
            width: 225px;
            position: relative;
            z-index: 1;
        }
        
        @media (max-width: 991px) {
            .about .about-content .image {
                margin: 0 auto 60px;
            }
        }
        
        .about .about-content .image::before {
            content: "";
            position: absolute;
            background: #c5c6c6;
            height: calc(100% + 80px);
            width: 50px;
            top: -40px;
            left: -20px;
            z-index: -1;
        }
        
        .about .about-content .image::after {
            content: "";
            position: absolute;
            border-bottom: 51px solid var(--main-color);
            border-left: 60px solid var(--main-color);
            height: 123px;
            width: 89px;
            top: -32px;
            right: -116px;
            z-index: -1;
        }
        
        @media (max-width: 991px) {
            .about .about-content .image::before,
            .about .about-content .image::after {
                display: none;
            }
        }
        
        .about .about-content .image img {
            max-width: 100%;
        }
        
        .about .about-content .text {
            flex-basis: calc(100% - 400px);
        }
        
        .about .about-content .text p:first-of-type {
            color: var(--main-color);
            font-weight: bold;
            line-height: 2;
        }
        
        .about .about-content .text hr {
            width: 50%;
            display: inline-block;
            border-color: var(--secondary-color);
        }
        
        .about .about-content .text p:last-of-type {
            line-height: 2;
            margin-bottom: 50px;
            color: #777;
        }
        /* end about */
        /* start contact */
        
        .contact {
            padding-top: var(--section-padding);
            padding-bottom: var(--section-padding);
            background-color: var(--section-color);
        }
        
        .contact .contact-info {
            margin-top: 60px;
            text-align: center;
        }
        
        .contact .contact-info .lable {
            font-size: 35px;
            font-weight: 800;
            color: var(--foter-color);
            letter-spacing: -2px;
            margin-bottom: 15px;
        }
        
        .contact .contact-info .link {
            display: block;
            font-size: 35px;
            font-weight: 800;
            color: var(--main-color);
            text-decoration: none;
            margin-bottom: 15px;
        }
        
        .contact .contact-info .social {
            display: flex;
            justify-content: center;
            font-size: 16px;
        }
        
        .contact .contact-info .social i {
            color: var(--secondary-color);
            margin-left: 10px;
        }
        
        @media (max-width:767px) {
            .contact .contact-info .lable,
            .contact .contact-info .link {
                font-size: 25px;
            }
        }
        /* end contact */
        /* start footer */
        
        .footer {
            background-color: var(--foter-color);
            color: white;
            padding: 30px 10px;
            text-align: center;
            font-size: 18px;
        }
        
        .footer span {
            color: var(--main-color);
            font-weight: bold;
        }
        /* end footer */