/* Apply the font to specific elements */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "stolzl", sans-serif;
}

/* Section - 1 */

.section-1 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    min-height: 100vh;
}

.section-1-bg-video {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(50%);
    z-index: -1;
}

/* Header */

header {
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

header>.header-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

.company-logo img {
    width: 100px;
    cursor: pointer;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

nav a {
    text-decoration: none;
    color: white;
    position: relative;
    font-size: 15px;
    font-family: "stolzlRegular";
    text-wrap: nowrap;
}

nav>a.active::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 2px;
    background-color: white;
    position: absolute;
    left: 0;
    bottom: -6px;
}

nav>a::after,
.services-container>a::after,
.tooltip a::after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: white;
    position: absolute;
    left: 0;
    bottom: -3px;
    transition: width 0.3s ease-in-out;
}

nav>a:hover::after,
.services-container>a:hover::after,
.tooltip a:hover::after {
    width: 100%;
}

/* Tooltip content */

.services-container {
    position: relative;
}

.services-container>a {
    text-decoration: none;
    color: white;
}

.services-container .tooltip {
    width: max-content;
    display: none;
    position: absolute;
    margin-top: 4px;
    left: 0;
    background-color: #090601;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    border-radius: 10px;
    z-index: 1;
}

.services-container:hover .tooltip {
    display: block;
}

.tooltip a {
    display: block;
    color: #e0e2e0;
    margin: 20px 0;
    text-decoration: none;
    position: relative;
}

header .responsive-menu {
    text-decoration: none;
    color: white;
    display: none;
}

header div.btns {
    display: flex;
    justify-items: center;
    align-items: center;
    gap: 10px;
}

header div.btns span {
    font-size: 19px;
    font-family: "stolzlRegular";
    cursor: pointer;
    text-wrap: nowrap;

}

.header-btn {
    text-decoration: none;
    background-color: #61b15a;
    padding: 17px 30px;
    border-radius: 50px;
    outline: none;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 13px;
    font-family: "stolzlRegular";
    text-wrap: nowrap;

}

.header-btn:hover {
    background-color: #43893c;
}

/* Section -1- Content */

.section-1-content {
    padding: 37px 50px;
    margin: 30px 0;
}

.section-1-content>h1 {
    font-size: 53px;
    max-width: 800px;
    line-height: 120%;
    font-family: "stolzlRegular";
    margin: 20px 0;
}

/* hero section animtion span */

.hero-sec-trnas-effect {
    display: inline-block;
    letter-spacing: -8px;
    position: relative;
}

.hero-sec-trnas-effect span {
    display: inline-block;
    opacity: 0;
    transform: translateX(-1em);
    animation: appear 1.2s forwards;
}

.hero-sec-trnas-effect::after {
    content: "";
    display: block;
    background-color: white;
    height: 5px;
    width: 100%;
    position: absolute;
    bottom: 0;



}

@keyframes appear {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-sec-trnas-effect span:nth-child(1) {
    animation-delay: 0s;
}

.hero-sec-trnas-effect span:nth-child(2) {
    animation-delay: 0.1s;
}

.hero-sec-trnas-effect span:nth-child(3) {
    animation-delay: 0.2s;
}

.hero-sec-trnas-effect span:nth-child(4) {
    animation-delay: 0.3s;
}

.hero-sec-trnas-effect span:nth-child(5) {
    animation-delay: 0.4s;
}

.hero-sec-trnas-effect span:nth-child(6) {
    animation-delay: 0.5s;
}

.hero-sec-trnas-effect span:nth-child(7) {
    animation-delay: 0.6s;
}

.hero-sec-trnas-effect span:nth-child(8) {
    animation-delay: 0.7s;
}

.hero-sec-trnas-effect span:nth-child(9) {
    animation-delay: 0.8s;
}

.hero-sec-trnas-effect span:nth-child(10) {
    animation-delay: 0.9s;
}

.hero-sec-trnas-effect span:nth-child(11) {
    animation-delay: 1s;
}

.hero-sec-trnas-effect span:nth-child(12) {
    animation-delay: 1.1s;
}

.section-1-detail,
.section-2-detail {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.section-1-detail>.intro,
.section-2-detail>.intro {
    width: 50%;
}

.section-1-detail p,
.section-2-detail .intro>p {
    font-size: 19px;
    word-spacing: 3px;
    line-height: 160%;
    font-family: "stolzlRegular";
    margin: 0 0 40px 0;
}

.section-1-detail a {
    text-decoration: none;
    background-color: #e0a300;
    padding: 20px 50px;
    color: white;
    border-radius: 50px;
    font-size: 14px;
    outline: none;
    border: none;
    cursor: pointer;
    font-family: "stolzlMedium", sans-serif;
}

.section-1-detail a:hover {
    background-color: #b37e00;
}

.section-1-detail i {
    font-size: 40px;
    margin: 10px 0;
    display: block;
    text-align: center;
}

.section-1-detail span {
    display: inline-block;
    font-size: 19px;
    margin: 20px 0;
    font-family: "stolzlMedium";

}

.section-1-icons,
.section-2-explanation {
    display: flex;
    width: 50%;
}

.section-1-icons {
    display: flex;
    width: 50%;
}

.section-1-icons>div {
    border-right: 1.3px solid grey;
    padding: 0 30px;
    width: 33%;
}

.section-1-icons>div:last-child {
    border-right: none;
}

/* Section - 2 */
.section-2 {
    background-color: #f5f3ed;
    padding-top: 97px;
}

.section-2-data {
    padding: 37px 10px;
    max-width: 1300px;
    width: 88%;
    margin: 0 auto;
}

.section-2-data>span,
.section-5 .col-1 span,
.section-6 span,
.section-6-part-2 .part-2-data span,
.section-7 span,
.section-8-detail span {
    font-size: 13px;
    letter-spacing: 2px;
    font-family: "stolzlMedium";
}

.section-2-data>h2 {
    font-size: 45px;
    max-width: 50%;
    line-height: 130%;
    font-family: "stolzlRegular";
}

.section-2-detail .intro>p {
    color: #76787b;
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 17px;
}

.intro>.intro-detail {
    display: flex;
    gap: 15px;
    align-items: center;
}

.intro-detail div p {
    color: gray;
}

.intro-detail .img>img {
    border-radius: 50%;
}

.part-a-icon i {
    font-size: 30px;
}

.part-a-icon p,
.part-b p {
    display: inline;
    color: #76787b;
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 160%;
}

.section-2-explanation .part-a,
.section-2-explanation .part-b {
    /* display: inline-block; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

}

.section-2-explanation .part-a>p,
.section-2-explanation .part-b>p {
    display: inline-block;
    color: #76787b;
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 160%;
}

.section-2-explanation>div {
    width: 50%;
}

.section-2-explanation {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

/* section-3 */

.section-3 {
    padding: 50px 40px 0;
    background-color: #f5f3ed;
}

.section-3-data {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    gap: 30px;
}

.services-1,
.services-2,
.services-3,
.services-4 {
    background-size: cover;
    /* max-height: 400px; */
    height: 340px;
    max-width: 380px;
    width: 25%;
    border-radius: 20px;
    cursor: pointer;
    padding: 20px;
    text-decoration: none;
    color: #fff;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-1:hover,
.services-2:hover,
.services-3:hover,
.services-4:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.services-1 {
    background-image: url("../assets/images/home-page/panel-cleaning-service.webp");
}

.services-2 {
    background-image: url("../assets/images/green-metering.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.services-3 {
    background-image: url("../assets/images/cctv.png");
}

.services-4 {
    background-image: url("../assets/images/home-page/inverter-replacemnet-service.webp");
}

.services-1>.detail,
.services-2>.detail,
.services-3>.detail,
.services-4>.detail {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.services-1 .detail>span,
.services-2 .detail>span,
.services-3 .detail>span,
.services-4 .detail>span {
    font-size: 28px;
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
}

.section-3-data a p {
    font-size: 14px;
}

.services-1 .detail div>h2,
.services-2 .detail div>h2,
.services-3 .detail div>h2,
.services-4 .detail div>h2 {
    margin-top: 15px;
}

/* Section - 4 */

.section-4 {
    padding: 90px 50px;
    background-color: #f5f3ed;
}

.section-4-data {
    max-width: 1290px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.section-4-data>h2 {
    font-size: 35px;
    text-align: right;
    max-width: 300px;
    font-family: "stolzlRegular";
}

.partner-brands {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
}

.partner-brands>.partner {
    width: 25%;
}

.partner-brands>div>img {
    width: 100%;
    cursor: pointer;
    opacity: 30%;
}

.partner-brands>div>img:hover {
    opacity: 100%;
}

/* Section - 5 */

.section-5 {
    padding: 200px 40px;
    max-width: 1290px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.section-5 .col-1 {
    width: 40%;
}

.col-1 span {
    font-family: "stolzlRegular";
    font-size: 13px;
}

.col-1>h2 {
    font-size: 57px;
    margin: 20px 0;
}

.col-1>h3 {
    font-family: "stolzlRegular";
    font-size: 19px;
    margin: 20px 0;
}

.col-1>p {
    margin-bottom: 20px;
    color: gray;
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 17px;
    word-spacing: 1px;
}

.col-1 .detail {
    display: flex;
    align-items: center;
    gap: 10px;
}

.col-1 .detail>a {
    text-decoration: none;
    background-color: #e0a300;
    color: white;
    border-radius: 50px;
    outline: none;
    border: none;
    cursor: pointer;
    padding: 17px 40px;
    font-family: "stolzlMedium";
    font-size: 14px;
}

.col-1 .detail>a:hover {
    background-color: #bc8f12;
}

.col-1 .detail>i {
    background-color: #f5f3ed;
    padding: 15px;
    font-size: 20px;
    border-radius: 50px;
    cursor: pointer;
}

.section-5 .col-2 {
    width: 60%;
    display: flex;
    position: relative;
}


.col-2 .image-a {
    max-width: 400px;
    width: 90%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 10px;
    position: absolute;
    right: 30px;
    bottom: 40px;
    transform: scale(1.2);
}

.col-2 .image-b {
    max-width: 340px;
    max-height: 340px;
    width: 80%;
    object-fit: cover;
    border-radius: 10px;
    position: absolute;
    bottom: -80px;
    left: 100px;
    transform: scale(1.2);
}

/* Section - 6 */

.section-6 {
    background-color: #141414;
    margin-top: 100px;
    padding: 37px 70px;
}

.section-6-data {
    color: white;
    display: flex;
    justify-content: space-between;
}

.section-6-data>.img {
    width: 60%;
}

.section-6-data>.img>img {
    width: 100%;
    object-fit: cover;
    height: 90vh;
    max-height: 700px;
    position: relative;
    top: -150px;
    left: -70px;
    border-radius: 10px;
}

.section-6-detail {
    padding-left: 50px;
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: start;
}

.section-6-detail span {
    font-size: 13px;
}

.section-6-detail h2 {
    font-size: 53px;
}

.section-6-detail a {
    text-decoration: none;
    background-color: transparent;
    color: white;
    border-radius: 50px;
    outline: none;
    border: 2px solid rgb(206, 203, 203);
    cursor: pointer;
    padding: 16px 37px;
    font-family: "stolzlRegular";
    font-size: 14px;
}

.section-6-detail p {
    font-size: 17px;
    color: gray;
    line-height: 170%;
    word-spacing: 1px;
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
}

.section-6-detail a:hover {
    background-color: rgb(206, 203, 203);
    color: black;
}

.section-6-part-2 {
    max-width: 1290px;
    margin: 10px auto;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.section-6-part-2 h3 {
    font-size: 40px;
    margin: 15px 0;
}

.part-2-data {
    width: 50%;
}

.section-6-part-2-video {
    width: 55%;
    border-radius: 20px;
    cursor: pointer;
}

/* Section - 7 */

.section-7 {
    padding: 115px 40px;
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
}

.section-7 h2 {
    font-size: 52px;
    font-family: "stolzlRegular";
    margin: 20px 0;
}

.trending-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 30px 0;
}

.trending-items .item {
    display: block;
    width: 25%;
    max-width: 410px;
    max-height: 460px;
    padding-bottom: 15px;
    text-decoration: none;
    color: black;
    border-radius: 20px;
    transition: boxshadow 0.3s ease;
}

.trending-items .item:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.trending-items .item .items-hover-icons {
    display: none;
    position: absolute;
    bottom: 50%;
    left: 40%;
}

.trending-items .item .items-hover-icons i {
    background-color: white;
    padding: 6px;
    margin: 0 3px;
    font-size: 23px;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.trending-items .item .items-hover-icons i:hover {
    color: #e0a300;
    transform: translateY(-5px);
}

.trending-items .item .item-detail {
    padding: 10px;
}

.trending-items .item .item-detail>h3 {
    margin: 13px 0 8px 0;
}

.trending-items .item:hover .items-hover-icons {
    display: block;
}

.trending-items .item>.img {
    padding: 30px;
    background-color: #fcfbf9;
    cursor: pointer;
    position: relative;
    border-radius: 20px;
}

.trending-items .item .img>img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.3s ease;
}

.trending-items .item .img>img:hover {
    transform: scale(1.2);
}


/* Section:testimonial */


.testimonials {

    background-color: #F5F3ED;
    padding: 40px 20px;

}

.testimonials-data {
    max-width: 1300px;
    margin: 0 auto;
    text-align: center;
}

.testimonials-data .title {
    font-size: 52px;
    font-family: "stolzlRegular";
    margin: 20px 0;
    position: relative;

}

.testimonials-data .title::after {
    content: "";
    display: block;
    background-color: #4CAF50;
    width: 50px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    left: 49%;
    bottom: -20px;


}

.testimonials-container {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    margin-top: 70px;

}

.testimonial-card {
    background-color: #fff;
    max-width: 340px;
    width: 33%;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
}

.quote-icon {
    background-color: #4CAF50;
    color: #fff;
    width: 32px;
    height: 32px;
    font-size: 20px;
    padding: 5px 5px 10px;
    font-weight: bold;
}

.profile-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

.testimonial-text {
    font-size: 17px;
    color: #555;
    margin-bottom: 16px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 150%;

}

.author {
    font-weight: bold;
    font-size: 16px;
}

.designation {
    color: #888;
    font-size: 14px;
}




























/* Section - 8 */

.section-8 {
    background-color: #f5f3ed;
    padding: 150px 20px;
}

.section-8-data {
    max-width: 1290px;
    margin: 0 auto;
    text-align: center;
    color: black;
    display: flex;
    justify-content: space-around;
    gap: 40px;
    align-items: center;
}

.section-8-data>.image {
    width: 55%;
    max-width: 520px;
    max-height: 580px;
    text-align: left;
    position: relative;
}

.section-8-data .image>img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.section-8-data .image>p {
    font-family: "stolzlMedium";
    background-color: #f0b71f;
    font-size: 35px;
    max-width: 364px;
    width: 70%;
    padding: 52px;
    border-radius: 10px;
    position: absolute;
    bottom: -18px;
    right: -15%;
    z-index: 10;
}

.section-8-detail {
    width: 45%;
    padding: 10px 20px;
    text-align: left;
}

.section-8-detail h2 {
    font-family: "stolzlRegular";
    font-size: 50px;
    margin: 10px 0;
}

.section-8-detail .faq {
    cursor: pointer;
    border-bottom: 1px solid rgb(191, 190, 190);
    padding: 10px 10px 10px 10px;
}

.section-8-detail .faq span {
    font-family: "stolzlMedium";
    font-size: 17px;
    letter-spacing: 0;
    word-spacing: 0;
}

.section-8-detail .faq p {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 17px !important;
    line-height: 160%;
    color: gray;
    padding: 10px 0 0 30px;
}

.section-8-detail .faq:last-child {
    border-bottom: none;
}

.section-8-detail .faq>i {
    margin-right: 10px;
}

/* footer */

footer {
    background-color: #141414;
    padding: 120px 70px 10px 70px;
}

.footer-data {
    max-width: 1290px;
    margin: 0 auto;
    color: white;
}

.footer-cols {
    display: flex;
    gap: 15px;
}

.footer-cols .col {
    width: 25%;
    margin-bottom: 25px;
}

.footer-cols .col h4 {
    font-size: 19px;
}

.footer-col-1>p,
.footer-col-2>p {
    color: gray;
    margin: 20px 0;
    font-size: 17px;
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
}

.footer-col-2>a,
.footer-col-3>a {
    text-decoration: none;
    color: gray;
    display: block;
    width: max-content;
    margin: 17px 0;
    position: relative;
}

.footer-col-2>a:after,
.footer-col-3>a:after {
    position: absolute;
    bottom: -8px;
    content: "";
    display: block;
    background-color: white;
    height: 0.4px;
    width: 0%;
    transition: width 0.3s ease-in-out;
}

.footer-col-2>a:hover:after,
.footer-col-3>a:hover:after {
    width: 100%;
}

.footer-col-4 .links {
    margin-top: 10px;
}

.footer-col-4 .links a {
    font-family: "DM Sans", sans-serif;
    text-decoration: none;
    color: white;
    margin-right: 2px;
}

.footer-col-4 .links a>i {
    font-size: 17px;
    border: 1px solid rgb(189, 188, 188);
    padding: 5px;
    border-radius: 50%;
    margin: 20px 0;
    cursor: pointer;
    text-align: center;
}

.footer-col-4 .links a>i:hover {
    background-color: #43893c;
}

.seprator {
    height: 0.5px;
    background-color: rgb(198, 197, 197);
    width: 100%;
}

.copyright>p {
    color: gray;
    font-family: "DM Sans", sans-serif;
    margin: 25px 0;
}

/* Media Queries */

@media screen and (max-width: 1160px) {
    #about header .btns a:first-child {
        display: none;
    }
}

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

    header div.btns {
        display: none;
    }

    .header-navbar nav {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    

    .section-1-content>h1 {
        font-size: 47px;
    }

    .section-1-detail,
    .section-2-detail {
        flex-direction: column;
        gap: 35px;
    }

    .section-1-detail>.intro,
    .section-1-icons,
    .section-2-explanation,
    .section-2-detail>.intro {
        width: 100%;
    }

    .section-1-content>h1,
    .section-2-data>h2 {
        max-width: 100%;
    }

    .section-3 {
        padding: 50px 20px 0;
    }

    .section-3-data {
        flex-wrap: wrap;
    }

    .services-1,
    .services-2,
    .services-3,
    .services-4 {
        width: 31%;
        height: 320px;
    }

    .section-4-data {
        flex-direction: column-reverse;
        gap: 15px;
    }

    .section-4-data>h2 {
        max-width: 100%;
        font-size: 28px;
        text-align: center;
    }

    .section-5 {
        flex-direction: column;
        padding: 20px 40px;
    }


    .section-5 .col-1,
    .section-5 .col-2 {
        width: 100%;
        margin-top: 60px;
    }


    .section-5 .col-2 {
        width: 100%;
        margin: 20px auto 0;
        position: static;
        gap: 20px;
    }

    .col-2 .image-a,
    .col-2 .image-b {
        max-height: 300px;
        transform: none;
        position: static;
        max-width: 50%;

    }

    .section-6 {
        margin-top: 10px;
    }

    .section-6-data,
    .section-6-part-2 {
        flex-direction: column;
    }

    .section-6-data>.img>img {
        position: static;
        height: auto;
    }

    .section-6-detail {
        padding-left: 0;
        margin-top: 10px;
    }

    .section-6-detail p {
        line-height: 140%;
    }

    .section-6-data>.img,
    .section-6-detail,
    .part-2-data,
    .section-6-part-2-video {
        width: 100%;
    }

    .section-8 {
        padding: 50px 20px;
    }

    .section-8-data {
        flex-direction: column;
        gap: 100px;
    }

    .section-8-data>.image {
        width: 100%;
        max-height: 400px;
        max-width: 400px;
    }

    .section-8-detail {
        width: 100%;
    }

    .section-8-data .image>p {
        width: 80%;
        bottom: -95px;
    }

    .section-1-icons>div {
        text-align: center;
    }
}

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

    .section-1-content>h1,
    .section-2-data>h2,
    .section-6-detail h2,
    .section-6-part-2 h3,
    .section-7>h2,
    .section-8-detail>h2 {
        font-size: 35px;
    }

    header>.header-navbar {
        width: 100%;
    }

    header>.header-navbar {
        gap: 10px;
    }

    .section-2-explanation>div {
        width: 100%;
    }

    .section-1-icons>div {
        border-right: none;
    }

    .services-1,
    .services-2,
    .services-3,
    .services-4 {
        width: 45%;
        height: 300px;
    }

    .trending-items {
        margin: 10px 0;
        flex-wrap: wrap;
        gap: 10px;
    }

    .trending-items .item {
        width: 31%;
        margin: 18px 0;
    }

    .partner-brands>.partner {
        width: 50%;
    }

    .testimonials-container {
        flex-wrap: wrap;
    }

    .testimonial-card {
        width: 45%
    }

    .testimonials-data .title {
        font-size: 45px;
    }

    .section-8-data .image>p {
        font-size: 30px;
        padding: 45px;
    }

    .footer-cols {
        flex-direction: column;
    }

    .footer-cols .col {
        width: 100%;
    }

    .hero-sec-trnas-effect {
        letter-spacing: -4px;
    }
}

@media screen and (max-width: 650px) {
    .header-navbar nav {
        display: none;
    }

    .header-navbar .responsive-menu {
        display: block;
    }

    .section-1-icons {
        flex-wrap: wrap;
    }

    .section-1-icons>div {
        width: 50%;
    }

    .section-2-data {
        margin: 0;
    }

    .section-2-explanation {
        flex-direction: column;
    }


    header,
    .section-1-content,
    .section-2,
    .section-3,
    .section-4,
    .section-5,
    .section-6,
    .section-7,
    .section-8,
    footer {
        padding: 30px 20px;
    }

    .section-1-content>h1,
    .section-2-data>h2,
    .section-5 h2,
    .section-6-detail h2,
    .section-6-part-2 h3,
    .section-7>h2,
    .section-8-detail>h2 {
        font-size: 28px;
    }

    .section-1-detail p,
    .section-2-detail .intro>p,
    .part-a-icon p,
    .part-b p,
    .section-2-explanation .part-a>p,
    .section-2-explanation .part-b>p {
        word-spacing: 0;
        font-size: 15px;
        line-height: 130%;
        margin-bottom: 10px;
    }

    .section-1-detail a {
        padding: 10px 20px;
        font-size: 10px;
    }

    .partner-brands>.partner {
        width: 50%;
    }


    .trending-items .item {
        width: 49%;
    }


    .section-8-data .image>p {
        font-size: 20px;
        padding: 20px;
        width: 85%;
        right: 10%;
        bottom: -72px;
    }

    .testimonials-data .title {
        font-size: 40px;
    }

    .testimonials-container {
        flex-direction: column;
    }

    .testimonial-card {
        width: 100%
    }

    .section-1-detail p {
        margin-bottom: 25px;
    }

}

@media screen and (max-width: 450px) {
    header {
        padding: 20px 30px;
    }

    .section-1-icons {
        flex-direction: column;
        align-items: start;
    }

    .section-1-icons>div,
    .section-2-data {
        width: 100%;
    }

    .section-1-content>h1,
    .section-5 h2,
    .section-6-detail h2,
    .section-6-part-2 h3,
    .section-7>h2,
    .section-8-detail>h2 {
        font-size: 23px;
    }

    .services-1,
    .services-2,
    .services-3,
    .services-4 {
        width: 100%;
        height: 250px;
    }

    .section-1-detail p {
        font-size: 14px;
    }

    .section-1-content,
    .section-2,
    .section-3,
    .section-4,
    .section-5,
    .section-6,
    .section-7,
    .section-8,
    footer {
        padding: 20px;
    }

    .section-2-data>h2,
    .section-4-data>h2,
    .section-5 h2 {
        font-size: 21px;
        margin: 10px 0;
    }

    .section-2-data {
        padding: 0;
    }

    .section-1-detail span {
        margin: 10px 0;
    }

    .col-1 .detail>a {
        padding: 12px 20px;
        font-size: 14px;
    }

    .section-1-icons>div,
    .trending-items .item>.img {
        padding: 10px 0;
    }

    .trending-items .item {
        margin: 0;
    }

    .hero-sec-trnas-effect {
        letter-spacing: -3px;
    }

    .section-2-data>span,
    .col-1>h3 {
        font-size: 12px;
    }

    .services-1,
    .services-2,
    .services-3 {
        padding: 20px;
    }

    .col-1 .detail {
        flex-direction: column;
    }

    .testimonial-card {
        padding: 10px;
    }

    .testimonial-text {
        font-size: 16px;
        line-height: 120%;
    }

    .testimonials-data .title {
        font-size: 30px;
    }

    .trending-items {
        flex-direction: column;
    }

    .trending-items .item {
        width: 100%;
    }

    .section-8-data .image>p {
        font-size: 20px;
        padding: 20px;
        right: 0;
        width: 100%;
        max-width: 300px;
    }

    .section-8-detail {
        padding: 0;
    }

    .section-8-detail>h2 {
        font-size: 20px;
    }

    .section-8-detail .faq span {
        font-size: 16px;
    }

    .section-8-detail .faq p {
        font-size: 15px;
        padding: 0;
        line-height: 120%;
    }

    .section-8-data .image>p {
        width: 100%;
        bottom: -60px;
    }
}