﻿* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.actionTree {
    position: relative;
    background: url(../image/Rectangle\ 140.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 55.95260416666667vw;
}

.atHeading {
    font-family: "Somersbyheader2015";
    font-style: normal;
    font-weight: 400;
    font-size: 2.3958333333333335vw;
    line-height: 5vw;
    /* identical to box height, or 209% */

    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
}

.actionTreeSvg {
    /* width: 425.18px;
  height: 366.45px; */
    width: 22.144791666666666vw;
    height: 19.0859375vw;
    margin: auto;
}

    .actionTreeSvg > img {
        width: 100%;
        height: 100%;
    }

.actionTreeProgress {
    /* width: 206px;
  height: 93.34px; */
    width: 10.729166666666666vw;
    /* height: 4.861458333333333vw; */
    margin: auto;
    background: #ffffff;
    border-radius: 10.9436px;
    font-family: "Avenir";
    font-style: normal;
    font-weight: 800;
    text-align: center;
}

.atPercentage {
    /* font-family: "Avenir";
  font-style: normal;
  font-weight: 800; */
    /* font-size: 49.7767px;
  line-height: 62px; */
    font-size: 2.592536458333333vw;
    line-height: 3.229166666666667vw;
    /* identical to box height, or 125% */

    color: #116c33;
    margin-top: 10px;
}

.atProgressText {
    /* font-family: "Avenir";
  font-style: normal;
  font-weight: 800; */
    font-size: 11.3955px;
    line-height: 14px;
    /* identical to box height, or 125% */

    color: #116c33;
    margin-bottom: 12px;
}

.bullet {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fdd921;
    margin: auto;
}

.atDetailPoint {
    font-family: "Avenir";
    font-style: normal;
    font-weight: 800;
    font-size: 1.4583333333333333vw;
    line-height: 1.7187500000000002vw;
    /* or 118% */

    display: flex;
    align-items: center;
    text-align: right;
    color: #ffffff;
    width:100%;
}

.atMonthInfo {
    font-family: "Avenir";
    font-style: normal;
    font-weight: 800;
}

.atMonth {
    font-size: 35.6571px;
    line-height: 45px;
    /* identical to box height, or 125% */

    color: #fdd921;
}

.atMonthDescription {
    font-size: 15.0352px;
    line-height: 19px;
    /* or 125% */

    display: flex;
    align-items: center;
    color: #ebf4e1;
}

@media (max-width: 1000px) {
    .actionTree {
        /*background: url(../image/Rectangle\ 154.png);*/
        background-image: linear-gradient(#8ec043, #63a711);
        height: 1496px;
        /*background-repeat: no-repeat;*/
    }
    .atbgImg {
        position: absolute;
        z-index: 1;
        width: 50%;
        height: 12%;
    }
    .topLeft {
        top:0;
        left:0;
        background:url('../../assets/image/actiontreebgimages/top left.png');
        background-position-x:left;
        background-position-y:top;
        background-size:contain;
        background-repeat:no-repeat;
    }
    .topRight {
        top: 0;
        right: 0;
        background: url('../../assets/image/actiontreebgimages/top right.png');
        background-position-x: right;
        background-position-y: top;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .bottomLeft {
        bottom: 0;
        left: 0;
        background: url('../../assets/image/actiontreebgimages/left bottom.png');
        background-position-x: left;
        background-position-y: bottom;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .bottomRight {
        bottom: 0;
        right: 0;
        background: url('../../assets/image/actiontreebgimages/right bottom.png');
        background-position-x: right;
        background-position-y: bottom;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .atHeading {
        font-size: 28px;
        line-height: 56px;
        padding-top: 30px;
        padding-bottom: 36px;
    }

    .actionTreeSvg {
         width: 303px;
    height: 261.15px; 
        /*width: 38.54961832061068vw;
        height: 33.225190839694655vw;*/
    }

    .actionTreeProgress {
        /*        width: 26.208651399491096vw;
*/ /* height: 79px; */
        /* height: 10.05089058524173vw; */
        width: 206px;
        height: 87px;
        margin-top: 45px;
        margin-bottom: 25px;
    }

    .atPercentage {
         font-size: 50px;
    line-height: 66px; 
        /*font-size: 6.361323155216285vw;
        line-height: 8.396946564885496vw;*/
    }

    .atProgressText {
        font-size: 13px;
        line-height: 15px;
        /* font-size: 13px;
    line-height: 15px; */
    }

    .atDetailPointContainer {
        width: 308px;
        margin: auto;
    }

    .bullet {
        margin-top: 30px;
        margin-bottom: 18px;
    }

    .atDetailPoint {
        font-size: 26px;
        line-height: 30px;
        text-align: center;
        width: 82%;
        margin: auto;
    }

    .atMonthInfo {
        width: 313px;
        margin: auto;
        margin-top: 38px;
    }

    .atMonth {
        margin-bottom: 10px;
    }
}

/*@media (max-width: 768px) {
    .actionTree {
       
        height: 382.5641025641026vw;
    }
}*/

@media (min-width: 1024px) {
    .actionTreeSvg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .atDetailPoints {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        min-height: 200px;
        margin: auto;
    }

    .atDetailPointContainer {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        position: absolute;
    }

    #p1 {
        left: -15%;
        gap: 15px;
        top: 20px;
        width: 35%;
    }

        #p1 > .bullet {
            margin-top: 12px;
        }

    #p2 {
        left: -13%;
        top: -50%;
        gap: 15px;
        width: 40%;
    }

        #p2 > .bullet {
            margin-top: 13px;
        }

    #p3 {
        left: 72%;
        top: -50%;
        flex-direction: row;
        gap: 15px;
        width: 40%;
    }
    #p3 > .atDetailPoint {
        text-align: left;
    }

    #p4 {
        left: 78%;
        top: 16%;
        flex-direction: row;
        width: 15.625vw;
        height: 5.15625vw;
        text-align: left !important;
        gap:15px;
    }

        #p4 > .bullet {
            margin-top: 10px;
        }

        #p4 > .atDetailPoint {
            text-align:left;
        }

    #p5 {
        left: 73%;
        top: 114%;
        flex-direction: row;
        width: 18.34375vw;
        height: 3.4375vw;
        text-align: left !important;
        gap:15px;
    }

        #p5 > .bullet {
            margin-top: 12px;
        }

        #p5 > .atDetailPoint {
            text-align:left;
        }

    .atMonthInfo {
        width: 14.761979166666666vw;
        height: 4.895833333333333vw;
        position: absolute;
        bottom: 16.40625vw;
        left: 20.833333333333336vw;
    }

    .actionTreeProgress {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 5.989583333333334vw;
    }

    .atHeading {
        padding-top: 3.125vw;
    }
}
.content {
    border-radius: 25px 25px 124px 124px !important;

}
.icon {
    margin:auto !important;
}
/*.c02-product-carousel .product-carousel-outer {
    width:1247px !important;
}*/

/* /////////////////////////////////////////////////////////////// */

/*.c02-product-carousel {
      width: 64%;
      margin: auto;
      margin-top: 60px;
      margin-bottom: 6rem;
}*/
.c02-product-carousel {
    width: 64%;
    margin: auto;
    margin-top: 60px;
    margin-bottom: 6rem;

}
@media(max-width:1000px) {
    .c02-product-carousel {
        width: 100%;
       
    }
    .content-wrapper {
        width: 90% !important;
        margin: auto !important;
    }
}
    .c23-text .text-col {
        width: 41.822916666666664VW ;
    }
    .component-top-space {
        margin-top:10px !important;
    }
    .c23-text{
        margin-top:50px !important;
    }


        .c23-text .text-col .title {
            font-family: 'Somersbyheader2015';
            font-style: normal;
            font-weight: 400;
            font-size: 2.3958333333333335VW;
            line-height: 2.5VW;
            /* identical to box height, or 103% */

            text-align: center;
            text-transform: uppercase;
            color: #006E41;
        }
.content-wrapper .heading .title {
    font-family: 'Somersbyheader2015';
    font-style: normal;
    font-weight: 400;
    font-size: 46px !important;
    line-height: 96px !important;
    /* identical to box height, or 209% */

    text-align: center;
    text-transform: uppercase;
    color: #006E41;
    margin-top:90px;
}
@media (max-width: 1000px) {
    .c23-text .text-col {
        width: 100% !important;
    }
        .c23-text .text-col .title {
            font-size: 28px;
            line-height: 32px;
        }
    .c23-text {
        margin-top: 37px !important;
    }
    .c05-social-feed .social-feeds-wrapper {
      margin-top:30px !important;
    }
    .content-wrapper .heading .title {
        font-size: 28px !important;
        line-height: 35px !important;
        margin-top: 60px;
    }
}
@media (min-width: 1000px) {
    .nav_container {
      display:none !important;
    }
}

/*////////////////////bees relates css////////*//**/
.component-top-space {
    position: relative !important;
}
.plBee {
    position: absolute;
}
.plBee>svg{
    width:100%;
}
.plBee1 {
    top: -30%;
    left: 5%;
    width: 139.02px;
    height: 119.61px;
}
.plBee2 {
    right: -14%;
    top: 5%;
    width: 91.25px;
    height: 78.51px;
}
.plBee3 {
    width: 77px;
    height: 103.51px;
    top: -5%;
    left: -15%;
}
.plBee4 {
    width: 102.12px;
    height: 87.87px;
    right: -15%;
    top: 75%;
}
@media(max-width:1000px){
    .plBee{
        display:none;
    }
}