:root {
    --white: #FFFFFF;
    --blue: #212529;
    --green: #74C69D;
    --greenMenu: #45b57d;

    --black: #000000;
}

@media (min-width: 375px) and (max-width: 1440px) {

    .container {
        padding: 0 clamp(20px, calc(-18.7324px + 10.3286vw), 130px);
    }

    /* HEADER START */

    .he-wr {
        padding: clamp(17px, calc(10.6620px + 1.6901vw), 35px) 0 clamp(41px, calc(26.2113px + 3.9437vw), 83px);
    }

    .he-wr > .r-one > .he-logo > svg {
        width: clamp(45px, calc(36.1972px + 2.3474vw), 70px);
        height: clamp(31px, calc(24.6620px + 1.6901vw), 49px);
    }

    .he-wr > .r-one > .he-logo > span {
        font-size: clamp(30px, calc(26.4789px + 0.9390vw), 40px);
    }

    .he-wr > .r-two > .bl-one > .text-content > h3 {
        font-size: clamp(28px, calc(23.7746px + 1.1268vw), 40px);
    }

    .he-wr > .r-two > .bl-two > img {
        width: clamp(335px, calc(28.1352112676vw + 229.4929577465px), 634.64px);
        height: clamp(196.61px, calc(17.0309859155vw + 132.7438028168px), 377.99px);
    }

    /* HEADER END */















    /* MAIN START */

    /* PAGE HOME START */
    /* SECTION ONE START */

    .page-home {
        padding: clamp(22px, 8.62px + 3.57vw, 60px) 0 clamp(39px, 33.72px + 1.41vw, 54px);
    }

    .page-home > .hp-s-one > .text-cont > h3 {
        font-size: clamp(24px, calc(18.3662px + 1.5023vw), 40px);
    }

    /* SECTION ONE END */










    /* SECTION TWO START */

    .page-home > .hp-s-two {
        gap: clamp(30px, 1.83px + 7.51vw, 110px);
    }

    .page-home > .hp-s-two > .bl-one > img {
        width: clamp(335px, 241.69px + 24.88vw, 600px);
        height: clamp(240.88px, 173.79px + 17.89vw, 431.43px);
    }

    .page-home > .hp-s-two > .bl-two > .text-content > h3 {
        font-size: clamp(24px, calc(18.3662px + 1.5023vw), 40px);
    }

    /* SECTION TWO END */











    /* SECTION THREE START */

    .page-home > .hp-s-three {
        gap: clamp(30px, 1.83px + 7.51vw, 110px);
    }

    .page-home > .hp-s-three > .bl-one > .text-content > h3 {
        font-size: clamp(24px, calc(18.3662px + 1.5023vw), 40px);
    }

    .page-home > .hp-s-three > .bl-two > img {
        width: clamp(335px, 241.69px + 24.88vw, 600px);
        height: clamp(315.87px, 227.89px + 23.46vw, 565.73px);
    }

    /* SECTION THREE END */














    /* SECTION FOUR START */

    .hp-s-four {
        margin-top: clamp(0px, -8.8px + 2.35vw, 25px);
    }

    .hp-s-four > .r-one > h3 {
        font-size: clamp(24px, calc(18.3662px + 1.5023vw), 40px);
    }

    .hp-s-four > .r-two {
        gap: clamp(35px, 30.77px + 1.13vw, 47px);
    }

    /* SECTION FOUR END */

    /* PAGE HOME END */






















    /* PAGE PORTFOLIO START */

    .page-portfolio > .r-two > .el-wrap > img {
        width: clamp(335px, 257.75px + 20.66vw, 555px);
        height: clamp(200px, 152.63px + 12.63vw, 334.54px);
    }

    /* PAGE PORTFOLIO END */

    /* MAIN END */






















    /* PAGE SERVICES START */

    .page-services {
        gap: clamp(46px, 34.73px + 3vw, 78px);
        padding-top: clamp(21px, 16.07px + 1.31vw, 35px);
        padding-bottom: clamp(68px, 44.41px + 6.29vw, 135px);
    }

    /* PAGE SERVICES END */












    /* FOOTER START */

    footer {
        padding: clamp(31px, 24.31px + 1.78vw, 50px) 0;
    }

    /* FOOTER END */
}



















@media (min-width: 375px) and (max-width: 1321px) {

    /* MAIN START */

    /* PAGE PORTFOLIO START */

    .page-portfolio > .r-two {
        justify-content: center;
    }

    /* PAGE PORTFOLIO END */

    /* MAIN END */
}


























@media (min-width: 375px) and (max-width: 1220px) {

    /* HEADER START */

    .he-wr {
        gap: 32px;
    }

    .he-wr > .r-one > nav {
        display: flex;
        align-items: center;
        position: absolute;
        width: 80%;
        height: 100%;
        min-height: 100svh;
        top: 0;
        left: 0;
        transform: translateX(-105%);
        z-index: 5;
        background-color: var(--greenMenu);
        box-shadow: 24px 0 50px rgba(33, 37, 41, 0.18);
        transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .he-wr > .r-one > nav.active {
        transform: translateX(0);
    }

    .he-wr > .r-one > nav > ul {
        position: relative;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        height: 100%;
        padding: 45px;
    }

    .he-wr > .r-one > nav > ul::before {
        position: absolute;
        content: '';
        width: 50px;
        height: 50px;
        bottom: 0;
        right: 0;
        z-index: 1;
        background-color: #95ffca;
        border-bottom-right-radius: 50px;
        border-top-left-radius: 10px;
    }

    .he-wr > .r-one > nav > ul::after {
        position: absolute;
        content: '';
        width: 50px;
        height: 50px;
        bottom: 0;
        right: 0;
        background-color: var(--green);
        border-top-left-radius: 15px;
    }

    .he-wr > .r-one > nav > ul > li {
        padding: 0;
        transition: transform 0.3s ease;
    }

    .he-wr > .r-one > nav > ul > li:hover {
        transform: translateX(8px);
    }

    .he-wr > .r-one > nav > ul > li > a {
        display: block;
        padding: 15px;
        border-radius: 5px;
    }

    .he-wr > .r-one > nav > ul > li > a:hover,
    .he-wr > .r-one > nav > ul > li > a.active {
        background-color: var(--green);
    }

    .he-wr > .r-one > .he-hum {
        display: flex;
    }

    .he-wr > .r-two {
        flex-direction: column-reverse;
        gap: 30px;
    }

    .he-wr > .r-two > .bl-one > .text-content > h3 > br {
        display: none;
    }

    /* HEADER END */






    /* MAIN START */

    /* PAGE HOME START */









    /* SECTION TWO START */

    .page-home {
        gap: 60px;
    }

    .page-home > .hp-s-two {
        flex-direction: column;
    }

    .page-home > .hp-s-two > .bl-two {
        gap: 20px;
    }

    .page-home > .hp-s-two > .bl-two > .text-content {
        gap: 20px;
    }
    
    /* SECTION TWO END */







    











    /* SECTION THREE START */

    .page-home > .hp-s-three {
        flex-direction: column-reverse;
    }

    /* SECTION THREE END */


    /* PAGE CONTACT US START */

    .page-contactus > .r-two {
        flex-direction: column-reverse;
    }

    .page-contactus > .r-two > div {
        max-width: 100%;
    }

    /* PAGE CONTACT US END */


    /* SECTION TWO START */

    /* MAIN END */

    /* PAGE HOME END */
}













@media (min-width: 375px) and (max-width: 768px) {
    footer .f-content {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}