:root{--design:#FEE1BB;
--background2:#F9C9CD;
--background1:#69AAAF;
--black-text:#1B2728;
--white:#FFFFFF;
--cta:#25585C;
--ctahover:#FFFFFF;
--text-deco:rgba(254, 225, 187, 0.13);
--fadedtext:#514E4E;
--design2: #F3C09F;
--text2:#233233;
--bluee:#527B7E;
--header-shadow:  rgba(0, 0, 0, 0.14);
--white-bar:#FEECD6;
--line-sec2-a:rgba(188, 177, 177, 0.64)}

        main {
        width: 100%;overflow: hidden;
    }

.body{
    background-color: var(--background1);
    width: 100%;
    margin: 0;overflow-x: hidden;
    padding: 0;}

.header{width: 100%;z-index: 11111111111111;
height: 121.518px; background-size: cover;position: fixed;
background-image: url(pic/pic1.svg);
filter: drop-shadow(0 4px 10.8px var(--header-shadow));}

.nav-header{width: 100%;margin: 0;padding: 0;
height: 121.518px; background-size: cover;position: fixed;
background-image: url(pic/pic1.svg);
        padding: 30px 7.9% 0 7.9%;
    box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-between;}

.nav-header2{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 28px;
    align-items: center;position: relative;
    justify-content: space-between;}

.link-header{text-decoration: none;}


.logo{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 20px;
font-weight: 800;}

.nav-list{list-style-type: none;margin: 0;padding: 0;
display: flex;flex-direction: row;gap: 30px;}

.nav-active{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 700;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: 10.5%;
text-underline-offset: 28%;
text-underline-position: from-font;}


.nav-normal {
  color: var(--black-text);
  margin: 0;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  text-decoration: none; 
}


.nav-normal::after {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 0; 
  width: 0;
  height: 2px;
  background-color: var(--black-text);
  transition: width 0.3s ease-in-out;
}


.nav-normal:hover::after {
  width: 100%;
}

.burger-menu{width: 29.074px;
height: 23.259px;cursor: pointer;
background-image: url(pic/pic2.svg);
display: none;}


.sec1{width: 100%;height: 944px;}

.sec1-cont{width: 100%;height: 100%;
position: relative;}

.text-decoration-cont {
    display: flex;
    flex-direction: row;
    gap: 40px;height: 100%;
    white-space: nowrap; 
    position: relative;
}

.row-test-deco {
    display: flex;
    flex-direction: row;
    gap: 22px;
    align-items: center;
    white-space: nowrap;
    height: 90px;
    position: relative;
    transform: translateX(600px); 
    opacity: 0;
    transition: all 1s ease-out;
}

.row-test-deco.animate {
    transform: translateX(0); 
    opacity: 1;
}


















.text-decoration{color: var(--text-deco);
margin: 0;
font-family: Poppins;
font-size: 128px;
font-style: normal;
font-weight: 900;
line-height: normal;}


.row2-test-deco {
    display: flex;
    flex-direction: row;
    gap: 22px;    align-items: center;
    white-space: nowrap;
        position: relative;    height: 90px;
  left: -14%;

    transform: translateX(-600px); 
    opacity: 0;
    transition: all 1s ease-out;

}



.row2-test-deco.animate {
    transform: translateX(0); 
    opacity: 1;
}












.container-all-text-deco-sec1{
    /* display: flex;
flex-direction: column;gap: 40px;position: relative;
   align-self: center;margin-top: 20px; */
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: relative;
    align-self: center;
    margin-top: 100px;

}

.text2-decoration{color: var(--design);
margin: 0;
font-family: Poppins;
font-size: 128px;
font-style: normal;
font-weight: 900;
line-height: normal;}

.img-sec1{width: 162.834px;
height: 162.834px;}



.header-sec1-cont{    width: 100vw; height: 90px;align-items: center;
display: flex;justify-content: center;    position: relative;
    z-index: 111111;
    transform: translateX(-600px); 
    opacity: 0;
    transition: all 1s ease-out;}




.header-sec1-cont.animate {
    transform: translateX(0); 
    opacity: 1;
}



.container-buttom-sec1{width: 100vw;
position: absolute;bottom: 5%;
display: flex;z-index: 11;
    justify-content: center;}


.button-sec1{
border-color: transparent;
display: flex;
width: 195px;
height: 56px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 15px;
background: var(--cta);
transition: all 300ms linear;}

.button-sec1:hover{background-color: var(--ctahover);}

.button-sec1:hover .text-button-sec1{color: var(--black-text);}

.link-cta-sec1{width: 100%;height: 100%;display: flex;
        justify-content: center;
align-items: center;text-decoration: none;
}

.text-button-sec1{color: var(--white);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 700;}


.row4-test-deco {
    display: none;
    flex-direction: row;
    gap: 22px;    align-items: center;
    white-space: nowrap;
        position: relative;    height: 90px;
    left: -500px;
}


.row5-test-deco {
    display: none;
    flex-direction: row;
    gap: 22px;    align-items: center;
    white-space: nowrap;    height: 90px;
        position: relative;
    left: -316px;

}



.sec2{width: 100%;height: 983.22px;
background-image: url(pic/pic4.svg);
    background-size: cover;
    background-position: center;}

.cont-sec2{width: 100%;height: 100%;
display: flex; justify-content: center;
    padding: 0 7.9%;
    box-sizing: border-box;}


.main-info-sec2{
padding: 233.62px 0 0 0;box-sizing: border-box;
display: flex;flex-direction: column;gap: 105px;
position: relative;}



.main2-sec2{width: 1280px;;display: flex;
flex-direction: row;    justify-content: space-between;}

.hedaer-sec2{color: var(--black-text);
font-family: Poppins;
font-size: 40px;margin: 0;z-index: 1;
font-weight: 800;position: relative;
line-height: 121%; /* 48.4px */}


.sub-box-sec2{display: flex;flex-direction: column;
gap: 65px;}


.text-box1-sec2{display: flex;flex-direction: column;
gap: 10px;width: 295.574px;}

.rect-sec2{width: 131.014px;
height: 5.162px;background-color: var(--background1);}

.para-sec2{
color: var(--fadedtext);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */    
        
        
        display: -webkit-box;
    display: box;
    display: flexbox;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}


.text-box2-sec2{display: flex;flex-direction: column;
gap: 10px;width: 295.574px;padding-left: 139px;}


.img-decorations-sec2{
            position: absolute;
    top: 194px;
           left: -6%;
}


.img2-decorations-sec2{
            position: absolute;
    bottom: 177px;
    left: 65px;
}

.img3-decorations-sec2{
            position: absolute;
    top: 312px;
    left: 337px;
 
}

.model-one {
    position: absolute;
    z-index: 11;
    width: 659px;    border: none;
    outline: none;
    height: 1000px;transition: top 0.6s ease-out, left 0.6s ease-out, width 0.6s ease-out, height 0.6s ease-out;

    touch-action: pan-y !important;
    animation: slideUp 1.5s ease-out forwards;
}
.model-one::part( default-progress-bar ){
    display: none;

}


@keyframes slideUp {
    from {
        transform: translateY(190px); 
    }
    to {
        transform: translateY(0);    
    }
}

    .www{
    position: absolute;
    width: 100%;
      top: -244px;
    height: 102%;
    display: flex;
    justify-content: center; border: none;
    outline: none;margin-top: 150px;
    
    }

.circle-sec2{border-radius: 599.156px;
width: 599.156px;margin-top: 190px;position: relative;
height: 599.156px;background-color: var(--design);}

.container-imgs-sec2 {
    position: relative;
    transform: translateX(600px);
    opacity: 0;
    transition: all 1s ease-out; 
}

.container-imgs-sec2.animate {
    transform: translateX(0); 
    opacity: 1;
}



.lolipop{position: absolute;right: -100px;bottom: 0;z-index: 1;}

.lolipop2{position: absolute;
    right: 51px;
    top: -182px;}

.lolipop3{    position: absolute;
    left: -108px;
    top: -78px;}


.sec3{width: 100%;height: fit-content;background-image: url(pic/pic13.svg);}

.container-all-info-sec3{width: 100%;height: 100%;display: flex;
justify-content: center;padding-bottom: 454px;}

.sub-cont-sec{    display: flex;
    flex-direction: column;
    gap: 341px;
    padding-top: 200px;
    box-sizing: border-box;
    width: 1280px;
    align-items: center;
}

.header-sec3{color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 121%; /* 48.4px */}



.container-cards-sec3{
    /* display: flex;
flex-direction: row;gap: 20px; */
display: flex;gap: 20px;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;


}


.card1-sec3{
    /* width: 346px; */
        width: 402px;
height: 513.357px;
flex-shrink: 0;
border-radius:150px 150px 15px 15px ;
background: var(--design2);
margin-top: 329.47px;
display: flex;position: relative;
flex-direction: column;
align-items: center;
padding: 107px 36px 0 36px;box-sizing: border-box;
   opacity: 0;         
    transform: translateY(300px); 
    transition: all 0.7s ease-out; }



.card1-sec3.animate,
.card2-sec3.animate,
.card3-sec3.animate {
    opacity: 1;
    transform: translateY(0);
}








.box-text1-sec3{display: flex;flex-direction: column;
gap: 52px;align-items: center;}

.box2-text-sec3{display: flex;flex-direction: column;
gap: 40px;align-items: center;}

.header2-sec3{color: var(--text2);
text-align: center;
margin: 0;    width: 260px;
font-family: Poppins;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 121%; /* 38.72px */}



.para-sec3{
color: var(--fadedtext);
text-align: center;margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */
display: -webkit-box;
    display: box;
    display: flexbox;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}


.link-container-sec3{display: flex;flex-direction: row;
gap: 7px;margin: 0;padding: 0;}



.link-sec3{color: var(--black-text);
margin: 0;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: 25%; /* 4.5px */
text-underline-position: from-font;}


.link-sec3-2{text-decoration: none;}


.model-view2{position: absolute;
    bottom: -856px;
    width: 610px;z-index: 1;
    height: 1400px;}

.model-view2::part( default-progress-bar ){
    display: none;

}



.card2-sec3{
    /* width: 346px; */
    width: 402px;
height: 513.357px;
flex-shrink: 0;
border-radius:15px 15px 150px 150px ;
background: var(--design2);
    margin-top: 212px;
display: flex;position: relative;
flex-direction: column;
align-items: center;justify-content: flex-end;
padding: 0 36px 86px 36px;box-sizing: border-box;
   opacity: 0;         
    transform: translateY(300px); 
    transition: all 0.7s ease-out; }




.model-view3{position: absolute;
    bottom: -856px;
    width: 610px;z-index: 1;
    height: 1400px;}

.model-view3::part( default-progress-bar ){
    display: none;

}


.card3-sec3{
    /* width: 346px; */
        width: 402px;
height: 513.357px;
flex-shrink: 0;
border-radius:150px 150px 15px 15px ;
background: var(--design2);
margin-top: 329.47px;
display: flex;position: relative;
flex-direction: column;
align-items: center;
padding: 107px 36px 0 36px;box-sizing: border-box;
   opacity: 0;         
    transform: translateY(300px); 
    transition: all 0.7s ease-out; }





.sec4{width: 100%;
    height: fit-content;}

.container-sec4 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-image: url(pic/pic16.png);
    background-position: bottom;
    background-repeat: no-repeat;    align-items: center;
    background-size: cover;     margin-top: 184px;
}


.container-taps-sec4{width: 100vw;
    height: 269px;position: relative;}


.tap1-sec4{display: flex;

    left: -2%;position: absolute;
height: 102.915px;
transform: rotate(5.762deg);
padding: 18px 39px;box-sizing: border-box;
flex-direction: row;
justify-content: center;    top: -22px;
align-items: center;
gap: 42px;    white-space: nowrap;
flex-shrink: 0;
border: 4px solid var(--design);;z-index: 1;
background: var(--design);    opacity: 0;
    transform: translateX(-200px) rotate(5.762deg);
    transition: 0.8s ease-out;
}

.tap1-sec4.animate {
    opacity: 1;
    transform: translateX(0) rotate(5.762deg);
}



.text-in-tap-sec4{color: var(--bluee);
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: 121%; /* 48.4px */}


.tap2-sec4{display: flex;

    left: -2%;position: absolute;
height: 102.915px;    top: -35px;
transform: rotate(-5.762deg);
padding: 18px 39px;box-sizing: border-box;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 42px;    white-space: nowrap;
flex-shrink: 0;
border: 4px solid var(--design);;
background: var(--design);
    opacity: 0;
    transform: translateX(400px) rotate(-5.762deg);
    transition: 0.8s ease-out;
}

.tap2-sec4.animate {
    opacity: 1;
transform: translateX(0) rotate(-5.762deg);
}


.tap1-sec4,
.tap2-sec4 {
    width: 105%;      right: 0;    
}


.main-info-sec4{width: 100%;height: 668.87px;
display: flex;flex-direction: column;    justify-content: space-between;
gap: 98px;padding: 0 7.9% 0 7.9%;
    box-sizing: border-box;    margin-bottom: 365px;
display: flex;align-items: center;}



.main2-sec4{
    max-width: 1280px;
    width: 100%;
;display: flex;flex-direction: column;  
    height: 668.87px;  justify-content: space-between;}





.row1-sec4{display: flex;
    flex-direction: row;gap: 109px;
    justify-content: space-between;
}

.header-sec4{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;width: 359.798px;
font-weight: 800;
line-height: 121%; /* 48.4px */}


.para-sec4{
color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */
 display: -webkit-box;
    display: box;
    display: flexbox;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;width: 611.09px;
    text-overflow: ellipsis;}


.row2-sec4{display: flex;position: relative;
flex-direction: row;gap: 20px;}


.card1-sec4{
    width: 100%;
height: 352.998px;
border-radius: 63px;
background: var(--design);position: relative;
display: flex;flex-direction: column;
    align-items: center;
    gap: 20px;padding: 0 89px 37px;
box-sizing: border-box;justify-content: flex-end;
}


.sub-hedaer-sec4{
    width: 306.297px;
    color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 140%; /* 44.8px */
}

.para2-sec4{
color: var(--fadedtext);
text-align: center;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;margin: 0;
line-height: 140%; /* 25.2px */
 display: -webkit-box;
    display: box;
    display: flexbox;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}



.model-sec4-1{    position: absolute;
    width: 572.19px;
    height: 517.921px;z-index: 111;transform: scale(0);
    top: -292px;}

.model-sec4-1::part( default-progress-bar ){
    display: none;

}

.card2-sec4{
  width: 100%;
height: 352.998px;
border-radius: 63px;
background: var(--design);position: relative;
display: flex;flex-direction: column;  transition: 0.8s ease-out;
    align-items: center;
    gap: 20px;padding: 0 63px 37px;
box-sizing: border-box;justify-content: flex-end;
}


.model-sec4-2{    position: absolute;  transition: 0.8s ease-out;
    width: 572.19px;    transform: scale(0);
    height: 517.921px;z-index: 111;
    top: -292px;}
.model-sec4-2::part( default-progress-bar ){
    display: none;

}

.dec1-sec4{position: absolute;
left: -150px;
    bottom: -114px;}

.dec2-sec4{    position: absolute;
    top: -153px;
    left: 0;}

.dec3-sec4{      position: absolute;
    bottom: -122px;
    left: -52px;}


.model-sec4-3{    position: absolute;  transition: 0.8s ease-out;
    width: 492.19px;display: none;transform: scale(0);
    height: 426.921px;z-index: 111;
    top: -206px;}

.model-sec4-3::part( default-progress-bar ){
    display: none;

}


.model-sec4-4{    position: absolute;
    width: 492.19px;display: none;  transition: 0.8s ease-out;
    height: 426.921px;z-index: 111;transform: scale(0);
    top: -206px;}

.model-sec4-4::part( default-progress-bar ){
    display: none;

}


.model-sec4-1.animate,
.model-sec4-2.animate,
.model-sec4-3.animate,
.model-sec4-4.animate {
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.button-sec4{
border-color: transparent;
display: flex;
width: 80%;
height: 56px;
justify-content: center;
align-items: center;
flex-shrink: 0;cursor: pointer;
border-radius: 15px;
background: var(--cta);display: none;
transition: all 300ms linear;}




.link-cta-sec4{width: 100%;height: 100%;display: flex;
        justify-content: center;
align-items: center;text-decoration: none;
}

.text-button-sec4{color: var(--white);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 700;}



.button2-sec4{
border-color: transparent;
display: flex;
width: 80%;
height: 56px;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 15px;
background: var(--cta);display: none;
transition: all 300ms linear;}



.sec5{width: 100%;height: fit-content;}

.cont-sec5{width: 100%;height: 100%;}

.cont2-sec5{width: 100%;
    height: fit-content;position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 98px;
        padding: 107px 7.9% 0 7.9%;
    box-sizing: border-box;
    margin-bottom: 141px;
    display: flex;
    align-items: center;
}


.part2-sec5{display: flex;
    flex-direction: column;    align-items: center;
    gap: 30px;height: fit-content;width: 611.09px;
}


.hedaer-sec5{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 121%; /* 48.4px */}


.para-sec5{
color: var(--black-text);
text-align: center;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%;margin: 0;
display: -webkit-box;
    display: box;
    display: flexbox;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; }





.card-conttt-sec5{display: flex;flex-direction: column;
    max-width: 1280px;    gap: 126px;position: relative;
    width: 100%;align-items: center;}



.card-cont-sec5{display: flex;flex-direction: row;
gap: 20px;align-items: flex-end;justify-content: center;}

.card1-sec5{display: flex;
    width: 32%;
height: 280.264px;
padding: 22px 30px;box-sizing: border-box;
flex-direction: column;
align-items: flex-start;
gap: 30px;
flex-shrink: 0;
border-radius: 35px;min-width: 330px;
background: var(--design);}


.circles-sec5{display: flex;
width: 91.864px;
height: 91.864px;
align-items: center;justify-content: center;
flex-shrink: 0;
border-radius: 45.932px;
background: var(--design2);}


.text-boxx-sec5{display: flex;flex-direction: column;
gap: 20px;}

.sub-headers-sec5{color: var(--black-text);
margin: 0;
font-family: Poppins;

font-size: 30px;
font-style: normal;
font-weight: 600;height: 22px;
line-height: 140%; /* 42px */}


.para2-sec5{
color: var(--fadedtext);
text-align: center;
font-family: Poppins;
font-size: 18px;
font-style: normal;text-align: left;
font-weight: 500;
line-height: 140%;margin: 0;
display: -webkit-box;
    display: box;
    display: flexbox;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; }




.card2-sec5{display: flex;
        width: 32%;
height: 350.745px;
padding: 43px 30px;box-sizing: border-box;
flex-direction: column;
align-items: flex-start;
gap: 30px;
flex-shrink: 0;
border-radius: 35px;min-width: 330px;
background: var(--design);}



.para3-sec5{
color: var(--fadedtext);
text-align: center;
font-family: Poppins;
font-size: 18px;
font-style: normal;text-align: left;
font-weight: 500;
line-height: 140%;margin: 0;
display: -webkit-box;
    display: box;
    display: flexbox;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; }



.conatinrt-card-sabsoult-sec5{position: absolute;
width: 100%;height: 100%;}


.imgbig-sec5 {
    position: absolute;
    right: -13%;
    top: -26%;
}

.imgbig2-sec5 {
    position: absolute;
    left: -227px;
    bottom: 221px;
    z-index: 1;
}


.card1-sec5,
.card2-sec5 {
    opacity: 0;
    transform: translateY(180px);
    transition: transform 0.6s ease-out, opacity 0.7s ease-out;
}


.card-sec5-appear {
    opacity: 1;
    transform: translateY(0);
}


.card2-delay {
    transition-delay: 0.25s; 
}





.sec6{width: 100%;height: 596.29px;background-color: var(--background2);}

.cont-info-sec6{width: 100%;height: 100%;display: flex;
justify-content: center;}


.cont-info2-sec6{padding: 0 7.9% 0 7.9%;box-sizing: border-box;width: 100%;
display: flex;justify-content: center;}

.row-big-sec6{display: flex;flex-direction: row;
    max-width: 1280px;justify-content: space-between;
    position: relative;
    width: 100%;}

.imgs-cont{position: relative;width: 424px;
    margin: 0;padding: 0;top: 27px;
height: 483px;}


.colum-form-sec6{    display: flex;
    flex-direction: column;
    gap: 97px;
    width: 48.3%;
    margin-top: 114.27px;
     margin-bottom: 114.27px;
    align-items: center;
    justify-content: center;}


.cont2-sec6{display: flex;flex-direction: column;
gap: 63px;}

.header-sec6{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 121%; /* 72.038px */}

.para-sec6{
color: var(--black-text);

font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 37.507px */
margin: 0;
display: -webkit-box;
    display: box;
    display: flexbox;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}





.form-sec6{width:100%;margin: 0;padding: 0;
height: 56px;position: relative;}


.input-sec6{    width: 100%;
height: 56px;
flex-shrink: 0;
border-radius: 17px;
background: var(--design);
   border-color: transparent;
display: flex;align-items: center;
padding: 0 0 0 31px;box-sizing: border-box;}



.input-sec6::placeholder {
  color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */
}


.input-sec6:focus {
  outline: none; 
  border-color: transparent; 
}


.buttom-sec6{display: flex;
width: 195px;margin: 0;
height: 56px;position: absolute;right: 0;
justify-content: center;top: 0;
align-items: center;
flex-shrink: 0;border-color: transparent;
border-radius: 15px;
background: var(--cta);
transition: all 300ms linear;}


.link-sec6{width: 100%;height: 100%;
display: flex;justify-content: center;
align-items: center;text-decoration: none;
}

.text-cta-sec6{color: var(--white);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;}

.buttom-sec6:hover{background-color: var(--ctahover);
}

.buttom-sec6:hover .text-cta-sec6{
  color: var(--black-text);
}



.big-circle-sec6{    width: 518.31px;
    height: 518.31px;
    position: absolute;
    flex-shrink: 0;
    border-radius: 409.31px;
    background: var(--design);
    left: -48px;
       opacity: 0;         
    transform: translatex(-60%); 
    transition: all 0.6s ease-out; }

.big-circle-sec6.animate {
    opacity: 1;
    transform: translatex(0);
}





.img1-sec6{    position: absolute;
    left: -123px;
    width: 522px;
    z-index: 1;}
.img2-sec6{    position: absolute;
    top: -10px;
    right: 40px;
    width: 228px;}
.img3-sec6{    position: absolute;
    bottom: 14px;
    right: -68px;
    width: 364px;}


.footer{width: 100%;height: fit-content;background-color: var(--background2);
background-image: url(pic/pic32.png);
background-size: cover;}

.footer-p{width: 100%;height: fit-content;background-color: var(--background);
background-image: url(pic/pic32.png);
background-size: cover;}





.container-footer{width: 100%;height: 100%;
display: flex;flex-direction: column;
gap: 52px;}


.main-info-footer{width: 100%;padding: 100px 7.9% 0 7.9% ;
box-sizing: border-box;display: flex;
justify-content: center;}


.main2-info-footer{width: 100%;
display: flex;flex-direction: column;gap: 86px;
}






.all-info-footer{width: 100%;display: flex;
flex-direction: column;gap: 65px;}

.row1-footer{display: flex;flex-direction: row;
justify-content: space-between;}

.box1-footer{display: flex;flex-direction: column;
gap: 32px;}

.logo22{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 28.77px;
font-style: normal;
font-weight: 800;
line-height: normal;}

.icons-cont-footer{display: flex;flex-direction: row;
gap: 20px;}


.icons{width: 27.082px;
height: 27.082px;}

.box2-footer{display: flex;flex-direction: column;
gap: 53px;list-style-type: none;margin: 0;padding: 0;}

.big-lists-footer{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 24px;margin: 0;padding: 0;
font-style: normal;
font-weight: 700;
line-height: normal;}


.listcontact-footer{display: flex;
flex-direction: column;
align-items: flex-start;
gap: 26px;list-style-type: none;margin: 0;padding: 0;
align-self: stretch;}

.list-small-footer{display: flex;
    flex-direction: column;gap: 26px;
}


.horizontal-list-contact{display: flex;flex-direction: row;
gap: 14px;list-style-type: none;
margin: 0;padding: 0;}

.text-contact{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 500;cursor: pointer;
line-height: normal;}



.main-navs-footer{display: flex;flex-direction: row;
justify-content: space-between;
margin: 0;padding: 0;}

.box4-footer{display: flex;
    flex-direction: column;list-style-type: none;
    margin: 0;padding: 0;width: fit-content;gap: 53px;
}

.small-navs{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 16px;
font-style: normal;list-style-type: none;
margin: 0;padding: 0;
font-weight: 500;position: relative; 
line-height: normal;}


.small-navs::after {
    content: '';
    position: absolute;
    bottom: 0;                 
    left: 0;
    width: 0;                
    height: 2px;
    background-color: var(--black-text);
    transition: width 0.3s ease, left 0.3s ease, right 0.3s ease;
}


.small-navs:hover::after {
    width: 100%;             
    left: 0;                 
    right: auto;             
}


.link-footer{text-decoration: none;width: fit-content;}


.small-navs-container{display: flex;padding: 0;margin: 0;
flex-direction: column;gap: 26px;}



.whitepart{width: 1299px;background-color: var(--white);box-sizing: border-box;
height: 47.9px;width: 100%;padding: 0 7.9% ;justify-content: space-between;
flex-shrink: 0;align-items: center;
display: flex;}

.small-txet-footer{color: var(--black-text);
font-family: Poppins;margin: 0;
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 15px */}

.row-box-last{display: flex;flex-direction: row;align-items: center;
gap: 10px;margin: 0;padding: 0;list-style-type: none;}

.text-in-rowww{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;}


.rectangle-small{width: 1px;
height: 13.503px;background-color: var(--black-text);}






/* products-page */


.sec1-products{width: 100%;height:100vh;overflow-x: hidden;    scrollbar-width: none;}

.sec1-container-info-p{width: 100%;height: 100%;position: relative;
display: flex;justify-content: center;}

.sec1-cont2-info-p{width: 100%;    padding: 100px 7.9% 0;;box-sizing: border-box;
display: flex;justify-content: center;align-items: center;}

.container-hero-products{display: flex;flex-direction: row;   
align-items: flex-start;
/* max-width: 1280px; */
justify-content: space-between;
    width: 100%;      min-width: 1100px;
height: fit-content;}

.text-box-p{display: flex;flex-direction: column;
gap: 54px;position: relative;    padding-top: 70px;
 transform: translateX(-560px);
 opacity: 0;
 transition: all 0.8s ease-out; }


.text-box-p.animate {
    transform: translateX(0); 
    opacity: 1;
}












.header-sec1-p{color: var(--design);
margin: 0;
font-family: Poppins;
font-size: 128px;
font-style: normal;
font-weight: 900;
line-height: normal;}


.serachbar-p{width: 438.468px;
height: 46.305px;position: relative;
flex-shrink: 0;border-radius: 15.629px;
background: var(--white-bar);display: flex;
flex-direction: row;justify-content: space-between;
align-items: center;
padding: 0 16px;box-sizing: border-box;}



.search-input-p {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 500;
line-height: 140%;
}

.search-input-p :active{
      color: var(#403B3B); 
}

.search-input-p::placeholder {
  color: var(#403B3B); 
}

.search-input-p:focus {
  color: #403B3B;
}

.imgs-container-sec1-p{display: flex;flex-direction: row;
gap: 15px;margin: 0;padding: 0;align-items: center;
    position: absolute;
    right: 20px;
}


.img-sec1-p{width: 560px;height: 698px;position: relative;
margin: 0;padding: 0;    left: 8%;
 transform: translateX(360px);
 opacity: 0;
 transition: all 0.8s ease-out; }


.img-sec1-p.animate {
    transform: translateX(0); 
    opacity: 1;
}




.img-heroo-sec1-products{
        position: absolute;
    right: 22px;
    top: -18px;
    width: 815px;
}

.img-circle-sec1-p{
        position: absolute;
    right: -168px;
    bottom: -70px;
    animation: rotateScale 3.7s linear infinite;
    transform-origin: center center;
}

@keyframes rotateScale {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.27); 
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}




.container-background-sec1-p{height: 805px;    z-index: -1;

width: 100%;overflow: hidden;position: absolute;}

.row-decoration-bg-sec1-p{display: flex;
flex-direction: row;position: absolute;
left:566px;top: 0;
gap: 22px;
  opacity: 0;
  transition: all 1s ease-out;
}

.row-decoration-bg-sec1-p.animate {
left:-566px;
  opacity: 1;
}




.text-in-row-sec1-p{color: var(--text-deco);
margin: 0;
font-family: Poppins;
font-size: 128px;
font-weight: 900;}

.row2-decoration-bg-sec1-p{display: flex;
flex-direction: row;position: absolute;
left: 566px;bottom: 96px;  opacity: 0;  transition: all 1s ease-out;
gap: 22px;}

.row2-decoration-bg-sec1-p.animate {
left:-566px;
  opacity: 1;
}




.sec2-p{width: 100%;height: fit-content;background-image: url(pic/pic46.svg);
background-size: cover;background-position: center;
overflow-x: hidden;}

.container-info-sec2-p{width: 100%;height: fit-content;
display: flex;justify-content: center;
        padding: 190px 0 122.29px 0;;display: flex;flex-direction: column;
gap: 119px;align-items: center;
}


.header-sec2-p{color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 121%; /* 48.4px */}


.main-info-sec2-p{display: flex;
flex-direction: column;width: 100%;max-width: 1280px;}

.card1-sec2-p{display: flex;
flex-direction: row;    height: 310px;position: relative;
gap: 70px;width: 920.11px; transform: translateX(-700px);
  transition: all 0.8s ease-out;
}

.card1-sec2-p.animate {
transform: translateX(0);
  opacity: 1;
}














.box-sec2-p{display: flex;
flex-direction: column;    width: 53%;margin-top: 135.05px;
gap: 40px;}

.sub-header-sec2-p{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 121%; /* 38.72px */}

.sub2-header-sec2-p{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 32px;text-align: right;
font-style: normal;
font-weight: 700;
line-height: 121%; /* 38.72px */}




.para-sec2-p{
color: var(--fadedtext);
font-family: Poppins;
font-size: 18px;margin: 0;
font-weight: 500;
line-height: 140%; /* 25.2px */
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}


.container-model-1-sec2-p{width: 371px;
    height: 519px;}

.model1-sec2-p{
        width: 149%;
    height: 139%;
    position: relative;
    bottom: 122px;right: 70px;
}

.model1-sec2-p::part( default-progress-bar ){
    display: none;

}

.container2-model-1-sec2-p{width: 393px;
    height: 543px;}

.model2-sec2-p{
width: 127%;
    height: 138%;
    position: relative;
    bottom: 122px;
    right: 2%
}
.model2-sec2-p::part( default-progress-bar ){
    display: none;

}
.card2-sec2-p{display: flex;position: relative;
flex-direction: row;    height: 532px;
gap: 70px;width: 920.11px;align-self: flex-end;transform: translateX(700px);
  transition: all 0.8s ease-out;
}

.card2-sec2-p.animate {
transform: translateX(0);
  opacity: 1;
}




.box2-sec2-p{display: flex;
flex-direction: column;    width: 53%;    margin-top: 38%;
gap: 40px;align-items: flex-end;}


.para2-sec2-p{
color: var(--fadedtext);
font-family: Poppins;text-align: end;
font-size: 18px;margin: 0;
font-weight: 500;
line-height: 140%; /* 25.2px */
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}


.box3-sec2-p{display: flex;
flex-direction: column;       width: 44%;    
    margin-top: 11.4%;
gap: 40px; }




.container3-model-1-sec2-p{width: 497.163px;
height: 408.358px;}



.card3-sec2-p{display: flex;position: relative;
flex-direction: row;    margin-top: 36px;
gap: 70px;width: 1046.16px;
transform: translateX(-700px);
  transition: all 1s ease-out;
}

.card3-sec2-p.animate {
transform: translateX(0);
  opacity: 1;
}



.model3-sec2-p{
    width: 134%;
    height: 141%;
    position: relative;
    bottom: 122px;
    left: -98px;
}
.model3-sec2-p::part( default-progress-bar ){
    display: none;

}

.button-sec2-p{display: flex;
width: 195px;
height: 56px;
border-color: transparent;
border-radius: 15px;
background: var(--cta);
justify-content: center;margin: 0;
padding: 0;
align-items: center;transition: all 300ms 
linear;
flex-shrink: 0;}


.link-sec2-p{width: 100%;height: 100%;
text-decoration: none;display: flex;
justify-content: center;align-items: center;}

.button-sec2-p:hover{background-color: var(--ctahover);}

.button-sec2-p:hover .cta-text-sec2-p{color: var(--black-text);}




.cta-text-sec2-p{color: var(--white);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;}


.img-sec2-p-deco{
        position: absolute;
    top: -22%;
    right: 49%;
}

.img2-sec2-p-deco{
        position: absolute;
    top: 20%;
    right: -28%;
}


.img3-sec2-p-deco{
position: absolute;
    top: -4%;
    right: 33%;
}

.img4-sec2-p-deco{
    position: absolute;
        top: -30%;
    right: 56%;
}



.sec3-p{width: 100%;height: fit-content;overflow-x: hidden;}


.container-sec3-p{width: 100%;height: 100%;
padding: 115px 7.9%;box-sizing: border-box;
display: flex;justify-content: center;}


.container2-sec3-p{    max-width: 1280px;
    width: 100%;display: flex;
flex-direction: column;
gap: 100px;}


.first-row-sec3-p{display: flex;flex-direction: row;
justify-content: space-between;align-items: self-end;}

.header-sec3-p3{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 121%; /* 48.4px */}

.nav-cont-sec3-p{display: flex;
flex-direction: row;
margin: 0;
padding: 0;align-items: center;
gap: 9px;justify-content: center}

.link-sec3-p{text-decoration: none;}

.text-small-sec3-p{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 700;}



.icon-sec3-p{width: 22.041px;
height: 15px;}


.main-cont-sec3-p{display: flex;flex-direction: row;
gap: 20px;}


.card-sec3-p{width: 50%;
height: 641.365px;position: relative;
display: flex;flex-direction: column;
gap: 40px;
padding: 0 63px 66px 63px;
box-sizing: border-box;
border-radius: 20px;justify-content: flex-end;
background: var(--design2);}


.container-model1-sec3-p{width: 100%;
height: 340.42px;}


.model-1-sec3-p{
        width: 101%;
    height: 128%;
    position: relative;
    top: -19%;
   transform: scale(0);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.model-1-sec3-p.animate {
    transform: scale(1);
}

.model-1-sec3-p::part( default-progress-bar ){
    display: none;

}




.sub-header-sec3-p{color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 121%; /* 38.72px */}


.para-sec3-p{
color: var(--fadedtext);
text-align: center;
font-family: Poppins;
font-size: 18px;margin: 0;
font-weight: 500;
line-height: 140%; /* 25.2px */
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}



.link-nav-sec3-circle-p{width: 86.693px;
height: 86.693px;background-color: var(--cta);
justify-content: center;align-items: center;
border-radius: 50%;
display: flex;margin: 0;padding: 0;
justify-content: center;position: absolute;
top: 24px;right: 24px;
align-items: center;}

.link-nav-sec3-circle-p:hover{
    background-color: var(--ctahover);
        transition: all 300ms linear;
}

.arrow-sec3-p{width: 59.622px;
height: 64.59px;
flex-shrink: 0;margin: 0;
padding: 0;background-image: url(pic/pic52.png);}



.link-nav-sec3-circle-p:hover .arrow-sec3-p{background-image: url(pic/pic53.png);}

.container-vertical-cards-sec3-p{display: flex;
flex-direction: column;
gap: 20px;width: 50%;}



.card2-sec3-p{width: 100%;height: 311.2px;
border-radius: 20px;
background: var(--design2);
display: flex;
flex-direction: row;
gap: 15px;
padding: 0 30px 0 30px;
box-sizing: border-box;position: relative;
align-items: center;}


.model2-sec3-p-cont{width: 191px;
height: 227px;}

.model2-sec3-p{

    width: 110%;
    height: 128%;
    position: relative;
    bottom: 40px;
    right: 7px;

   transform: scale(0);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.model2-sec3-p.animate {
    transform: scale(1);
}

.model2-sec3-p::part( default-progress-bar ){
    display: none;

}



.container-text2-sec3-p{display: flex;
flex-direction: column;gap: 40px;width: 265px;
justify-content: flex-start;}



.sub2-header-sec3-p{color: var(--black-text);
text-align: left;
margin: 0;
font-family: Poppins;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 121%; /* 38.72px */}


.para2-sec3-p{
color: var(--fadedtext);
text-align: left;
font-family: Poppins;
font-size: 18px;margin: 0;
font-weight: 500;
line-height: 140%; /* 25.2px */
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}




.link2-nav-sec3-circle-p{width: 64.59px;
height: 64.59px;background-color: var(--cta);
justify-content: center;align-items: center;
border-radius: 50%;
display: flex;margin: 0;padding: 0;
justify-content: center;position: absolute;
top: 24px;right: 24px;
align-items: center;}

.link2-nav-sec3-circle-p:hover{
    background-color: var(--ctahover);
        transition: all 300ms linear;
}

.arrow2-sec3-p{width: 44.421px;
height: 48.122px;
flex-shrink: 0;margin: 0;    background-position: center;
padding: 0;background-image: url(pic/pic52.png);}



.link2-nav-sec3-circle-p:hover .arrow2-sec3-p{background-image: url(pic/pic53.png);}

.model3-sec3-p-cont{width: 182px;
height: 124px;}

.model3-sec3-p{

    width: 102%;
    height: 160%;
    position: relative;
    bottom: 40px;
    right: 3px;


   transform: scale(0);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.model3-sec3-p.animate {
    transform: scale(1);
}

.model3-sec3-p::part( default-progress-bar ){
    display: none;

}



.sec4-p{width: 100%;height: 1082.04px;
background-image: url(pic/pic56.png);}

.container-sec4-p{    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 115px 7.9% 0;
    box-sizing: border-box;
    overflow: hidden;
}

.all-cont-sec4-p{max-width: 1280px;
    width: 100%;display: flex;
flex-direction: column;align-items: center;
gap: 47px;}


.header-sec4-p{color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 121%; /* 48.4px */}

.container-infoo-sec4-p{
    height: 142%;
    width: 121%;
    position: relative;
    display: flex;
    justify-content: center;


}

.yellow-rect-sec4-p{width: 292.013px;
height: 584.9px;
border-radius: 48px;position: absolute;
background: var(--design2);
display: flex;justify-content: center;
align-items: flex-end;}



.model-sec4-p{
    width: 100%;
    max-width: 1280px;
    height: 51%;
    min-height: 606px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
 transform: translatey(500px);
  transition: all 0.6s ease-out;
}

.model-sec4-p.animate {
transform: translatey(0);
  opacity: 1;
}

.model-sec4-p::part( default-progress-bar ){
    display: none;

}
















.Hotspot {
  background: var(--white);
  border-radius: 32px;
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  cursor: pointer;
  height: 30px;
  padding: 8px;
  position: relative;transition: all 300ms linear;
  transition: opacity 0.3s;
  width: 30px;    margin-bottom: 20px;

}

.Hotspot:not([data-visible]) {
  background: transparent;
  border: 4px solid var(--design);
  box-shadow: none;
  height: 32px;
  pointer-events: none;
  width: 32px;
}

.Hotspot:focus {
  border: 4px solid var(--design2);
  height: 32px;
  outline: none;
  width: 32px;
}






.Hotspot > * {
  opacity: 1;
  transform: translateY(-50%);
}

.Hotspot:not([data-visible]) > * {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 4px));
  transition: transform 0.3s, opacity 0.3s;
}




.HotspotAnnotation {
  background: var(--design);
  border-radius: 4px;
  padding: 1em 1.3em;
  position: absolute;transition: all 300ms linear;

  left:  325%;
  top: 50%;
  transform: translate(10px, -50%);

  width: fit-content;width: 277.945px;
  overflow-wrap: break-word;
}


.Hotspot2Annotation {
  background: var(--design);
  border-radius: 4px;
  padding: 1em 1.3em;
  position: absolute;

  right:317%;
  bottom: 100%;transition: all 300ms linear;
  transform: translate(-10px, -10px);

  width: fit-content;
  overflow-wrap: break-word;
  
}





.Hotspot3Annotation {
  background: var(--design);
  border-radius: 4px;
  padding: 1em 1.3em;
  position: absolute;
  right :435%;
  bottom: 246%;transition: all 300ms linear;
  transform: translate(-10px, -10px);
  width: fit-content;
  overflow-wrap: break-word;
  width: 277px;
}


.font-hotspottt{  color: var(--black-text);
  font-family: Poppins;margin: 0;
  font-size: clamp(20px, 20px, 22px);
  font-weight: 600;text-align: right;
      width: 143px; width: 277.945px;
  }


.font2-hotspottt{  color: var(--black-text);
  font-family: Poppins;margin: 0;
  font-size: clamp(20px, 20px, 22px);
  font-weight: 600;
      width: 173px;width: 281px;
    text-align: left;
   }



.font3-hotspottt{  color: var(--black-text);
  font-family: Poppins;margin: 0;
  font-size: clamp(20px, 20px, 22px);
  font-weight: 600;
      width: 156px;width: 264px;
    text-align: left;
    }








.Hotspot2 {
  background: var(--white);
  border-radius: 32px;
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  cursor: pointer;
  height: 30px;
  padding: 8px;
  position: relative;
  transition: opacity 0.3s;transition: all 300ms linear;
  width: 30px;    margin-bottom: 101px;
}

.Hotspot2:not([data-visible]) {
  background: transparent;
  border: 4px solid var(--design);
  box-shadow: none;
  height: 32px;
  pointer-events: none;
  width: 32px;
}

.Hotspot2:focus {
  border: 4px solid var(--design2);
  height: 32px;
  outline: none;
  width: 32px;
}

.Hotspot2 > * {
  opacity: 1;
  transform: translateY(-70%)
}

.Hotspot2:not([data-visible]) > * {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 4px));
  transition: transform 0.3s, opacity 0.3s;
}






.Hotspot3{
  background: var(--white);
  border-radius: 32px;
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  cursor: pointer;
  height: 30px;
  padding: 8px;
  position: relative;transition: all 300ms linear;
  transition: opacity 0.3s;
  width: 30px;}

.Hotspot3:not([data-visible]) {
  background: transparent;
  border: 4px solid var(--design);
  box-shadow: none;
  height: 32px;
  pointer-events: none;
  width: 32px;
}

.Hotspot3:focus {
  border: 4px solid var(--design2);
  height: 32px;
  outline: none;
  width: 32px;
}

.Hotspot3 > * {
  opacity: 1;
  transform: translateY(-50%);
}

.Hotspot3:not([data-visible]) > * {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 4px));
  transition: transform 0.3s, opacity 0.3s;
}



.pic1-sec4-p{position: absolute;
        position: absolute;
    right: -46px;
    top: 75px;z-index: 1;
}

.pic2-sec4-p{
        position: absolute;
    transform: rotate(38deg);
    bottom: -111px;
    right: -76px;z-index: 1;
    
}


.pic3-sec4-p{
        position: absolute;
    top: -135px;
    left: -82px;
}


.para1-sec4-p{
color: var(--fadedtext);margin: 0;
text-align: right;
font-family: Poppins;width: 277.945px;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; 
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}

.cont-para1-sec4{    width: fit-content;
    background: var(--design);
    position: absolute;
    border-radius: 4px;
    padding: 1em 1.3em;
    left: 0;display: none;
    bottom: -120px;}


.HotspotAnnotation:hover{
        display: flex;
    justify-content: right;
font-family: Poppins;width: 277.945px;}
.HotspotAnnotation:hover .cont-para1-sec4{display: block;}

.HotspotAnnotation:hover .font-hotspottt {

   width: 277.945px;
}



.Hotspot.active .HotspotAnnotation .cont-para1-sec4 {
    display: block;
}

.Hotspot.active .HotspotAnnotation .font-hotspottt {
    width: 277.945px;
}






.para2-sec4-p{
color: var(--fadedtext);margin: 0;
text-align: left;
font-family: Poppins;width: 277.945px;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; 
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}

.cont-para2-sec4{    width: fit-content;
    background: var(--design);
    position: absolute;
    border-radius: 4px;
    padding: 1em 1.3em;
    left: 0;display: none;
    bottom: -120px;}


.Hotspot2Annotation:hover{
        display: flex;
    justify-content: left;
font-family: Poppins;width: 277.945px;}
.Hotspot2Annotation:hover .cont-para2-sec4{display: block;}

.Hotspot2Annotation:hover .font2-hotspottt {

   width: 277.945px;
}

.Hotspot2.active .Hotspot2Annotation .cont-para2-sec4 {
    display: block;
}

.Hotspot2.active .Hotspot2Annotation .font2-hotspottt {
    width: 277.945px;
}








.para3-sec4-p{
color: var(--fadedtext);margin: 0;
text-align: left;
font-family: Poppins;width: 277.945px;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; 
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}

.cont-para3-sec4{    width: fit-content;
    background: var(--design);
    position: absolute;
    border-radius: 4px;
    padding: 1em 1.3em;
    left: 0;display: none;
    bottom: -120px;}


.Hotspot3Annotation:hover{
        display: flex;
    justify-content: left;
font-family: Poppins;width: 277.945px;
}
.Hotspot3Annotation:hover .cont-para3-sec4{display: block;}

.Hotspot3Annotation:hover .font3-hotspottt {

   width: 277.945px;
}
/* .Hotspot3Annotation:hover .pic2-sec4-p {
    position: absolute;
    transform: rotate(2deg);
    bottom: -145px;
    right: -156px;
} */

.Hotspot3.active .Hotspot3Annotation .cont-para3-sec4 {
    display: block;
}
.Hotspot3.active{z-index: 11;}



.Hotspot3.active .Hotspot3Annotation .font3-hotspottt {
    width: 277.945px;
}



.sec5-p{width: 100%;height: 595.63px;}

.cont-info-sec5-p{width: 100%;height: 100%;
padding: 0 7.9% 0 7.9%;box-sizing: border-box;
overflow: hidden;

display: flex;justify-content: center;}


.main-info-sec5-p{    max-width: 1280px;justify-content: space-between;
        align-items: center;gap: 77px;
    width: 100%;display: flex;flex-direction: row;}

.box-right-sec5-p{display: flex;    width: 40%;
flex-direction: column;gap: 60px;}


.sub-box-sec5-p{display: flex;flex-direction: column;
gap: 50px;}


.header-sec5-p{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 40px;
font-weight: 800;
line-height: 121%; /* 48.4px */}


.para-sec5-p{
color: var(--black-text);
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 4;
margin: 0;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}



.cta-sec5-p{display: flex;
width: 307px;
height: 56px;
justify-content: center;border-color: transparent;
align-items: center;
flex-shrink: 0;border-radius: 15px;
background-color: var(--cta);
transition: all 300ms linear;}


.link-sec5-p{text-decoration: none;display: flex;width: 100%;
justify-content: center;align-items: center;}

.text-sec5-p{color: var(--white);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;}


.cta-sec5-p:hover{background-color: var(--ctahover);}

.cta-sec5-p:hover .text-sec5-p{color: var(--black-text);}


.img-cont-sec5-p{margin: 0;padding: 0;position: relative;
     transform: translateX(600px);
  transition: all 0.8s ease-out;
}

.img-cont-sec5-p.animate {
transform: translateX(0);
  opacity: 1;
}



.imggg-sec5-p{display: block;}



.sec1-b{width: 100%;height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;}


.sec1-cont-b{width: 100%;height: 100%;position: relative;
display: flex;justify-content: center;
padding: 100px 0 0 0;
    box-sizing: border-box;   overflow: hidden;
    scrollbar-width: none;}

.header-sec1-b{color: var(--design);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 128px;
font-style: normal;
font-weight: 900;
line-height: normal;
    padding-top: 0;
        position: absolute;
    z-index: 4;
    bottom: 49%;
opacity: 0;  transform: translatey(300px); 
    transition: all 0.7s ease-out; }

.header-sec1-b.animate{opacity: 1; 
    transform: translatey(0); 
  }


.row1-sec1-b{position: absolute;
display: flex;flex-direction: row;    top: 131px;
gap: 22px;  opacity: 0;         
    transform: translatex(600px);     white-space: nowrap;
    transition: all 1.2s ease-out; }



.row1-sec1-b.animate{opacity: 1; 
    transform: translatex(0); }




.text-decor-bg-sec1-b{color: var(--text-deco);
margin: 0;
font-family: Poppins;
font-size: 128px;
font-style: normal;
font-weight: 900;
line-height: normal;}


.row2-sec1-b{position: absolute;
display: flex;flex-direction: row;
    bottom: 134px;    white-space: nowrap;
gap: 22px; opacity: 0;         
    transform: translatex(-600px); 
    transition: all 0.7s ease-out; }
.row2-sec1-b.animate{opacity: 1; 
    transform: translatex(0); }


.img-sec1-b{position: absolute;bottom: -200px;
    z-index: 1;opacity: 0; 
    transition: all 0.7s ease-out; }

.img-sec1-b.animate{opacity: 1; 
    bottom: -27px; }



.sec2-b{width: 100%;height: 1203px;
background-image: url(pic/pic62.png);
background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1;overflow: hidden;
}

.cont-info-sec2-b{width: 100%;height: 100%;
padding: 189px 7.9% 0 7.9%;box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.big-cont-sec2-b{display: flex;
flex-direction: column;
max-width: 1280px;
    width: 100%;gap: 124px;}


.header-sec2-b{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 40px;
font-weight: 800;
line-height: 121%; /* 48.4px */}


.container2-sec2-b{display: flex;
flex-direction: row;gap: 20px;}

.colum1-sec2-b{display: flex;flex-direction: column;gap: 20px;
width: 50%;}


.para-sec2-b{
color: var(--black-text);
font-family: Poppins;
font-size: 18px;
font-style: normal;
margin: 0;
font-weight: 500;
line-height: 140%; 
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 3;
margin: 0;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}


.model-cont-sec2-b{width: 100%;height: 568px;}


.model-sec2-b{width: 100%;height: 100%;
 transform: translateX(-420px);opacity: 0;
 transition: all 0.8s ease-out;
}

.model-sec2-b.animate {
 transform: translateX(0px); ;
  opacity: 1;
}
.model-sec2-b::part( default-progress-bar ){
    display: none;

}


.colum2-sec2-b{display: flex;width: 50%;
flex-direction: column;gap: 20px;

 transform: translateX(420px);
 transition: all 0.8s ease-out;
}

.colum2-sec2-b.animate {
 transform: translateX(0px); ;
  opacity: 1;
}


.bg-img-sec2-b{width: 100%;position: absolute;
bottom:-38px;z-index: -1;
}

/* 
.bg-img-sec2-b.animate {
 transform: translateX(0px); ;
  opacity: 1;
} */


.card1-sec2-b{display: flex;
width: 100%;
height: 203.591px;
box-sizing: border-box;
padding: 22px;
flex-direction: column;
align-items: flex-start;
gap: 20px;
flex-shrink: 0;position: relative;
border-radius: 32px;align-items: flex-end;
background: var(--design);
flex-direction: row;}


.img-card-sec-b{width: 171.882px;
height: 157.008px;
border-radius: 23px;
background: var(--design2);}


.imggg-1-sec1-b{width: 100%;height: 100%;}


.para-2-sec2-b{
    color: var(--black-text);
font-family: Poppins;
font-size: 18px;
font-style: normal;
margin: 0;
font-weight: 500;
line-height: 140%; 
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 3;
margin: 0;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

.circle-sec2-b{width: 64.59px;
height: 64.59px;margin: 0;padding: 0;
flex-shrink: 0;
background-color: var(--cta);
border-radius: 50%;
position: absolute;
top: 23px;right: 23px;
display: flex;
justify-content: center;
align-items: center;
transition: all 300ms linear;}

.arrow-sec2-b{width: 44.42px;
height: 48px;
margin: 0;
padding: 0;
background-image:url(pic/pic64.png)}

.circle-sec2-b:hover{background-color: var(--ctahover);}

.circle-sec2-b:hover .arrow-sec2-b{
    background-image:url(pic/pic65.png)
}



.circle2-sec2-b{width: 64.59px;
height: 64.59px;margin: 0;padding: 0;
flex-shrink: 0;
background-color: var(--cta);
border-radius: 50%;
position: absolute;
top: 23px;left: 23px;
display: flex;
justify-content: center;
align-items: center;
transition: all 300ms linear;}

.arrow2-sec2-b{width: 44.42px;
height: 48px;
margin: 0;
padding: 0;
background-image:url(pic/pic64.png)}

.circle2-sec2-b:hover{background-color: var(--ctahover);}

.circle2-sec2-b:hover .arrow2-sec2-b{
    background-image:url(pic/pic65.png)
}






.rectangle-sec2-b{display: flex;
position: absolute;bottom: 0;
padding: 18px 39px;
box-sizing: border-box;
flex-direction:row;white-space: nowrap;
justify-content: center;
align-items: center;
gap: 45px;    
border: 4px solid var(--design);overflow: hidden;
 transform: translateX(800px); opacity: 0;    width: 143%;
background: var(--design);  transition: all 0.8s ease-out;
}

.rectangle-sec2-b.animate {
 transform: translateX(-300px); ;
  opacity: 1;
}


.text-decoration-sec2-b{color: var(--bluee);
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 121%; /* 48.4px */}



.sec3-b{width: 100%;height: 1756px;}

.container-sec3-b{width: 100%;
height: 100%;padding: 115px 7.9% 0 7.9%;
box-sizing: border-box;
display: flex;
justify-content: center;}


.main-info-sec3-b{    display: flex;
    flex-direction: column;
    max-width: 1280px;align-items: center;
    width: 100%;gap: 173px;
}


.header-sec3-b{color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 121%; /* 48.4px */}

.container-row-sec3-b{
    display: flex;
    flex-direction: column;gap: 135px;
}


.card1-sec3-b{
    width: 84%;
height: 318.509px;
border-radius: 75px;
background: var(--design2);
display: flex;
justify-content: flex-end;
padding: 0 84px 0 0;
box-sizing: border-box;position: relative;

align-self: flex-end;
 transform: translateX(420px);opacity: 0;
 transition: all 0.8s ease-out;
}

.card1-sec3-b.animate {
 transform: translateX(0px); ;
  opacity: 1;
}




.card2-sec3-b{
    width: 84%;
height: 318.509px;
border-radius: 75px;
background: var(--design2);
display: flex;
    justify-content: flex-start;
padding: 0 0 0 84px;
box-sizing: border-box;position: relative;

align-self: flex-start;
 transform: translateX(-420px);opacity: 0;
 transition: all 0.8s ease-out;
}

.card2-sec3-b.animate {
 transform: translateX(0px); ;
  opacity: 1;
}











.text-box-sec3-b{display: flex;
flex-direction: column;    align-self: center;
gap: 25px;width:55%;}









.sub-text-box-sec-b{display: flex;
flex-direction: column;
gap: 40px;}


.titles-sec3-b{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 121%; /* 38.72px */}


.para-sec3-b{
color: var(--fadedtext);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 500;
line-height: 140%; 
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 4;
margin: 0;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}


.nav-sec3-b{margin: 0;
padding: 0;}

.link-sec3-b{text-decoration: none;
display: flex;gap: 7px;
flex-direction: row;}

.link-sec3-b{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: 25%; /* 4.5px */
text-underline-position: from-font;}


.container-model-sec3-b{
     width: 77%;
    height: 741px;
    align-self: center;
    position: absolute;
    left: -303px;    bottom: -157px;
}


.model-sec3{width: 100%;height: 100%;}

.model-sec3::part( default-progress-bar ){
    display: none;

}


.container2-model-sec3-b{
    width: 59%;
    height: 741px;
    align-self: center;
    position: absolute;
    right: -225px;
    bottom: -157px;
}


.model2-sec3{width: 100%;height: 100%;}

.mode2-sec3::part( default-progress-bar ){
    display: none;

}



.container3-model-sec3-b{
    width: 71%;
    height: 714px;
    align-self: center;
    position: absolute;
    left: -283px;
    bottom: -191px;
}



.sec4-b{width: 100%;background-image: url(pic/pic69.png);
height: 913.73px;}


.container-info-sec4-b{width: 100%;height: 100%;
padding: 0 7.9% 0 7.9%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;}



.main-inf0-sec4-b{    max-width: 1280px;
    width: 100%;
display: flex;
flex-direction: row;
gap: 50px;  height: 100%;
    justify-content: space-between;}



.text-box-sec4-b{display: flex;
flex-direction: column;    width: 44%;
gap: 46px;justify-content: center;}


.header-sec4-b{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 121%; /* 48.4px */}

.para-sec4-b{
margin: 0;
color: #514E4E;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; 

display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 4;
margin: 0;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}


.container-img-sec4-b{position: relative;
    width: 50%;
       height: 79%;

    display: flex;    align-items: center;
    justify-content: center;}




.yellow-rect-sec4-b{
width: 69%;
  position: absolute;
    height: 590.15px;
border-radius: 27px;
background: var(--design);
display: flex;
    justify-content: center;    align-items: center;
}

.img-sec4-b{
        width:92%;
    height: auto;
    position: relative;
    z-index: 1;

 transform: translatey(520px);opacity: 0;
 transition: all 0.8s ease-out;
}

.img-sec4-b.animate {
 transform: translatey(0px); ;
  opacity: 1;
}




.sec5-b{width: 100%;height: fit-content;
background-image: url(pic/pic72.png);
    background-size: cover;
    background-position: center;}


.main-info-sec5-b{width: 100%;height: 100%;
    padding: 70px 7.9% 122.29px 7.9%;;
    box-sizing: border-box;
    display: flex;
    justify-content: center;}



.big-cont-sec5-b {
    display: flex;
    flex-direction: column;
    max-width: 1280px;
    width: 100%;
    gap: 148px;
}



.hedaer-sec5-b{color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 40px;
font-weight: 800;
line-height: 121%; /* 48.4px */}



.container-rect-sec5-b{width: 100%;    
    width: 100%;
    display: flex;
       justify-content: center;
    align-items: center;position: relative;
        height: 551.83px;}

.rect1-sec3-b{margin: 0;
display: flex;
flex-direction: row;
height: 84.373px;
transform: rotate(-6.115deg);
justify-content: center;
align-items: center;
gap: 24px;
width: 36%;min-width: 361.312px;
border-radius: 70px;
background: var(--design);
position: absolute;
top: 0;
left: 0;}


.rect2-sec3-b{margin: 0;
display: flex;
flex-direction: row;
height: 84.373px;
transform: rotate(15.003deg);
justify-content: center;
align-items: center;
gap: 24px;
width: 39%;min-width: 417.031px;
border-radius: 70px;
background: var(--design);
position: absolute;
top: 0;
right: 0;}


.rect3-sec3-b{margin: 0;
display: flex;
flex-direction: row;
height: 84.373px;
transform: rotate(15.003deg);
justify-content: center;
align-items: center;
gap: 24px;
width: 38%;min-width: 422px;
border-radius: 70px;
background: var(--design);}


.rect4-sec3-b{margin: 0;
display: flex;
flex-direction: row;
height: 84.373px;
transform: rotate(11.454deg);;
justify-content: center;
align-items: center;
gap: 24px;
width: 36%;min-width: 405px;
border-radius: 70px;
background: var(--design);
position: absolute;
bottom: 0;
left: 0;}


.rect5-sec3-b{margin: 0;
display: flex;
flex-direction: row;
height: 84.373px;
transform: rotate(-17.093deg);
justify-content: center;
align-items: center;
gap: 24px;
width: 36%;min-width: 400px;
border-radius: 70px;
background: var(--design);
position: absolute;
bottom: 0;
right: 0;}


@keyframes randomMove1 {
  0%   { transform: translate(0,0) rotate(-6deg); }
  25%  { transform: translate(80px, -60px) rotate(-3deg); }
  50%  { transform: translate(-60px, 70px) rotate(-9deg); }
  75%  { transform: translate(90px, 20px) rotate(-1deg); }
  100% { transform: translate(0,0) rotate(-6deg); }
}

@keyframes randomMove2 {
  0%   { transform: translate(0,0) rotate(15deg); }
  25%  { transform: translate(-100px, 50px) rotate(20deg); }
  50%  { transform: translate(70px, -80px) rotate(10deg); }
  75%  { transform: translate(-50px, -40px) rotate(22deg); }
  100% { transform: translate(0,0) rotate(15deg); }
}

@keyframes randomMove3 {
  0%   { transform: translate(0,0) rotate(10deg); }
  25%  { transform: translate(60px, 90px) rotate(5deg); }
  50%  { transform: translate(-80px, -70px) rotate(16deg); }
  75%  { transform: translate(40px, -60px) rotate(2deg); }
  100% { transform: translate(0,0) rotate(10deg); }
}

@keyframes randomMove4 {
  0%   { transform: translate(0,0) rotate(11deg); }
  25%  { transform: translate(-90px, -80px) rotate(8deg); }  
  50%  { transform: translate(100px, -60px) rotate(14deg); }
  75%  { transform: translate(-60px, -100px) rotate(6deg); } 
  100% { transform: translate(0,0) rotate(11deg); }
}


@keyframes randomMove5 {
  0%   { transform: translate(0,0) rotate(-17deg); }
  25%  { transform: translate(70px, -100px) rotate(-12deg); }
  50%  { transform: translate(-110px, -80px) rotate(-22deg); } 
  75%  { transform: translate(90px, -70px) rotate(-15deg); }   
  100% { transform: translate(0,0) rotate(-17deg); }
}




.rect1-sec3-b { animation: randomMove1 5s infinite ease-in-out; }
.rect2-sec3-b { animation: randomMove2 6s infinite ease-in-out; }
.rect3-sec3-b { animation: randomMove3 4.5s infinite ease-in-out; }
.rect4-sec3-b { animation: randomMove4 5.5s infinite ease-in-out; }
.rect5-sec3-b { animation: randomMove5 6.5s infinite ease-in-out; }



.link-sec5-b{text-decoration: none;
display: flex;
width: 100%;height: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 24px;}

.titles-sec5-b{color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: 121%; /* 36.3px */}

.circles-sec5-b{width: 59.464px;
height: 59.464px;border-radius: 50%;
background-color: var(--cta);
display: flex;
justify-content: center;
align-items: center;
transition: all 300ms linear;}



.arrow-sec5-b{width: 40.9px;height: 44px;
background-image: url(pic/pic73.png);
margin: 0;
padding: 0;}

.circles-sec5-b:hover{
background-color: var(--ctahover);}


.circles-sec5-b:hover .arrow-sec5-b{
    background-image: url(pic/pic74.png);
}







.img-sec1-a{position: absolute;left: -400px;
    z-index: 1;opacity: 0;     bottom: -139px;;
    transition: all 0.7s ease-out; 
   width: clamp(200px, 53vw, 704px);
}

.img-sec1-a.animate{opacity: 1; 
    left: 0; }


.img2-sec1-a{position: absolute;right: -400px;
    z-index: 1;opacity: 0;     bottom: -139px;
    transition: all 0.7s ease-out;
width: clamp(200px, 53vw, 704px); }

.img2-sec1-a.animate{opacity: 1; 
;right: 0; }


.header-sec1-a{color: var(--design);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 128px;
font-style: normal;
font-weight: 900;position: relative;z-index: 3;
line-height: normal;
      padding-top: 0;
    position: absolute;
    z-index: 4;
    bottom: 40%;
opacity: 0;  transform: translatey(300px); 
    transition: all 0.7s ease-out; }

.header-sec1-a.animate{opacity: 1; 
    transform: translatey(0); 
  }


.sec2-a{width: 100%;height: fit-content;
    background-image: url(pic/pic62.png);
    position: relative;z-index: 1;overflow: hidden;
    background-position: top center;}

.cont-nfo-sec-a{width: 100%;height: 100%;
padding: 187px 7.9% 103.24px 7.9%;
box-sizing: border-box;
display: flex;overflow: hidden;
justify-content: center;
align-items: center;}


.main-info-sec2-a{
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.rightb0x-sec2-a{display: flex;
flex-direction: column;gap: 120px; width: 59%;}

.header-sec2-a{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 121%; /* 48.4px */}

.colum-sub-sec2-a{display: flex;flex-direction: column;
gap: 90px;   }


.para-group-sec2-a{display: flex;
flex-direction: column;gap: 54px;
    width: 72%;}

.para-sec2-a{
color: var(--fadedtext);
font-family: Poppins;
font-size: 18px;margin: 0;
font-weight: 500;
line-height: 140%; /* 25.2px */
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 3;
margin: 0;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}


.yello-box-sec2-a{width: 100%;
height: 157.109px;
border-radius: 13px;
background: var(--design);
display: flex;
justify-content: center;
align-items: center;}



.row-sec2-a{display: flex;
flex-direction: row;
gap: 27px;padding: 0 36px 0 36px;
box-sizing: border-box;}

.sub-col-sec2-a{display: flex;
flex-direction: column;gap: 20px;
align-items: center;    justify-content: CENTER;}


.sub-header-sec2-a{color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 32px;
font-weight: 700;
line-height: 121%; /* 38.72px */}

.para-sectence-sec2-a{
color: var(--fadedtext);
text-align: center;
font-family: Poppins;
font-size: 18px;
font-weight: 500;
line-height: 140%; /* 25.2px */
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 2;
margin: 0;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}


.line-sec2-a{width: 2px;
height: 103px;
background: var(--line-sec2-a);}


.left-box-sec2-a{    width: 520px;
    height: 701px;position: relative;
    opacity: 0;  transform: translatex(400px); 
    transition: all 0.7s ease-out; }

.left-box-sec2-a.animate{opacity: 1; 
    transform: translatex(0); 
  }














.model-sec-a{
  
        position: relative;
    left: 43px;
        width: 129%;
    height: 111%;
    top: -93px
}


.model-sec-a::part( default-progress-bar ){
    display: none;

}


.pic1-sec2-a{
        position: absolute;
    top: 0;
}

.pic2-sec2-a{
        position: absolute;
    bottom: 35px;
    left: 36px;
}






.sec3-a{width: 100%;height: fit-content;overflow: hidden;}

.allinfo-sec3-cont-a{width: 100%;
height: 100%;
display: flex;
justify-content: center;
position: relative;
display: flex;overflow: hidden;
flex-direction: column;    gap: 113px;
flex-direction: column;}

.info2-sec3-a{
padding: 112px 7.9% 0 7.9%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
 
    flex-direction: column;
    align-items: center;
}


.main-box-sec3-a{       max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 97px;}


.header-sec3-a{
    color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 121%; /* 48.4px */
}

.container-sec3-a{
        display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}



.card-sec3-a{display: flex;
flex-direction: column;align-items: center;
gap: 53px;    transform: translatey(500px);
    opacity: 0;
    transition: all 0.8s ease-out;
}


.card-sec3-a.animate {
    transform: translatey(0);
    opacity: 1;
}


.card2-sec3-a{display: flex;
flex-direction: column;align-items: center;
gap: 53px;margin-top: 127px;transform: translatey(500px);
    opacity: 0;
    transition: all 0.8s ease-out;
}

.card2-sec3-a.animate {
    transform: translatey(0);
    opacity: 1;
}



.circle-sec3-a{
    width: 347px;
height: 347px;
border-radius: 50%;
background: var(--design);
background-image: url(pic/pic77.png);
background-position: bottom center;
margin: 0;padding: 0;
}

.circle2-sec3-a{
    width: 347px;
height: 347px;
border-radius: 50%;
background: var(--design);
background-image: url(pic/pic78.png);
background-position: bottom center;
margin: 0;padding: 0;
}

.circle3-sec3-a{
    width: 347px;
height: 347px;
border-radius: 50%;
background: var(--design);
background-image: url(pic/pic79.png);
background-position: bottom center;
margin: 0;padding: 0;
}





.text-box-sec3-a{display: flex;
flex-direction: column;
gap: 20px;
align-items: center;}

.name-sec3-a{color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 26px;
font-style: normal;height: 18px;
font-weight: 700;
line-height: 121%; /* 31.46px */}


.position-sec3-a{color: var(--black-text);

text-align: center;
margin: 0;
font-family: Poppins;
font-size: 26px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 36.4px */}



.card-move-down-sec3 {
  transform: translateY(127px); 
}




.rectangle-sec3-a {
    display: flex;
        width: fit-content;
    padding: 18px 39px;
    box-sizing: border-box;
    flex-direction: row;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    gap: 45px;
    border: 4px solid var(--design);
    transform: translateX(800px);
    opacity: 0;
    background: var(--design);
    transition: all 0.8s 
ease-out;width: 120%;overflow: hidden;
}


.rectangle-sec3-a.animate {
    transform: translateX(-200px);
    opacity: 1;
}

.text-decoration-sec3-b {
    color: var(--bluee);
    margin: 0;
    font-family: Poppins;
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: 121%;
}



.sec4-a{width: 100%;height: fit-content;
background-image: url(pic/pic82.png);
overflow: hidden;background-size: cover;}


.container-info-sec4-a{width: 100%;
height: 100%;
padding: 115px 7.9% 0 7.9%;
box-sizing: border-box;
display: flex;justify-content: center;
}

.main-inf0-sec4-a{display: flex;
flex-direction: column;
    max-width: 1280px;
    width: 100%;padding-bottom: 381.49px;
gap: 100px;position: relative;}

.row1-sec4-a{display: flex;
flex-direction: row;width: 100%;
justify-content: space-between;}

.header-sec4-a{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 40px;
font-weight: 800;
line-height: 121%;}


.para-sec4-a{
        width: 48%;
color: var(--fadedtext);
font-family: Poppins;
font-size: 18px;
font-weight: 500;
line-height: 140%;
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 3;
margin: 0;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; }

.row2-sec4-a{display: flex;
        justify-content: space-between;
flex-direction: row;}

.card-sec4-a{
      width: 32%;
height: 311.129px;
border-radius: 27px;
background: var(--design);
position: relative;
padding: 83px 30px 30px 30px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 30px;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.8s 
ease-out;
}


.card-sec4-a.animate {
    transform: translateX(0);
    opacity: 1;
}





.roww-card-sec4-a{display: flex;
flex-direction: row;align-items: center;
gap: 15px;}


.img-card-sec4-a{
    width: 87px;
    height: 87px;
    margin: 0;
    padding: 0;
    background-image: url(pic/pic83.png);
}

.sub-title-sec4-a{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 28px;
font-style: normal;
font-weight: 600;    width: 30%;
line-height: 140%; /* 39.2px */}


.long-para-sec4-a{
    color: var(--fadedtext);
font-family: Poppins;
font-size: 18px;
font-weight: 500;
line-height: 140%;
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 4;
margin: 0;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; 
}


.img-quo-card-a{position: absolute;
top: 30px;
right: 17px;}

.imgg-deco-sec4-a {
    position: absolute;
    top: 21px;
    left: -167px;
}



.sec5-a{width: 100%;
height: 678.69px;overflow: hidden;}


.cont-info-sec5-a{width: 100%;height: 100%;
padding: 90px 7.9% 0 7.9%;
box-sizing: border-box;display: flex;
justify-content: center;}


.main-info-sec5-a{    max-width: 1280px;
    width: 100%;display: flex;
flex-direction: row;
    justify-content: space-between;}

.right-box-sec5-a{width: 50%;
display: flex;
flex-direction: column;
gap: 80px;}

.sub-box1-sec5-a{display: flex;
flex-direction: column;
gap: 64px;}

.header-sec5-a{color: var(--black-text);
margin: 0;
font-family: Poppins;
font-size: 40px;height: 28px;
font-weight: 800;
line-height: 140%; /* 56px */}

.para-sec5-a{
color: var(--fadedtext);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 500;
line-height: 140%; /* 25.2px */
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 3;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; }


.box-2-sec5-a{display: flex;
    flex-direction: column;
    gap: 17px;
}


.row-sec5-a{display: flex;
    flex-direction: row;
align-items: center;
gap: 28px;
}

.small-tiles-sec5-a{
    color: var(--fadedtext);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 600;
line-height: 121%; /* 21.78px */
}


.left-box-sec5-a{width: 50%;
height: 100%;position: relative;
    transform: translatey(400px);
    opacity: 0;
    transition: all 0.8s 
ease-out;
}


.left-box-sec5-a.animate {
    transform: translatey(0);
    opacity: 1;
}



.left-pic-sec5-a{    position: absolute;
    top: -79px;}


.small-pic-sec5-a{width: 44px;height: 44px;}


.sec6-a{width: 100%;height: fit-content;
background-color: var(--background2);}

.all-info-sec6-a{width: 100%;height: 100%;
padding: 115px 7.9% 93px 7.9%;position: relative;
box-sizing: border-box;display: flex;
justify-content: center;}

.main-info-sec6-a{display: flex;
flex-direction: column;
gap: 97px;
    max-width: 1280px;
    width: 100%;
}


.header-sec6-a{color: var(--black-text);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 140%; /* 56px */}

.box-sec6-a{display: flex;
flex-direction: column;
gap: 30px;width: 100%;
    transform: translatey(400px);
    opacity: 0;
    transition: all 0.8s 
ease-out;
}


.box-sec6-a.animate {
    transform: translatey(0);
    opacity: 1;
}


.smallbox-sec6-a{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;align-items: center;
}

.faqss{color: var(--fadedtext);
margin: 0;
font-family: Poppins;
font-size: 20px;
font-weight: 600;
line-height: 140%; /* 24.2px */}


.plus-sec6-a{width: 45px;
height: 45px;cursor: pointer;}

.line-sec6-a{width: 100%;
height: 2px;
background: var(--fadedtext);}



.link-sec6-a{text-decoration: none;}


.answer-sec6-a {
  display: none;
  color: var(--fadedtext);
  font-family: Poppins;
  font-size: 17px;
  line-height: 140%;
  margin: 0;
}

.answer-sec6-a.show {
  max-height: 200px;
  opacity: 1;
  margin-top: 0;
}

.answer-sec6-a.show {
  display: block;
}


.img-sec6-a{position: absolute;
    top: 67px;
    right: 11%;}

























/* Mobile screen */
@media(max-width: 501px) {

.burger-menu{width: 29.074px;
height: 23.259px;
background-image: url(pic/pic2.svg);
display: block;}
.nav-list{display: none;}
.nav-header{width: 100%;margin: 0;padding: 0;
    height: 122.518px; background-size: cover;position: fixed;
background-image: url(pic/pic1.svg);
        padding: 30px 20px 0 20px;}

.list-burger-menu {
            width: 182px;
    margin: 0;
    padding: 0;
    padding: 30px 20px 40px 30px;
    box-sizing: border-box;
    position: absolute;
    background-color: var(--design);
    display: none;
    top: 52px;
    right: -20px;
    border-radius: 14px;
    display: flex;display: none;
    justify-content: center;height: fit-content;
}


.list-burger-menu.show {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
          display: flex;     height: fit-content;
        justify-content: flex-end;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


.list-mobilee{        display: flex;
        gap: 30px;
        flex-direction: column;
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: fit-content;
        align-items: end;
        justify-content: flex-start;
        padding-right: 11px;
        height: fit-content;
}


.text-decoration {
    font-size: clamp(35px, 11vw, 45px); 
}

.text2-decoration {
    font-size: clamp(35px, 10vw, 45px);
}

.row2-test-deco {
    display: flex;
    flex-direction: row;
    gap: 22px;
    align-items: center;
    white-space: nowrap;
    position: relative;

    left: -140px;
}

.row4-test-deco {
    display: flex;    left: -334px;
        position: relative;    height: 52px;
}






.img-sec1 {
    width: clamp(57px, 12vw, 57px);  
    height: auto;                     
}

.row-test-deco {
    height: 52px;}

.row5-test-deco {
    display: flex;
height: 52px;

}





.button-sec1 {
    border-color: transparent;
    display: flex;
    width: 195px;
    height: 52px;}

.text-button-sec1 {font-style: 16px;}




.header-sec1-cont {
    width: 100vw;
    height: 52px;}


    .row2-test-deco {height: 52px;left: -19%;}


.container-all-text-deco-sec1 {
    display: flex;margin-top: 20%;
    flex-direction: column;
    gap: 53px;}



.row-test-deco,
.row2-test-deco,
.row4-test-deco,
.row5-test-deco,
.header-sec1-cont {
    opacity: 0;
    transform: translateX(300px);
    transition: all 0.8s ease-out;
}


.animate {
    opacity: 1;
    transform: translateX(0);
}

.sec2{width: 100%;height: 983.22px;
background-image: url(pic/pic5.svg);
    background-size: cover;overflow: hidden;
    background-position: center;}



.model-one{
  position: absolute;
        z-index: 1;
        width: clamp(400px, 52vw, 440px);
        height: 391px;
        top: 296px;
}

    
.main-info-sec2 {

                  padding: 40px 20px 0 20px;            gap: 58px;
}





.cont-sec2 {
    width: 100%;
    height: 100%;    padding-top: 85px;
    display: flex;padding: 0;
    justify-content: flex-start;}


.text-box2-sec2 {
    padding-left: 0;}

.para-sec2 {
    color: var(--fadedtext);
    margin: 0;
    font-family: Poppins;
    font-size: 16px;}


.sub-box-sec2 {
    display: flex;
    flex-direction: column;
          gap: 27px;
}


.hedaer-sec2 {
    color: var(--black-text);
    font-family: Poppins;
    font-size: 36px;}


.sec2{width: 100%;height: 1294.63px;
background-image: url(pic/pic12.png);
    background-size: cover;
    background-position: center;}


.main2-sec2 {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
   justify-content: flex-end;
}


.cont-sec2 {
    width: 100%;
    height: 100%;
    display: flex;padding: 0;
    justify-content: flex-start;
}

.lolipop {
        position: absolute;
        right: -44px;
        width: 314.56px;
        bottom: -7px;
        z-index: 1;
}

.circle-sec2 {
border-radius: 50%;
width: 435.24px;
        height: 435.24px;
               margin-top: 213px;
        position: absolute;
     right: 0;
        top: 3%;
        background-color: var(--design);
}

.lolipop2 {
        position: absolute;
        right: -82px;
        top: -181px;
        width: 447.12px;
        height: auto;
}

.lolipop3 {
        position: absolute;
        left: -23px;
        top: -109px;
        width: 370.56px;
}

.www {z-index: 11;height: 68%;}




.container-imgs-sec2 {

    width: 100%;overflow: hidden;
    height: 688.48px;
    display: flex;
    justify-content: center;
        transform: translateX(300px);

    transition: all 0.4s ease-out; 
}




main{width: 100%;}

.text-box1-sec2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;}


.text-box2-sec2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;}

.img-decorations-sec2 {
        position: absolute;
              top: 9px;
        width: 152px;
        transform: rotate(10deg);
        left: 0px;
}

.img2-decorations-sec2 {
    position: absolute;
    bottom: -36%;
    left: 294px;width: 120px;
}

.img3-decorations-sec2 {
    position: absolute;
    top: -170%;
    left: 23px;
    z-index: 1;
}


.container-cards-sec3{
    display: flex;
flex-direction: row;gap: 20px;
display: flex;gap: 20px;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;

}


.card1-sec3{
  width: 57vw;
    order: 2;        margin: 0;
           height:411.31px;
flex-shrink: 0;
border-radius:15px 15px 150px 150px ;
background: var(--design2);
    margin: 0;
display: flex;position: relative;
flex-direction: column; transition: all 0.4s ease-out; 
align-items: center;justify-content: flex-end;
    padding: 0 36px 56px 36px;;box-sizing: border-box;
}

.card2-sec3{
           
        width: 57vw;        height: 411.31px;
    order: 1;    padding: 0 36px 56px 36px; transition: all 0.4s ease-out; 
}


.card3-sec3{
         
        width: 57vw;
     order: 3;
               height: 411.31px;
flex-shrink: 0;
border-radius:15px 15px 150px 150px ;
background: var(--design2);
       margin: 0;
display: flex;position: relative; transition: all 0.4s ease-out; 
flex-direction: column;
align-items: center;justify-content: flex-end;
    padding: 0 36px 56px 36px;;box-sizing: border-box;
}




    .container-cards-sec3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
                 gap: 260px
    }

.model-view2 {
    position: absolute;
         bottom: 316px}

.model-view3 {
    position: absolute;
           bottom:316px;}

.sub-cont-sec {
    display: flex;
    flex-direction: column;
    gap: 152px;}



.model-view2{        width: 68vw;
        height: 349.488px;}


.model-view3{width: 68vw;
        height: 349.488px;}



.header-sec3 {
    color: var(--black-text);
    text-align: center;
    margin: 0;
    font-family: Poppins;
    font-size: 36px;}


.header2-sec3 {
    color: var(--text2);
    text-align: center;
    margin: 0;
    width: 260px;width: 235px;
    font-family: Poppins;
    font-size: 28px;}



.para-sec3 {
    color: var(--fadedtext);
    text-align: center;
    margin: 0;
    font-family: Poppins;
    font-size: 16px;
}
.link-sec3 {
    color: var(--black-text);
    margin: 0;
    font-family: Montserrat;
    font-size: 16px;}

.box2-text-sec3 {
    display: flex;
    flex-direction: column;
    gap: 34px;
    align-items: center;
}

.box-text1-sec3 {
    display: flex;
    flex-direction: column;
    gap: 45px;
    align-items: center;
}

.container-all-info-sec3{padding-bottom: 0;}




.tap1-sec4{
height: 72px;        top: -24px;
        gap: 26px;}

.tap2-sec4{  transform: translateX(130px) rotate(-5.762deg);
height: 72px;left: -5%;gap: 26px;        top: -100px;}
.tap1-sec4, .tap2-sec4 {
    width: 277%;transition: all 0.4s ease-out; }

.text-in-tap-sec4 {font-size:25px ;}



.container-taps-sec4 {
    width: 100%;
    height: 100px;}

.main-info-sec4 {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 98px;margin-bottom: 253px;
    padding: 0 20px 0 20px;}


.card1-sec4

 {padding: 0 5.3% 37px;
    width: 100%;height: 343px;}

.card2-sec4 {padding: 0 5.3% 37px;
    width: 100%;height: 343px;}

.header-sec4 {
    color: var(--black-text);
    margin: 0;
    font-family: Poppins;
    font-size: 40px;
    font-style: normal;
    width: 35%;}


.row2-sec4 {
    display: flex;
    flex-direction:column;
    gap: 20px;        row-gap: 145px;

}
.main2-sec4 {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: fit-content;
    row-gap: 187px;}


.container-sec4 {
    width: 100%;    background-image: url(pic/pic19.png);
    height: fit-content;}

.row1-sec4 {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
}

.header-sec4 {
        width: 100%;}


.para-sec4 {
    width: 100%;}

    .header-sec4 {

        font-size: 36px;}


.para-sec4 {
    color: var(--black-text);
    margin: 0;
    font-family: Poppins;
    font-size: 16px;}
.sub-hedaer-sec4 {
    width: 306.297px;
    color: var(--black-text);
    text-align: center;
    margin: 0;
    font-family: Montserrat;
    font-size: 28px;}
.para2-sec4 {
    color: var(--fadedtext);
    text-align: center;
    font-family: Poppins;
    font-size: 16px;}


 .dec2-sec4 {
                   left: -3%;
        width: 87.72px;
                top: -111px;
        height: 90px;
}
 .dec1-sec4 {
  top: 113px;
        z-index: 1;
        transform: rotate(-127.049deg);
        left: 75%;
        width: 125.21px;
        height: 123px;
}


.dec3-sec4 {
    position: absolute;
    bottom: -91px;
    width: 75.69px;
    left: -3%;
}


.button-sec4{
display: flex
;}

.button2-sec4{display: flex}






.model-sec4-2{   position: absolute;
   ;display: block;

            top: -228px;
                    width: 422.19px;
        display: block;
   height: 360.921px;
        top: -172px;}



.model-sec4-1{    position: absolute;
   ;display: block;

            top: -228px;
                    width: 422.19px;
        display: block;
   height: 360.921px;
        top: -172px;}








  .card-cont-sec5 {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }



.para3-sec5 {
  display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;font-size: 16px;
  text-overflow: ellipsis;
}


  .cont2-sec5 {
    padding-top: 66px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .card-cont-sec5 {
    display: flex;flex-direction: column;
    gap: 20px;
  }

.card1-sec5 {
        flex: 1 1 100%;height: 234px;    gap: 27px;
        width: 100% ;transition: all 0.4s ease-out;
    }

.card2-sec5 {
        flex: 1 1 100%;height: 234px;    gap: 27px;transition: all 0.4s ease-out;
        width: 100% ;    padding: 22px 30px;height: 280.264px;
    }


.hedaer-sec5 {
    font-size: 36px;
}


.para-sec5 {
 
    font-size: 16px;
}



.sub-headers-sec5 {
    font-size: 28px;}

.para2-sec5 {

    font-size: 16px;}


.circles-sec5 {
    display: flex;
    width: 83px;
    height: 83px;}

.card-conttt-sec5{gap: 100px;}



.imgbig-sec5 {
    position: absolute;
    right: -33%;
    top: 15%;
    height: 452.404px;
    transform: rotate(10deg);
}

.imgbig2-sec5 {
    position: absolute;
    left: -146px;
    top: 273px;
    z-index: -1;
    width: 432.23px;
    height: 469.144px;
    transform: rotate(1.732deg);
}



.part2-sec5{width: 100%;
}


.cont2-sec5 {
    margin-bottom: 80px;}



.sec6 {
    width: 100%;
    height: fit-content;}

.cont-info2-sec6 {
           padding: 57px 20px 107px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;}

.colum-form-sec6 {
    display: flex;
    flex-direction: column;margin-bottom: 0;
    gap: 97px;
    width: 100%;}

.imgs-cont {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    top: 27px;
    height: 483px;
}
.big-circle-sec6 {
    width: 518.31px;
    height: 518.31px;
    position: absolute;
    flex-shrink: 0;
    border-radius: 409.31px;
    background: var(--design);
}
.row-big-sec6 {
    display: flex;
    flex-direction: column;}



.imgs-cont {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        top: 27px;
                height: auto;

        display: flex;
        flex-direction: column;
    }

.big-circle-sec6 {
        height: 518.31px;
        position: relative;
        flex-shrink: 0;
        border-radius: 409.31px;
        background: var(--design);
        left:3%;
        align-self: center;
    }


 .row-big-sec6 {
    max-width: 100% !important;   
    width: 100%;
    flex-direction: column;      
    gap: 40px;
  }




.big-circle-sec6{        width: 344.79px;
        height: 344.79px;
}

.img1-sec6{width: 417px;}
.img2-sec6{width: 194px;}
.img3-sec6{ width: 307px;bottom: -24px;        left: 119px;}




.colum-form-sec6 {
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
    margin-top: 46.27px;
}


.cont2-sec6 {
    display: flex;
    flex-direction: column;
    gap: 46px;
}



.img1-sec6{        width: 350.63px;}
.img2-sec6{        width: 162px;}
.img3-sec6{         width: 283px;;bottom: -24px;}

.header-sec6 {
    font-size: 36px;}

.para-sec6 {
    font-size: 16px;}
.input-sec6::placeholder {
font-size: 16px;}

.input-sec6 {
    padding: 0 0 0 5%;}




.text-cta-sec6 {
    font-size: 16px;}

.main-info-footer {
    width: 100%;
                padding: 144px 20px 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}


.whitepart {
    width: 1299px;
    background-color: var(--white);
    box-sizing: border-box;
    height: 47.9px;
    width: 100%;
    padding: 0 20px;}


.row1-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
     gap: 114px;
}

.icons-cont-footer {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
}

.box2-footer {
    display: flex;
    flex-direction: column;
    gap: 53px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    align-items: center;
}


.box1-footer {
    display: flex;
    flex-direction: column;
    gap: 25px;
}


    .box2-footer {
        display: flex;
        flex-direction: column;
        gap: 35px;}


.list-small-footer {
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: center;}




.all-info-footer {    gap: 50px;
           width: 314px;}




.main2-info-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 86px;
    align-items: center;
}


.text-contact {
    text-align: center;
}



.main-navs-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;gap: 50px;
    padding: 0;        align-items: center;
}

.box4-footer {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: fit-content;
    align-items: center;
    gap: 35px;
}

.box4-footer {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: fit-content;
    align-items: center;
    gap: 35px;
    text-align: center;
}



    .whitepart {
        width: 1299px;
        flex-direction: column;
        background-color: var(--white);
        box-sizing: border-box;
        height: 86.48px;
        width: 100%;
        padding: 20px 20px;}





.footer{background-position: center;
background-size: cover;background-image: url(pic/pic39.png);}
.footer-p{background-position: center;
background-size: cover;background-image: url(pic/pic39.png);}

.card2-delay {
    transition-delay: 0s; 
}
.small-navs-container {
    align-items: center;
}
        


.sec1-cont2-info-p {
    width: 100%;
           padding: 64px 20px 0;}



.container-hero-products {
display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        height: 698px;
}

.img-heroo-sec1-products {
position: absolute;left: -31%;bottom: 0;top: 104px;width: clamp(580px, 77vw, 815px);
}

.sec1-products {
    width: 100%;
    height: 100vh;}



.row2-decoration-bg-sec1-p {
    bottom: 87px;}


.text-box-p {
    display: flex;
    flex-direction: column;
        gap: 43px;
    position: relative;z-index: 1;
       transform: translateX(-200px); 
        opacity: 0;
 transition: all 0.3s ease-out;
             padding-top: 50px;


    width: 557px;}


.text-box-p.animate {
    transform: translateX(0); 
    opacity: 1;
}


.sec1 {
    width: 100%;
    height: 100vh;
}






.header-sec1-p {
                     font-size: 46px;        height: 49px;
}


.serachbar-p {        width: 325.92px;
        height: 48px;position: relative;
}

.search-input-p {
             font-size: 16px;}

.img-circle-sec1-p {
        right: 0;
        left: 0;
        bottom: -282px;
        width: 142px;

}

.text-in-row-sec1-p {
font-size: 46px
}
.container-background-sec1-p {
          height: 625px;
        top: 139px;
}

.img-sec1-p{ 
    
            left: 0;
        width: 815px;
        width: clamp(65vw, 67vw, 815px);
        position: absolute;
        bottom: 0; transform: translateX(0);
        left: 300px; transition: all 0.3s ease-out;
}


.img-sec1-p.animate {
    left: 29%;
}



.row-decoration-bg-sec1-p {
    gap: 14px;
left: 400px; }


.row-decoration-bg-sec1-p.animate {
    left: -20px;
}


.row2-decoration-bg-sec1-p {
    gap: 14px;
left: 400px; }


.row2-decoration-bg-sec1-p.animate {
    left: -20px;
}





.card2-sec2-p {

            width: 86%;;transform: translateX(130px);
  transition: all 0.3s ease-out;
}

.card2-sec2-p.animate {
transform: translateX(0);gap: 30px;
  opacity: 1;
}


.card3-sec2-p {
          width: 90%;
transform: translateX(-130px);margin-top: 0;
  transition: all 0.3s ease-out;gap: 30px;
}

.card3-sec2-p.animate {
transform: translateX(0);
  opacity: 1;
}


.main-info-sec2-p {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
}


.card1-sec2-p {
        width: 86%;
transform: translateX(-130px);
  ;gap: 30px;
  transition: all 0.3s ease-out;
}

.card1-sec2-p.animate {
transform: translateX(0);
  opacity: 1;
}


.container-model-1-sec2-p {
        width: 230px;
        height: 294px;;position: relative;z-index: 1;
}

.model1-sec2-p {
   width: 182%;
        height: 141%;
        position: relative;
        bottom: 60px;
        right: 108px;
}

.container2-model-1-sec2-p {
         width: 237px;
    height: 498px;
}
.model2-sec2-p {
        width: 184%;
        height: 83%;
        position: relative;
        bottom: 122px;
        right: 25%;
        top: 2%;
}


.container3-model-1-sec2-p {
         width: 263.76px;
        height: 206px;
}
.model3-sec2-p {
width: 164%;
        height: 179%;
        position: relative;
        bottom: 131px;
        left: -115px;
    
}

.img4-sec2-p-deco {
    position: absolute;
    top: -39%;
    right: 40%;
}


.box2-sec2-p {
    display: flex;
    flex-direction: column;
    width: 53%;
    margin-top: 36%;}


.container3-model-1-sec2-p {
    position: relative;
    z-index: 1;
}


    .img4-sec2-p-deco {
        position: absolute;
        top: -60%;
        right: 46%;
        width: 89.58px;
    }

.img2-sec2-p-deco {
        position: absolute;
        top: 81%;
        right: -9%;
        width: 73.12px;
}


.header-sec2-p {
    font-size: 36px;}

.sub-header-sec2-p {

    font-size: 28px;}

.para-sec2-p {
    font-size: 16px;display: flexbox;
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

.sub2-header-sec2-p {
    font-size: 28px;}

.para2-sec2-p {
    font-size: 16px;display: flexbox;
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

.box-sec2-p {
    display: flex;
    flex-direction: column;
    width: 53%;
    margin-top: 14%;
    gap: 40px;
}

.img-sec2-p-deco {
         position: absolute;
        top: -18%;
        right: 42%;
        width: 125.47px;
}

.img3-sec2-p-deco {
    position: absolute;
    top: 5%;
    right: 33%;
    width: 113.12px;
}

.box3-sec2-p {
    display: flex;
    flex-direction: column;
    width: 44%;
    margin-top: 0;}


.container-info-sec2-p {
    gap: 74px;
}


.container-info-sec2-p {
    padding: 85px 0 85px 0;}


.cta-text-sec2-p {
    font-size: 16px;
}

.button-sec2-p {
    height: 52px;
}


.container2-sec3-p {
    max-width: 100%;    gap: 76px;
    width: 100%;}

.card-sec3-p {
    width: 100%;}


.card-sec3-p {
    width: 100%;
          height: 560.04px;
  padding: 22px 22px 34px 22px;gap: 32px;
}

.card2-sec3-p {
    width: 100%;
           height: 560.04px;gap: 32px;
   padding: 22px 22px 34px 22px;
        flex-direction: column;        justify-content: flex-end;
    gap: 40px;
}
.main-cont-sec3-p {
    display: flex;gap: 35px;
    flex-direction: column;}

.container-vertical-cards-sec3-p {
    display: flex;
    flex-direction: column;
    gap: 35px;
    width: 100%;}

.sub2-header-sec3-p {
    color: var(--black-text);
    text-align: center;font-size: 28px;
    margin: 0;}

.para2-sec3-p {
    color: var(--fadedtext); font-size: 16px;
    text-align: center;}

.container-text2-sec3-p {
    gap: 40px;gap: 32px;
    width: 100%;
}
.model2-sec3-p-cont {

    width: 100%;
    height: 283.78px;

}
.model2-sec3-p {
    width: 102%;
    height: 115%;}
.link2-nav-sec3-circle-p {
width: 75px;
    height: 75px;

top: 22px;
        right: 22px;}


.arrow2-sec3-p {
   width: 54.622px;}

.model3-sec3-p-cont {
    width: 100%;
    height: 283.78px;
}

.model3-sec3-p {
    width: 87%;
    height: 135%;
    position: relative;
    bottom: 13%;         right: -6.6%;
}


.link-nav-sec3-circle-p {
width: 75px;
    height: 75px;

top: 22px;
        right: 22px;}


.container-sec3-p {
    padding: 85px 20px;}

.header-sec3-p3 {
    font-size: 36px;}

.text-small-sec3-p {
    font-size: 16px;}


.sub-header-sec3-p {
    font-size: 28px;}




.para-sec3-p {
    font-size: 16px;}



.arrow-sec3-p {
    width: 54.622px;}



.container-model1-sec3-p {
    width: 100%;
    height: 283.78px;
}





.container-sec4-p {
    padding: 85px 20px 0;}


.container-infoo-sec4-p {
    height: 100%;
    width: 100%;}




.container-infoo-sec4-p {
    height: 142%;
    width: 100%;}

.model-sec4-p {
    width: 100%;
    max-width: 100%;
    height: 444px;
    top: 75px;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.HotspotAnnotation {
    border-radius: 4px;
    padding: 1em 1.3em;
    position: absolute;
    transition: all 300ms linear;
        left: -214%;
        top: 323%;
    transform: translate(10px, -50%);
    width: fit-content;
    overflow-wrap: break-word;
}


.HotspotAnnotation:hover{
        display: flex;
    justify-content: right;
font-family: Poppins;width: 143px;}
.HotspotAnnotation:hover .cont-para1-sec4{display: block;bottom: -105px;}

.HotspotAnnotation:hover .font-hotspottt {

   width: 143px;
}



.Hotspot.active .HotspotAnnotation .cont-para1-sec4 {
    display: block; bottom: -105px;
}

.Hotspot.active .HotspotAnnotation .font-hotspottt {
    width: 143px;
}
.para1-sec4-p {
    color: var(--fadedtext);
    margin: 0;
    text-align: right;
    font-family: Poppins;
    width: 143.945px;
    height:66px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    display: -webkit-box;
    display: box;
    display: flexbox;font-size: 16px;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pic3-sec4-p
 {
     position: absolute;
    top: -123px;
    left: 39px;
    width: 91px;
}

.pic1-sec4-p {
position: absolute;right: 46px;top: 102px;width: 46px;z-index: -1;
}
.Hotspot3{

  left: 50px;}

.Hotspot2Annotation {
    border-radius: 4px;
    padding: 1em 1.3em;
    position: absolute;
    right: 44%;
    bottom: 289%;
    transition: all 300ms 
linear;
    transform: translate(-10px, -10px);
    width: fit-content;
    overflow-wrap: break-word;
}

.Hotspot2 {
  left:234%;
  height: 30px;
  padding: 8px;
  margin-bottom: 0;
}

.font2-hotspottt {
    color: var(--black-text);
    font-family: Poppins;
    margin: 0;
    font-size: clamp(20px, 20px, 22px);
    font-weight: 600;
    width: 157px;
    text-align: left;
}


.Hotspot2Annotation:hover{
        display: flex;
    justify-content: left;
font-family: Poppins; width: 156px;}
.Hotspot2Annotation:hover .cont-para2-sec4{display: block; bottom: -84px;}

.Hotspot2Annotation:hover .font2-hotspottt {

   width: 156px;
}

.Hotspot2.active .Hotspot2Annotation .cont-para2-sec4 {
    display: block; bottom: -84px;
}

.Hotspot2.active .Hotspot2Annotation .font2-hotspottt {
    width: 156px;
}

.para2-sec4-p {
    color: var(--fadedtext);
    margin: 0;
    text-align: left;
    font-family: Poppins;
    line-clamp: 2;font-size: 16px;
    -webkit-line-clamp: 2;
    width: 156px;}


.Hotspot3Annotation {

    right: 92%;transform: translateY(0%);width: 143px;
    bottom: 251%}

    
.font3-hotspottt {
    width: 143px;}


.pic2-sec4-p
 {
           position: absolute;
        transform: rotate(36deg);
 bottom: -78px;
           right: 42px;
        z-index: -2;
        width: 62px;
        
}


.Hotspot3Annotation:hover{
        display: flex;
    justify-content: left;transform: translateY(0%);
font-family: Poppins; width: 143px;z-index: 1;
}
.Hotspot3Annotation:hover .cont-para3-sec4{display: block;
bottom: -85px;}

.Hotspot3Annotation:hover .font3-hotspottt {

    width: 143px;
}





.Hotspot3.active .Hotspot3Annotation .cont-para3-sec4 {
    display: block;   bottom: -85px;
}
.Hotspot3.active{z-index: 1;transform: translateY(0%);}



.Hotspot3.active .Hotspot3Annotation .font3-hotspottt {
    width: 143px;
}

.para3-sec4-p {
    color: var(--fadedtext);
    margin: 0;font-size: 16px;
    text-align: left;
    font-family: Poppins;
        line-clamp: 2;
    -webkit-line-clamp: 2;
    width: 143px;}

.yellow-rect-sec4-p {
      width: 249.013px;
        height: 473.9px;}

   
    
.sec4-p {
    width: 100%;
    height:954.04px;
    background-image: url(pic/pic56.png);
    background-size: cover;
}




.header-sec4-p {
    font-size: 36px;}



.font-hotspottt{ 
      width: 143px; 
  }

.model-sec4-p{

 transform: translatey(300px);
  transition: all 0.4s ease-out;
}







.cont-info-sec5-p {
    width: 100%;
    height: 100%;
    padding: 85px 20px 84px 20px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.sec5-p {
    width: 100%;
    height: fit-content;}

.main-info-sec5-p {
    max-width: 1280px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.box-right-sec5-p {
    display: flex;
            width: 100%;
}

.img-cont-sec5-p {
margin: 0;
        padding: 0;
        position: relative;
        left: 20%;
        bottom: 0; transform: translateX(140px);
 
  transition: all 0.3s ease-out;
}

.img-cont-sec5-p.animate {
  left: 20%;transform: translateX(0);
  opacity: 1;
}


.header-sec5-p {
    font-size: 36px;
}
.para-sec5-p {
    color: var(--black-text);
    font-family: Poppins;
    font-size: 16px;}

.cta-sec5-p {
    display: flex;
    width: 307px;
    height: 52px;
        width: 196px;;}

.text-sec5-p {
    font-size: 16px;}

.sub-box-sec5-p {
    gap: 45px;
}

.imggg-sec5-p {
    display: block;
    width: 459.44px;
}


.header-sec1-a {padding-top: 0;bottom: 55%;
    font-size: 46px;}

.header-sec1-b {padding-top: 0;transform: translatey(200px); 
    font-size: 46px;}


.text-decor-bg-sec1-b {
    font-size: 46px;}

.row1-sec1-b {
    top: 250px;}

.row2-sec1-b {
    bottom: 394px;}

.img-sec1-b {
    width: 821px; transition: all 0.3s ease-out; width: 700px;
}





.cont-info-sec2-b {
    padding: 85px 20px 0 20px;}

.sec2-b {
    width: 100%;
    height: fit-content;}

.container2-sec2-b {
    display: flex;
    flex-direction: column;
            gap: 30px;
}
.big-cont-sec2-b {
            gap: 65px;
}

.colum1-sec2-b {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}


.colum2-sec2-b {
    display: flex;
    width: 100%;}

.colum2-sec2-b {
 transform: translateX(120px);
 transition: all 0.3s ease-out;
            margin-bottom: 200px;
}

.bg-img-sec2-b {
            width: 111%;    bottom: 2%;
        min-width: 851px;}



.rectangle-sec2-b{display: flex;
position: absolute;bottom: 0;
padding: 11px 24px;
box-sizing: border-box;
flex-direction:row;white-space: nowrap;
justify-content: center;
align-items: center;
gap: 28px;    
border: 4px solid var(--design);
 transform: translateX(400px); opacity: 0;
background: var(--design);  transition: all 0.8s ease-out;
}

.rectangle-sec2-b.animate {
 transform: translateX(-20px); ;
  opacity: 1;
}



.text-decoration-sec2-b {
  
    font-size: 25px;}



.header-sec2-b {
    font-size: 36px;}


.para-sec2-b {
    font-size: 16px;}



.card1-sec2-b {
    height: fit-content;
    gap: 20px;
    flex-shrink: 0;
    position: relative;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}











.para-2-sec2-b {

    font-size: 16px;
    order: 2;
}

.img-card-sec-b {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 157.008px;
}
.circle2-sec2-b {
    right: 23px;
    left: auto;
}











.container-sec3-b {
    padding: 85px 20px 0 20px;}





.main-info-sec3-b {
    display: flex;
    flex-direction: column;
        gap: 237px;
    max-width: 100%;}

.container2-model-sec3-b {
        width: 100%;
        height: 462px;
        align-self: center;
        position: absolute;
        left: 0%;
        right: 0;
        bottom: 48%;
}

.container-model-sec3-b {
        width: 100%;
        height: 462px;
        align-self: center;
        position: absolute;
        left: 0%;
        right: 0;
        bottom: 48%;
}

.container3-model-sec3-b {
         width: 100%;
        height: 462px;
        align-self: center;
        position: absolute;
        left: 0%;
        right: 0;
        bottom: 48%;
}

.card1-sec3-b {width: 100%;
     border-radius: 65px;
        height: 416.66px;
             padding: 0 28px 50px 28px;
              transform: translateX(120px);opacity: 0;
 transition: all 0.3s ease-out;
}


.model-sec2-b{width: 100%;height: 100%;
 transform: translateX(-120px);opacity: 0;
 transition: all 0.3s ease-out;
}


.card2-sec3-b {
   width: 100%;
        height: 416.66px;  border-radius: 65px;
                padding: 0 28px 50px 28px;
               transform: translateX(-120px);opacity: 0;
 transition: all 0.3s ease-out;}


.text-box-sec3-b {
    width: 100%;    align-self: self-end;
        gap: 20px;
}


.sub-text-box-sec-b {
    display: flex;
    flex-direction: column;
            gap: 30px;;}

.container-row-sec3-b {
    gap:205px;
}


.sec3-b {
    width: 100%;
    height: fit-content;
    padding-bottom: 85px;
    box-sizing: border-box;
}



.header-sec3-b {
    font-size: 36px;}

.titles-sec3-b {
    font-size: 28px;}
.para-sec3-b {

    font-size: 16px;
    line-clamp: 3;
    margin: 0;
    -webkit-line-clamp: 3;}

.link-sec3-b {
    font-size: 16px;}











.main-inf0-sec4-b {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: left;
        gap: 5px;
}


.container-img-sec4-b {
    position: relative; transition: all 0.4s ease-out;
    width: 100%;        align-self: center;
   min-width: 400px;}


.sec4-b {
    width: 100%;
    background-image: url(pic/pic71.png);
    background-size: cover;
    height: fit-content;
}


.container-info-sec4-b {
    width: 100%;
    height: 100%;
       padding: 85px 20px 190px 20px;;}


.text-box-sec4-b{

    width: 100%;
        gap: 30px;}



.yellow-rect-sec4-b {
    width: 67%;
    position: absolute;
    height: 87%;}

.header-sec4-b {
    font-size: 36px;}

.para-sec4-b {
    font-size: 16px;}

.img-sec4-b {
    width: 100%;}




.sec5-b {
    width: 100%;
    height: fit-content;}

.container-rect-sec5-b{width: 100%;    
    width: 100%;
    display: flex;
       justify-content: space-between;flex-direction: column;
    align-items: center;position: relative;
            height: 884px;
    }


.rect1-sec3-b {
    margin: 0;
    display: flex;
    flex-direction: row;
    height: 84.373px;
    transform: rotate(-6.115deg);
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 36%;
    min-width: 361.312px;
    border-radius: 70px;
    background: var(--design);
    position: relative;
    top: 0;order: 2;
    left: 0;
}


.rect2-sec3-b {
    margin: 0;
    display: flex;
    flex-direction: row;
    height: 84.373px;
    transform: rotate(15.003deg);
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 39%;
    min-width: 417.031px;
    border-radius: 70px;
    background: var(--design);
    position: relative;
    top: 0;order: 1;
    right: 0;
}


.rect3-sec3-b {
    margin: 0;
    display: flex;
    flex-direction: row;
    height: 84.373px;
    transform: rotate(15.003deg);
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 38%;
    min-width: 422px;order: 3;
    border-radius: 70px;
    background: var(--design);
}


.rect4-sec3-b {
    margin: 0;
    display: flex;
    flex-direction: row;
    height: 84.373px;
    transform: rotate(11.454deg);
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 36%;
    min-width: 405px;
    border-radius: 70px;
    background: var(--design);
    position: relative;
    bottom: 0;order: 5;
    left: 0;
}

.rect5-sec3-b {
    margin: 0;
    display: flex;
    flex-direction: row;
    height: 84.373px;
    transform: rotate(-17.093deg);
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 36%;
    min-width: 400px;
    border-radius: 70px;
    background: var(--design);
    position: relative;
    bottom: 0;order: 4;
    right: 0;
}

@keyframes randomMove1 {
  0%   { transform: translate(0,0) rotate(-6deg); }
  25%  { transform: translate(45px, 1px) rotate(-3deg); }
  50%  { transform: translate(-45px, -1px) rotate(-10deg); }
  75%  { transform: translate(35px, 0px) rotate(-5deg); }
  100% { transform: translate(0,0) rotate(-6deg); }
}

@keyframes randomMove2 {
  0%   { transform: translate(0,0) rotate(15deg); }
  25%  { transform: translate(-50px, 1px) rotate(20deg); }
  50%  { transform: translate(45px, -1px) rotate(12deg); }
  75%  { transform: translate(-35px, 0px) rotate(18deg); }
  100% { transform: translate(0,0) rotate(15deg); }
}

@keyframes randomMove3 {
  0%   { transform: translate(0,0) rotate(10deg); }
  25%  { transform: translate(50px, 1px) rotate(5deg); }
  50%  { transform: translate(-40px, -1px) rotate(14deg); }
  75%  { transform: translate(35px, 0px) rotate(8deg); }
  100% { transform: translate(0,0) rotate(10deg); }
}

@keyframes randomMove4 {
  0%   { transform: translate(0,0) rotate(11deg); }
  25%  { transform: translate(-45px, 1px) rotate(8deg); }
  50%  { transform: translate(40px, -1px) rotate(14deg); }
  75%  { transform: translate(-30px, 0px) rotate(10deg); }
  100% { transform: translate(0,0) rotate(11deg); }
}

@keyframes randomMove5 {
  0%   { transform: translate(0,0) rotate(-17deg); }
  25%  { transform: translate(50px, -1px) rotate(-12deg); }
  50%  { transform: translate(-45px, 1px) rotate(-22deg); }
  75%  { transform: translate(35px, 0px) rotate(-15deg); }
  100% { transform: translate(0,0) rotate(-17deg); }
}

.main-info-sec5-b {
    padding: 85px 20px 85px 20px;}



.hedaer-sec5-b {
    font-size: 36px;}


    .rect2-sec3-b {
        height: 79px;
        width: 382.79px;
        min-width: 0;}


.titles-sec5-b {
    font-size: 24px;}


.rect1-sec3-b {
        height: 79px;
        min-width: 331.61px;}


.rect3-sec3-b {
        height: 79px;
        min-width: 379.87px;}

.rect5-sec3-b {

        height: 79px;
        min-width: 361.7px;}

.rect4-sec3-b {

        height: 79px;
        min-width: 364.5px;}







.img-sec1-a {
left: -350px;
    opacity: 1;
    width: clamp(200px, 99vw, 704px);
       
        transform: rotate(708deg);
}


.img2-sec1-a {
right: -350px;
    width: clamp(200px, 99vw, 704px);
      opacity: 1;
      
        transform: rotate(-708deg);
}




.img-sec1-a.animate{opacity: 1; 
left:-55px; bottom: 24px;}



.img2-sec1-a.animate{opacity: 1; 
 right: -55px;bottom: 24px; }












.cont-nfo-sec-a {
    width: 100%;
    height: 100%;
           padding: 85px 20px 85px 20px;}


.main-info-sec2-a {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
            gap: 74px;
}


.sec2-a {

    background-size: cover;}


.rightb0x-sec2-a {
    width: 100%;           gap: 50px;
}

.para-group-sec2-a {
    display: flex;
    flex-direction: column;
            gap: 32px;
    width: 100%;
}


.left-box-sec2-a {
        width: 100%;
        height: 540px;
    position: relative;
    align-self: flex-end;
     transform: translatex(120px); 
    transition: all 0.3s ease-out;
}

.model-sec-a {
    position: relative;
    left: 43px;
    width: 129%;
    height: 111%;
    top: -48px;
}



.yello-box-sec2-a {
    padding: 23px 0;height: fit-content;
    box-sizing: border-box;
}

.row-sec2-a {
    display: flex;        width: 100%;
    flex-direction: column;padding: 0 23px;
    gap: 18px;}

.sub-col-sec2-a {

    gap: 15px;}


.line-sec2-a {
    width: 100%;
    height: 2px;}

.header-sec2-a {
    font-size: 36px;}

.para-sec2-a {
    font-size: 16px;}
.colum-sub-sec2-a {
    display: flex;
    flex-direction: column;
    gap: 32px;
}


.sub-header-sec2-a {

    font-size: 28px;
}

.para-sectence-sec2-a {
    font-size: 16px;
}









.main-box-sec3-a {
    max-width: 100%;
gap: 82px;}



  .container-sec3-a {
    max-width: 1250px;    
    margin: 0 auto;
    flex-direction: column; 
        gap: 30px;   
  }
.card-sec3-a,
.card2-sec3-a {
    flex: 1 1 347px;   transition: all 0.3s ease-out;
}


.main-box-sec3-a{
    max-width: 1280px;
width: 100%;
}
.card2-sec3-a {
    margin-top: 0;
gap: 20px;}


.card-sec3-a {
    gap: 20px;}





.rectangle-sec3-a {

    transform: translateX(300px);
        transition: all 0.4s 
ease-out;

}


.rectangle-sec3-a.animate {
    transform: translateX(-40px);
    opacity: 1;
}



.info2-sec3-a {
    padding: 85px 20px 0 20px;}




.header-sec3-a {
    font-size: 36px;
}
.name-sec3-a {
    font-size: 24px;}


.position-sec3-a {
    font-size: 24px;
}

.text-decoration-sec3-b {

    font-size: 25px;
}

.rectangle-sec3-a {
    gap: 28px;}



.allinfo-sec3-cont-a {
    gap: 75px;}





.main-inf0-sec4-a {
    max-width: 100%;
    width: 100%;    gap: 84px;
        padding-bottom: 313.49px;
}

.row2-sec4-a {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 20px;
}

.container-info-sec4-a {
    width: 100%;
    height: 100%;
            padding: 85px 20px 0 20px;}


.card-sec4-a {
    width: 100%;
    height: 280.76px;
    padding: 62px 20px 20px 20px;
    transform: translateX(120px);
    opacity: 0;
    transition: all 0.3s }

.row1-sec4-a {
    display: flex;
    flex-direction: column;
 gap: 30px;}

.para-sec4-a {
    width: 100%;}

.sec4-a {
    width: 100%;
    height: fit-content;
    background-image: url(pic/pic88.png);}

.imgg-deco-sec4-a {

            position: absolute;
        top: 143px;
        left: -42px;
        width: 99px;
}

.header-sec4-a{
   
    font-size: 36px;
 }
.para-sec4-a {
    font-size: 16px;
}

.sub-title-sec4-a {
    font-size: 24px;
width: 56%;}

.long-para-sec4-a {
    font-size: 16px;
    height: 63px;}



.cont-info-sec5-a{width: 100%;height: 100%;
padding: 85px 20px 0 20px;
box-sizing: border-box;display: flex;
justify-content: center;}

.main-info-sec5-a {
    flex-direction: column;
        gap: 7px;}



.sec5-a {
    width: 100%;
    height: fit-content;}

.left-box-sec5-a {
        width: 100%;
        height:457.61px;
        min-width: 0;}

.right-box-sec5-a {
           width: 100%;
            gap: 50px;}

.left-pic-sec5-a {
        position: absolute;
        top: -18px;
        width: 106%;
        left: -11px; transition: all 0.3s ease-out;
                min-width: 474px;
}

.header-sec5-a {
    font-size: 36px;}

.para-sec5-a {
    font-size: 16px;
}

.sub-box1-sec5-a {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.small-tiles-sec5-a {
    font-size: 16px;}


.small-pic-sec5-a{width: 35px;
height: 35px;}



.all-info-sec6-a {
    width: 100%;
    height: 100%;
    padding: 85px 20px 85px 20px;}


.header-sec6-a {
    font-size: 36px;
}


.main-info-sec6-a {
    gap: 44px;}


.box-sec6-a {
    gap: 24px;
    transition: all 0.3s 
ease-out;}

.faqss {
    font-size: 18px;}




.text-in-rowww{
font-size: 14px;
text-align: center;}




.rect1-sec3-b { animation: randomMove1 3s infinite ease-in-out; }
.rect2-sec3-b { animation: randomMove2 4s infinite ease-in-out; }
.rect3-sec3-b { animation: randomMove3 2.5s infinite ease-in-out; }
.rect4-sec3-b { animation: randomMove4 3.5s infinite ease-in-out; }
.rect5-sec3-b { animation: randomMove5 4.5s infinite ease-in-out; }

.img-sec6-a {
    position: absolute;
    top: 28px;
    right: 3%;
    width: 91px;
}



}









































/* Tablet screen */
@media (min-width: 501px) and (max-width: 900px) {

.burger-menu{width: 29.074px;
height: 23.259px;
background-image: url(pic/pic2.svg);
display: block;}
.nav-list{display: none;}

.nav-header{width: 100%;margin: 0;padding: 0;
height: 117.518px; background-size: cover;position: fixed;
background-image: url(pic/pic1.svg);
        padding: 30px 7.3% 0 7.3%;      }



.list-burger-menu {
            width: 182px;
    height:fit-content;
    margin: 0;
    padding: 0;
    padding: 30px 64px 40px 30px;
    box-sizing: border-box;
    position: absolute;
    background-color: var(--design);
    display: none;
    top: 52px;
    right: -64px;
    border-radius: 14px;
    display: flex;display: none;
    justify-content: center;
}


.list-burger-menu.show {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
          display: flex;        height:fit-content;
        justify-content: flex-end;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


.list-mobilee{        display: flex;
        gap: 30px;
        flex-direction: column;
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: fit-content;
        align-items: end;
        justify-content: flex-start;
        
        height: fit-content;
}



.text-decoration {
    font-size: clamp(45px, 11vw, 77px); 
}

.text2-decoration {
    font-size: clamp(45px, 10vw, 77px);
}

.row2-test-deco {
    display: flex;
    flex-direction: row;
    gap: 22px;
    align-items: center;
    white-space: nowrap;
    position: relative;
    height: 55px;
           left: -19%;

}

.row4-test-deco {
    display: flex;
        position: relative;    height: 55px;
}


.img-sec1 {
    width: clamp(57px, 12vw, 98px);  
    height: auto;                     
}


.row-test-deco {
    height: 55px;}


.row5-test-deco {
    display: flex;
height: 55px;

}




.header-sec1-cont {
    width: 100vw;
    height: 55px;}

.container-all-text-deco-sec1 {
    display: flex;
    flex-direction: column;
    gap: 53px;}




.row-test-deco,
.row2-test-deco,
.row4-test-deco,
.row5-test-deco,
.header-sec1-cont {
    opacity: 0;
    transform: translateX(300px);
    transition: all 0.8s ease-out;
}


.animate {
    opacity: 1;
    transform: translateX(0);
}


.sub-cont-sec{width: 100%;}




.sec2{width: 100%;height: 983.22px;
background-image: url(pic/pic5.svg);
    background-size: cover;
    background-position: center;}



.model-one{
    position: absolute;
    z-index: 1;        width: clamp(400px, 56vw, 550px); 
  ;    top: 256px;
  
    height: 527px;
}

    
.main-info-sec2 {

                  padding: 40px 7.3% 0 7.3%;            gap: 58px;
}





.cont-sec2 {
    width: 100%;
    height: 100%;
    display: flex;padding: 0;
    justify-content: flex-start;}


.text-box2-sec2 {
    padding-left: 0;}

.para-sec2 {
    color: var(--fadedtext);
    margin: 0;
    font-family: Poppins;
    font-size: 18px;}


.sub-box-sec2 {
    display: flex;
    flex-direction: column;
          gap: 27px;
}


.hedaer-sec2 {
    color: var(--black-text);
    font-family: Poppins;
    font-size: 40px;}


.sec2{width: 100%;height: 1236.63px;
background-image: url(pic/pic15.png);
 
    background-position: center;}


.main2-sec2 {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
   justify-content: flex-end;
}


.cont-sec2 {
    width: 100%;
    height: 100%;
    display: flex;padding: 0;
    justify-content: flex-start;
}

.lolipop {
        position: absolute;
        right: -131px;
        width:410.56px;
        bottom: -49px;
        z-index: 1;
}

.circle-sec2 {
border-radius: 50%;
width: 435.24px;
        height: 435.24px;
               margin-top: 183px;
        position: absolute;
        
        background-color: var(--design);
}

.lolipop2 {
        position: absolute;
        right: -82px;
        top: -164px;
        width: 447.12px;
        height: auto;
}

.lolipop3 {
        position: absolute;
        left: -23px;
        top: -105px;
        width: 370.56px;
}

.www {z-index: 11;}




.container-imgs-sec2 {


  
    height: 688.48px;
    display: flex;
    justify-content: center;
            width: 90%;
        align-self: center;
        height: 688.48px;
        display: flex;
        justify-content: center;
}





.text-box1-sec2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;}


.text-box2-sec2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;}

.img-decorations-sec2 {
          position: absolute;
      
        width: 152px;
        transform: rotate(10deg);
                left: 6%;;top: 6px;
}

.img2-decorations-sec2 {
        position: absolute;
        bottom: -112px;
        left: 1%;
        width: 120px;
}

.img3-decorations-sec2 {
    position: absolute;
    
    left: 23px;
    z-index: 1;        top: -562px;
}


.container-cards-sec3{
    display: flex;
flex-direction: row;gap: 20px;
display: flex;gap: 20px;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;

}


.card1-sec3{
          min-width: 346px;
        width: 52%;
    order: 2;        margin: 0;
    height: 513.357px;
flex-shrink: 0;
border-radius:15px 15px 150px 150px ;
background: var(--design2);
    margin-top: 212px;
display: flex;position: relative;
flex-direction: column;
align-items: center;justify-content: flex-end;
padding: 0 36px 86px 36px;box-sizing: border-box;
}

.card2-sec3{
            min-width: 346px;
        width: 52%;
    order: 1;
}


.card3-sec3{
           min-width: 346px;
        width: 52%;
     order: 3;
         height: 513.357px;
flex-shrink: 0;
border-radius:15px 15px 150px 150px ;
background: var(--design2);
    margin-top: 212px;
display: flex;position: relative;
flex-direction: column;
align-items: center;justify-content: flex-end;
padding: 0 36px 86px 36px;box-sizing: border-box;
}




    .container-cards-sec3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
         gap: 209px;
    }

.model-view2 {
    position: absolute;
   top: -376px;}

.model-view3 {
    position: absolute;
   top: -376px;}

.sub-cont-sec {
    display: flex;
    flex-direction: column;
    gap: 152px;}



.model-view2{width: 550px;
        height: 539px;
    }


.model-view3{
    width: 550px;
        height: 539px;
}


        main {
        width: 100%;
    }

.container-all-info-sec3{padding-bottom: 0;}



.tap1-sec4 {
    display: flex;
       width: 103%;      
   }

.main-info-sec4 {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 98px;
    padding: 0 7.3% 0 7.3%;}


.card1-sec4

 {    padding: 0 9.2% 37px;
    width: 100%;}

.card2-sec4 {    padding: 0 9.2% 37px;    height: 366.998px;
    width: 100%;}

.header-sec4 {
    color: var(--black-text);
    margin: 0;
    font-family: Poppins;
    font-size: 40px;
    font-style: normal;
    width: 35%;}


.row2-sec4 {
    display: flex;
    flex-direction: column;
    gap: 20px;               row-gap: 180px;
   
}
.main2-sec4 {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: fit-content;
    row-gap: 300px}


.container-sec4 {
    width: 100%;background-image: url(pic/pic20.png);
    height: fit-content;}

.row1-sec4 {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
}

.header-sec4 {
        width: 100%;}


.para-sec4 {
    width: 100%;}

.container-taps-sec4 {
    width: 100vw;
    height: 220px;}

 .dec2-sec4 {
                 left: 91%;
        top: -88px;
}
 .dec1-sec4 {
           top: 289px;
        z-index: 1;
        left: -52px;
}


.model-sec4-1{    position: absolute;
    width: 492.19px; display: block;
    height: 426.921px;
    top: -269px;}


.model-sec4-2{    position: absolute;
    width: 492.19px;
    height: 426.921px; display: block;
    top: -269px;}


  .card-cont-sec5 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }



.para3-sec5 {
  display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


  .cont2-sec5 {
    padding-top: 87px;
    padding-left: 7.3%;
    padding-right: 7.3%;
  }

  .card-cont-sec5 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

.card1-sec5 {
        flex: 1 1 100%;
        width: 100% ;
    }

.card2-sec5 {
        flex: 1 1 100%;
        width: 100% ;    padding: 22px 30px;height: 280.264px;
    }


.imgbig-sec5 {
        position: absolute;
        right: -22%;
        top: 15%;
        transform: rotate(10deg);
        height: 516.892px;
}

.imgbig2-sec5 {
        position: absolute;
        left: -146px;
        top: 310px;
        z-index: -1;
        width: 432.23px;
        transform: rotate(1.732deg);
        width: 463.033px;
        height: 502.578px;
}


.part2-sec5{width: 100%;
}



.cont2-sec5 {
    margin-bottom: 108px;}

.sec6 {
    width: 100%;
    height: fit-content;}

.cont-info2-sec6 {
    padding: 57px 7.3% 107px 7.3%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;}

.colum-form-sec6 {
    display: flex;
    flex-direction: column;
    gap: 97px;
    width: 100%;}

.imgs-cont {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    top: 27px;
    height: 483px;
}
.big-circle-sec6 {
    width: 518.31px;
    height: 518.31px;
    position: absolute;
    flex-shrink: 0;
    border-radius: 409.31px;
    background: var(--design);
    left: 15%;
}
.row-big-sec6 {
    display: flex;
    flex-direction: column;}



.imgs-cont {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        top: 27px;
                height: auto;

        display: flex;
        flex-direction: column;
    }

.big-circle-sec6 {
        height: 518.31px;
        position: relative;
        flex-shrink: 0;
        border-radius: 409.31px;
        background: var(--design);
        left: 1%;
        align-self: center;
    }


 .row-big-sec6 {
    max-width: 100% !important;   
    width: 100%;
    flex-direction: column;      
    gap: 40px;
  }




.big-circle-sec6{width: 409.31px;
height: 409.31px;  transform: translatex(-40%); 
transition: all 0.5s 
ease-out;
}

.img1-sec6{width: 417px;}
.img2-sec6{width: 194px;}
.img3-sec6{ width: 307px;bottom: -24px;}




.colum-form-sec6 {
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
    margin-top: 46.27px;margin-bottom: 0;
}


.cont2-sec6 {
    display: flex;
    flex-direction: column;
    gap: 46px;
}

.main-info-footer {
    width: 100%;
         padding: 130px 7.3% 0 7.3%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}


.whitepart {
    width: 1299px;
    background-color: var(--white);
    box-sizing: border-box;
    height: 47.9px;
    width: 100%;
    padding: 0 7.3%;}


.row1-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
     gap: 114px;
}

.icons-cont-footer {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
}

.box2-footer {
    display: flex;
    flex-direction: column;
    gap: 53px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    align-items: center;
}


.box1-footer {
    display: flex;
    flex-direction: column;
    gap: 25px;
}


    .box2-footer {
        display: flex;
        flex-direction: column;
        gap: 35px;}


.list-small-footer {
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: center;}




.all-info-footer {    gap: 50px;
           width: 314px;}




.main2-info-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 86px;
    align-items: center;
}


.text-contact {
    text-align: center;
}



.main-navs-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;gap: 50px;
    padding: 0;        align-items: center;
}

.box4-footer {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: fit-content;
    align-items: center;
    gap: 35px;
}

.box4-footer {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: fit-content;
    align-items: center;
    gap: 35px;
    text-align: center;
}



    .whitepart {
        width: 1299px;
        flex-direction: column;
        background-color: var(--white);
        box-sizing: border-box;
        height: 86.48px;
        width: 100%;
        padding: 20px 7.3%;}

.card2-delay {
    transition-delay: 0s; 
}


.footer{background-position: center;background-image: url(pic/pic40.png);
background-size: cover;}

.footer-p{background-position: center;background-image: url(pic/pic40.png);
background-size: cover;}

.small-navs-container {
    align-items: center;
}
.tap1-sec4, .tap2-sec4 {
    width: 135%;}



.button-sec4{
display: flex
;    width: 58%;}

.button2-sec4{display: flex;
    width: 58%;}




.sec1-cont2-info-p {
    width: 100%;
    padding: 64px 7.3% 0;}



.container-hero-products {
display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        height: 698px;
}

.img-heroo-sec1-products {
         position: absolute;
               left: 7%;
        bottom: 0;
        top: 30px;
           width: clamp(630px, 77vw, 815px);
}

.row2-decoration-bg-sec1-p {
    bottom: 87px;}


.text-box-p {
    display: flex;
    flex-direction: column;
    gap: 54px;
    gap: clamp(43px, 48px, 54px);
    position: relative;z-index: 1;  transform: translateX(-200px); 
    
        padding-top: 95px;;transition: all 0.5s 
ease-out;


    width: 557px;}


.text-box-p.animate {
    transform: translateX(0); 
    opacity: 1;
}





.header-sec1-p {
                       font-size: 77px;
}


.serachbar-p {        width: 325.92px;
        height: 48px;
}

.search-input-p {
     font-size: clamp(16px, 18px, 18px);}

.img-circle-sec1-p {
        right: 0;
        left: 0;
        bottom: -282px;
        width: 142px;

}

.text-in-row-sec1-p {
font-size: 77px;
}
.container-background-sec1-p {
          height: 625px;
        top: 139px;
}

.img-sec1-p{ 
    
          
        width: 815px;
        width: clamp(65vw, 67vw, 815px);
        position: absolute; transform: translateX(0);
        bottom: 0;
        left: 500px;
}



.img-sec1-p.animate {
     left: 30%;
    opacity: 1;
}


.row-decoration-bg-sec1-p {
    gap: 14px;}




.card2-sec2-p {

            width: 86%;;transform: translateX(400px);
  transition: all 1s ease-out;
}

.card2-sec2-p.animate {
transform: translateX(0);gap: 55px;
  opacity: 1;
}


.card3-sec2-p {
          width: 90%;
transform: translateX(-400px);
  transition: all 1s ease-out;gap: 55px;
}

.card3-sec2-p.animate {
transform: translateX(0);
  opacity: 1;
}


.main-info-sec2-p {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
}


.card1-sec2-p {
        width: 86%;
transform: translateX(-400px);
  transition: all 1s ease-out;gap: 55px;
}

.card1-sec2-p.animate {
transform: translateX(0);
  opacity: 1;
}


.container-model-1-sec2-p {
    width: 336.47px;
    height: 424px;position: relative;z-index: 1;
}

.model1-sec2-p {
    width: 157%;
    height: 141%;
    position: relative;
    bottom: 122px;
    right: 97px;
}

.container2-model-1-sec2-p {
    width: 340px;
    height: 498px;
}
.model2-sec2-p {
    width: 127%;
    height: 138%;
    position: relative;
    bottom: 122px;
    right: 2%
}


.container3-model-1-sec2-p {
    width: 380.29px;
    height: 312px;
}
.model3-sec2-p {
    width: 141%;
    height: 141%;
    position: relative;
    bottom: 122px;
    left: -98px;
}

.img4-sec2-p-deco {
    position: absolute;
    top: -39%;
    right: 40%;
}


.box2-sec2-p {
    display: flex;
    flex-direction: column;
    width: 53%;
    margin-top: 36%;}


.container3-model-1-sec2-p {
    position: relative;
    z-index: 1;
}


    .img4-sec2-p-deco {
        position: absolute;
        top: -38%;
        right: 46%;
    }

.img2-sec2-p-deco {
    position: absolute;
    top: 8%;
    right: -9%;
}


.container2-sec3-p {
    max-width: 100%;
    width: 100%;}

.card-sec3-p {
    width: 100%;}


.card-sec3-p {
    width: 100%;
    height: 651.19px;
    padding: 53px;
}

.card2-sec3-p {
    width: 100%;
    height: 651.19px;
    padding: 53px;
        flex-direction: column;        justify-content: flex-end;
    gap: 40px;
}
.main-cont-sec3-p {
    display: flex;gap: 35px;
    flex-direction: column;}

.container-vertical-cards-sec3-p {
    display: flex;
    flex-direction: column;
    gap: 20px;gap: 35px;
    width: 100%;}

.sub2-header-sec3-p {
    color: var(--black-text);
    text-align: center;
    margin: 0;}

.para2-sec3-p {
    color: var(--fadedtext);
    text-align: center;}

.container-text2-sec3-p {
    gap: 40px;
    width: 100%;
}
.model2-sec3-p-cont {
    width: 100%;
    height: 340.42px;
}
.model2-sec3-p {
    width: 102%;
    height: 115%;}
.link2-nav-sec3-circle-p {
    width: 86.693px;
    height: 86.693px;
    top: 40px;
    right: 40px;}


.arrow2-sec3-p {
    width: 59.622px;
    height: 64.59px;}

.model3-sec3-p-cont {
    width: 100%;
    height: 340.42px;      
    
}

.model3-sec3-p {
        width: 82%;
        height: 117%;
        position: relative;
        bottom: 13%;
        right: -6.6%;
}


.link-nav-sec3-circle-p {
    top: 40px;
    right: 40px;}




.container-sec3-p{
padding: 115px 7.3%;}





.container-sec4-p {
    padding: 115px 7.3% 0;}


.container-infoo-sec4-p {
    height: 100%;
    width: 100%;}




.container-infoo-sec4-p {
    height: 142%;
    width: 100%;}

/* .model-sec4-p {
    width: 100%;
    max-width: 100%;
    height: 49%;
    top: 75px;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
} */

/* .HotspotAnnotation {
  
    border-radius: 4px;
    padding: 1em 1.3em;
    position: absolute;
    transition: all 300ms linear;
    left: 253%;
    top: 147%;
    transform: translate(10px, -50%);
    width: fit-content;
    overflow-wrap: break-word;
} */


/* .HotspotAnnotation:hover{
        display: flex;
    justify-content: right;
font-family: Poppins;width: 143px;}
.HotspotAnnotation:hover .cont-para1-sec4{display: block;bottom: -195px;}

.HotspotAnnotation:hover .font-hotspottt {

   width: 143px;
} */


/* 
.Hotspot.active .HotspotAnnotation .cont-para1-sec4 {
    display: block; bottom: -195px;
}

.Hotspot.active .HotspotAnnotation .font-hotspottt {
    width: 143px;
}
.para1-sec4-p {
    color: var(--fadedtext);
    margin: 0;
    text-align: right;
    font-family: Poppins;
    width: 143.945px;
    height: 155px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    display: -webkit-box;
    display: box;
    display: flexbox;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pic3-sec4-p
 {
    position: absolute;
    top: -135px;
    left: -82px;
    width: 135px;
}

.pic1-sec4-p {
position: absolute;
    right: -87px;
    top:52px;
    width: 65px;
}


.Hotspot2Annotation {
    border-radius: 4px;
    padding: 1em 1.3em;
    position: absolute;
           right: 315%;
           bottom: 97%;
    transition: all 300ms 
linear;
    transform: translate(-10px, -10px);
    width: fit-content;
    overflow-wrap: break-word;
}


.font2-hotspottt {
    color: var(--black-text);
    font-family: Poppins;
    margin: 0;
    font-size: clamp(20px, 20px, 22px);
    font-weight: 600;
    width: 156px;
    text-align: left;
}


.Hotspot2Annotation:hover{
        display: flex;
    justify-content: left;
font-family: Poppins; width: 161px;}
.Hotspot2Annotation:hover .cont-para2-sec4{display: block;bottom:-92px;}

.Hotspot2Annotation:hover .font2-hotspottt {

   width: 161px;
}

.Hotspot2.active .Hotspot2Annotation .cont-para2-sec4 {
    display: block; bottom: -92px;
}

.Hotspot2.active .Hotspot2Annotation .font2-hotspottt {
    width: 161px;
}

.para2-sec4-p {
    color: var(--fadedtext);
    margin: 0;
    text-align: left;
    font-family: Poppins;line-clamp: 2;
    -webkit-line-clamp: 2;
    width: 161px;}


.Hotspot3Annotation {

    right: 395%;
    bottom: 166%;}
.font3-hotspottt {
    width: 143px;}


.pic2-sec4-p
 {
        position: absolute;
        transform: rotate(36deg);
        bottom: -100px;
        right: -66px;
        z-index: 1;
        width: 99px;
}


.Hotspot3Annotation:hover{
        display: flex;
    justify-content: left;transform: translateY(0%);
font-family: Poppins; width: 143px;bottom: 89px;
}
.Hotspot3Annotation:hover .cont-para3-sec4{  display: block;    bottom: -91px;transform: translateY(0%);}

.Hotspot3Annotation:hover .font3-hotspottt {

    width: 143px;
}
.Hotspot3.active .Hotspot3Annotation .cont-para3-sec4 {
    display: block;    bottom: -91px;transform: translateY(0%);
}
.Hotspot3.active{z-index: 11;}



.Hotspot3.active .Hotspot3Annotation .font3-hotspottt {
    width: 143px;
}

.para3-sec4-p {
    color: var(--fadedtext);
    margin: 0;
    text-align: left;line-clamp: 2;
    -webkit-line-clamp: 2;
    font-family: Poppins;
    width: 143px;}

.yellow-rect-sec4-p {
    width: 291.013px;
    height: 530.9px;} */

   
.container-infoo-sec4-p {
    height: 142%;
    width: 100%;}

.model-sec4-p {
    width: 100%;
    max-width: 100%;
    height: 410px;
    top: 75px;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.HotspotAnnotation {
    border-radius: 4px;
    padding: 1em 1.3em;
    position: absolute;
    transition: all 300ms linear;
        left: -128%;
        top: 323%;
    transform: translate(10px, -50%);
    width: fit-content;
    overflow-wrap: break-word;
}


.HotspotAnnotation:hover{
        display: flex;
    justify-content: right;
font-family: Poppins;width: 143px;}
.HotspotAnnotation:hover .cont-para1-sec4{display: block;bottom: -105px;}

.HotspotAnnotation:hover .font-hotspottt {

   width: 143px;
}



.Hotspot.active .HotspotAnnotation .cont-para1-sec4 {
    display: block; bottom: -105px;
}

.Hotspot.active .HotspotAnnotation .font-hotspottt {
    width: 143px;
}
.para1-sec4-p {
    color: var(--fadedtext);
    margin: 0;
    text-align: right;
    font-family: Poppins;
    width: 143.945px;
    height:66px;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    display: -webkit-box;
    display: box;
    display: flexbox;font-size: 16px;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pic3-sec4-p
 {
     position: absolute;
    top: -123px;
    left: 39px;
    width: 91px;
}

.pic1-sec4-p {
position: absolute;right: 46px;top: 102px;width: 46px;z-index: -1;
}
.Hotspot3{

  left: 50px;}

.Hotspot2Annotation {
    border-radius: 4px;
    padding: 1em 1.3em;
    position: absolute;
    right: 44%;
    bottom: 289%;
    transition: all 300ms 
linear;
    transform: translate(-10px, -10px);
    width: fit-content;
    overflow-wrap: break-word;
}

.Hotspot2 {
  left:90%;
  height: 30px;
  padding: 8px;
  margin-bottom: 0;
}

.font2-hotspottt {
    color: var(--black-text);
    font-family: Poppins;
    margin: 0;
    font-size: clamp(20px, 20px, 22px);
    font-weight: 600;
    width: 157px;
    text-align: left;
}


.Hotspot2Annotation:hover{
        display: flex;
    justify-content: left;
font-family: Poppins; width: 156px;}
.Hotspot2Annotation:hover .cont-para2-sec4{display: block; bottom: -84px;}

.Hotspot2Annotation:hover .font2-hotspottt {

   width: 156px;
}

.Hotspot2.active .Hotspot2Annotation .cont-para2-sec4 {
    display: block; bottom: -84px;
}

.Hotspot2.active .Hotspot2Annotation .font2-hotspottt {
    width: 156px;
}

.para2-sec4-p {
    color: var(--fadedtext);
    margin: 0;
    text-align: left;
    font-family: Poppins;
    line-clamp: 2;font-size: 16px;
    -webkit-line-clamp: 2;
    width: 156px;}


.Hotspot3Annotation {

    right: 207%;transform: translateY(0%);width: 143px;
    bottom: 251%}

    
.font3-hotspottt {
    width: 143px;}


.pic2-sec4-p
 {
           position: absolute;
        transform: rotate(36deg);
 bottom: -78px;
           right: 42px;
        z-index: -2;
        width: 62px;
        
}


.Hotspot3Annotation:hover{
        display: flex;
    justify-content: left;transform: translateY(0%);
font-family: Poppins; width: 143px;z-index: 1;
}
.Hotspot3Annotation:hover .cont-para3-sec4{display: block;
bottom: -85px;}

.Hotspot3Annotation:hover .font3-hotspottt {

    width: 143px;
}





.Hotspot3.active .Hotspot3Annotation .cont-para3-sec4 {
    display: block;   bottom: -85px;
}
.Hotspot3.active{z-index: 1;transform: translateY(0%);}



.Hotspot3.active .Hotspot3Annotation .font3-hotspottt {
    width: 143px;
}

.para3-sec4-p {
    color: var(--fadedtext);
    margin: 0;font-size: 16px;
    text-align: left;
    font-family: Poppins;
        line-clamp: 2;
    -webkit-line-clamp: 2;
    width: 143px;}

.yellow-rect-sec4-p {
         width: 249.013px;
        height: 473.9px;}

    




.sec4-p {
    width: 100%;
    height: 952.04px;
    background-size: cover;
    background-image: url(pic/pic56.png);
}



/* .font-hotspottt{ 
      width: 143px; 
  } */

.font-hotspottt{ 
      width: 143px; 
  }










.cont-info-sec5-p {
    width: 100%;
    height: 100%;
    padding: 108.49px 7.3% 84px 7.3%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.sec5-p {
    width: 100%;
    height: fit-content;}

.main-info-sec5-p {
    max-width: 1280px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.box-right-sec5-p {
    display: flex;
    width: 73%;}

.img-cont-sec5-p {
    margin: 0;
    padding: 0;
    position: relative;
    left: 83%;transform: translateX(0px);
    bottom: 33px;
  transition: all 0.8s ease-out;
}

.img-cont-sec5-p.animate {
  left: 33%;
  opacity: 1;
}

.header-sec1-a {padding-top: 0;bottom: 55%;
    font-size: clamp(50px, 77px, 77px);}


.header-sec1-b {padding-top: 0;transform: translatey(200px); 
    font-size: clamp(50px, 77px, 77px);}


.text-decor-bg-sec1-b {
    font-size: 77px;}

.row1-sec1-b {
    top: 161px;}


.row2-sec1-b {
    bottom: 394px;}


.cont-info-sec2-b {
    padding: 134px 7.3% 0 7.3%;}

.sec2-b {
    width: 100%;
    height: fit-content;}

.container2-sec2-b {
    display: flex;
    flex-direction: column;
    gap: 62px;
}
.big-cont-sec2-b {
    gap: 100px;
}

.colum1-sec2-b {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}


.colum2-sec2-b {
    display: flex; transform: translateX(320px);
    width: 100%;}

.colum2-sec2-b {

    margin-bottom: 269.67px;
}

.bg-img-sec2-b {
            width: 111%;    bottom: 2%;
        min-width: 851px;}


.rectangle-sec2-b{display: flex;
position: absolute;bottom: 0;
padding: 18px 39px;
box-sizing: border-box;
flex-direction:row;white-space: nowrap;
justify-content: center;
align-items: center;
gap: 45px;    
border: 4px solid var(--design);
 transform: translateX(400px); opacity: 0;
background: var(--design);  transition: all 0.8s ease-out;
}

.rectangle-sec2-b.animate {
 transform: translateX(-50px); ;
  opacity: 1;
}






.container-sec3-b {
    padding: 115px 7.3% 0 7.3%;}





.main-info-sec3-b {
    display: flex;
    flex-direction: column;
        gap: 237px;
    max-width: 100%;}

.container2-model-sec3-b {
        width: 78%;
           height: 564px;
        align-self: center;
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: 45%;
}

.container-model-sec3-b {
        width: 78%;
           height: 564px;
        align-self: center;
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: 45%;
}

.container3-model-sec3-b {
        width: 78%;
           height: 564px;
        align-self: center;
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: 45%;
}

.card1-sec3-b {width: 100%;transition: all 0.5s ease-out;
   height: 510px; transform: translateX(320px);
        padding: 0 5.4% 50px 5.4%;}


.card2-sec3-b {transition: all 0.5s ease-out;
   width: 100%;height: 510px; transform: translateX(-320px);
        padding: 0 5.4% 50px 5.4%;}


.text-box-sec3-b {
    width: 100%;    align-self: self-end;
}


.sub-text-box-sec-b {
    display: flex;
    flex-direction: column;
    gap: 34px;}

.container-row-sec3-b {
    gap: 295px;
}


.sec3-b {
    width: 100%;
    height: fit-content;
    padding-bottom: 115px;
    box-sizing: border-box;
}







.main-inf0-sec4-b {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: left;
        gap: 5px;
}


.container-img-sec4-b {
    position: relative;
    width: 80%;        align-self: flex-end;
    min-width: 495px;}


.sec4-b {
    width: 100%;
    background-image: url(pic/pic71.png);
    background-size: cover;
    height: fit-content;
}


.container-info-sec4-b {
    width: 100%;
    height: 100%;
       padding: 75px 7.3% 190px 7.3%;}


.text-box-sec4-b{

    width: 70%;}



.yellow-rect-sec4-b {
    width: 67%;
    position: absolute;
    height: 87%;}






.sec5-b {
    width: 100%;
    height: fit-content;}

.container-rect-sec5-b{width: 100%;    
    width: 100%;
    display: flex;
       justify-content: space-between;flex-direction: column;
    align-items: center;position: relative;
            height: 908px;
    }


.rect1-sec3-b {
    margin: 0;
    display: flex;
    flex-direction: row;
    height: 84.373px;
    transform: rotate(-6.115deg);
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 36%;
    min-width: 361.312px;
    border-radius: 70px;
    background: var(--design);
    position: relative;
    top: 0;order: 2;
    left: 0;
}


.rect2-sec3-b {
    margin: 0;
    display: flex;
    flex-direction: row;
    height: 84.373px;
    transform: rotate(15.003deg);
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 39%;
    min-width: 417.031px;
    border-radius: 70px;
    background: var(--design);
    position: relative;
    top: 0;order: 1;
    right: 0;
}


.rect3-sec3-b {
    margin: 0;
    display: flex;
    flex-direction: row;
    height: 84.373px;
    transform: rotate(15.003deg);
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 38%;
    min-width: 422px;order: 3;
    border-radius: 70px;
    background: var(--design);
}


.rect4-sec3-b {
    margin: 0;
    display: flex;
    flex-direction: row;
    height: 84.373px;
    transform: rotate(11.454deg);
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 36%;
    min-width: 405px;
    border-radius: 70px;
    background: var(--design);
    position: relative;
    bottom: 0;order: 5;
    left: 0;
}

.rect5-sec3-b {
    margin: 0;
    display: flex;
    flex-direction: row;
    height: 84.373px;
    transform: rotate(-17.093deg);
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 36%;
    min-width: 400px;
    border-radius: 70px;
    background: var(--design);
    position: relative;
    bottom: 0;order: 4;
    right: 0;
}
@keyframes randomMove1 {
  0%   { transform: translate(0,0) rotate(-6deg); }
  25%  { transform: translate(70px, 1px) rotate(-2deg); }
  50%  { transform: translate(-70px, -1px) rotate(-10deg); }
  75%  { transform: translate(50px, 0px) rotate(-4deg); }
  100% { transform: translate(0,0) rotate(-6deg); }
}

@keyframes randomMove2 {
  0%   { transform: translate(0,0) rotate(15deg); }
  25%  { transform: translate(-80px, 2px) rotate(22deg); }
  50%  { transform: translate(70px, -1px) rotate(10deg); }
  75%  { transform: translate(-60px, 1px) rotate(18deg); }
  100% { transform: translate(0,0) rotate(15deg); }
}

@keyframes randomMove3 {
  0%   { transform: translate(0,0) rotate(10deg); }
  25%  { transform: translate(75px, 1px) rotate(5deg); }
  50%  { transform: translate(-65px, -1px) rotate(15deg); }
  75%  { transform: translate(55px, 0px) rotate(8deg); }
  100% { transform: translate(0,0) rotate(10deg); }
}

@keyframes randomMove4 {
  0%   { transform: translate(0,0) rotate(11deg); }
  25%  { transform: translate(-70px, 1px) rotate(7deg); }
  50%  { transform: translate(60px, -2px) rotate(14deg); }
  75%  { transform: translate(-50px, 0px) rotate(10deg); }
  100% { transform: translate(0,0) rotate(11deg); }
}

@keyframes randomMove5 {
  0%   { transform: translate(0,0) rotate(-17deg); }
  25%  { transform: translate(80px, -1px) rotate(-8deg); }
  50%  { transform: translate(-70px, 2px) rotate(-22deg); }
  75%  { transform: translate(60px, 0px) rotate(-12deg); }
  100% { transform: translate(0,0) rotate(-17deg); }
}


.main-info-sec5-b {
    padding: 70px 7.3% 70px 7.3%;}



.img2-sec1-a {

            width: clamp(200px, 89vw, 694px);;right: -300px;
        min-width: 623px;  transition: all 0.5s ease-out;
}
.img-sec1-a {
 
            width: clamp(200px, 89vw, 694px);left: -300px;
        min-width: 623px; transition: all 0.5s ease-out;
}












.cont-nfo-sec-a {
    width: 100%;
    height: 100%;
    padding: 150px 7.3% 103px 7.3%;}


.main-info-sec2-a {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
            gap: 74px;
}


.sec2-a {

    background-size: cover;}


.rightb0x-sec2-a {
    width: 100%;    gap: 72.79px;
}

.para-group-sec2-a {
    display: flex;
    flex-direction: column;
    gap: 54px;
    width: 100%;
}


.left-box-sec2-a {
    width: 569px;
    height: 696px;
    position: relative;
    align-self: flex-end;
     transform: translatex(300px); 
    transition: all 0.5s ease-out;
}

.model-sec-a {
    position: relative;
    left: 43px;
    width: 129%;
    height: 111%;
    top: -48px;
}







.main-box-sec3-a {
    max-width: 100%;
gap: 82px;}



  .container-sec3-a {
    max-width: 1250px;    
    margin: 0 auto;
    flex-direction: column; 
        gap: 30px;   
  }
.card-sec3-a,
.card2-sec3-a {
    flex: 1 1 347px;  
}


.main-box-sec3-a{
    max-width: 1280px;
width: 100%;
}
.card2-sec3-a {
    margin-top: 0;
gap: 20px;}


.card-sec3-a {
    gap: 20px;}





.rectangle-sec3-a {
    transition: all 0.5s 
ease-out;
    transform: translateX(400px);

}


.rectangle-sec3-a.animate {
    transform: translateX(-80px);
    opacity: 1;
}
.info2-sec3-a {
    padding: 112px 7.3% 0 7.3%;}






.main-inf0-sec4-a {
    max-width: 100%;
    width: 100%;
}

.row2-sec4-a {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 20px;
}

.container-info-sec4-a {
    width: 100%;
    height: 100%;
    padding: 115px 7.3% 0 7.3%;}


.card-sec4-a {
    width: 100%;
    transform: translateX(300px);
    opacity: 0;
    transition: all 0.5s 
ease-out;}

.row1-sec4-a {
    display: flex;
    flex-direction: column;
    gap: 40px;}

.para-sec4-a {
    width: 100%;}

.sec4-a {
    width: 100%;
    height: fit-content;
    background-image: url(pic/pic88.png);}

.imgg-deco-sec4-a {
    position: absolute;
    top: 196px;
    left: -83px;
    width: 140px;
}


.sub-title-sec4-a {
    width: 73%;}


.cont-info-sec5-a{width: 100%;height: 100%;
padding: 90px 7.3% 0 7.3%;
box-sizing: border-box;display: flex;
justify-content: center;}

.main-info-sec5-a {
    flex-direction: column;}



.sec5-a {
    width: 100%;
    height: fit-content;}

.left-box-sec5-a {
        width: 100%;
        height: 587.61px;transition: all 0.5s ease-out;
        min-width: 615px;}

.right-box-sec5-a {
    width: 76%;}

.left-pic-sec5-a {
    position: absolute;
    top: -18px;
            width: 100%;
}

.all-info-sec6-a {
    width: 100%;
    height: 100%;
    padding: 115px 7.3% 93px 7.3%;}






.Hotspot3Annotation {
    width: 152px;
}


.Hotspot3.active .Hotspot3Annotation .font3-hotspottt {
    width:145px;
}

.Hotspot3.active .Hotspot3Annotation .cont-para3-sec4 {
    display: block;
}

 .Hotspot3.active   .Hotspot3Annotation {
        width: 145px;
    }
.Hotspot3 {
    right: -164%;
}

.Hotspot3Annotation:hover{
        display: flex;
    justify-content: left;
font-family: Poppins;width: 145px;}
.Hotspot3Annotation:hover .cont-para3-sec4{display: block;}

.Hotspot3Annotation:hover .font3-hotspottt {

   width: 145px
}



.rect1-sec3-b { animation: randomMove1 3s infinite ease-in-out; }
.rect2-sec3-b { animation: randomMove2 4s infinite ease-in-out; }
.rect3-sec3-b { animation: randomMove3 2.5s infinite ease-in-out; }
.rect4-sec3-b { animation: randomMove4 3.5s infinite ease-in-out; }
.rect5-sec3-b { animation: randomMove5 4.5s infinite ease-in-out; }


.model-sec2-b{width: 100%;height: 100%;
 transform: translateX(-320px);opacity: 0;
 transition: all 0.5s ease-out;
}





}



















/* normal screen screen */
@media (min-width: 900px ) and (max-width: 1280px) {
.nav-header{width: 100%;margin: 0;padding: 0;
height: 117.518px; background-size: cover;position: fixed;
background-image: url(pic/pic1.svg);
padding: 30px 7.9%;}

.text-decoration {
    font-size: clamp(77px, 11vw, 128px); 
}

.text2-decoration {
    font-size: clamp(77px, 10vw, 128px);
}

.row2-test-deco {
    display: flex;
    flex-direction: row;
    gap: 22px;
    align-items: center;
    white-space: nowrap;
    position: relative;
    height: 90px;
             left: -22%;
}

.img-sec1 {
    width: clamp(98px, 12vw, 163px);  
    height: auto;                     
}

.sec2{width: 100%;height: 983.22px;
background-image: url(pic/pic5.svg);
    background-size: cover;
    background-position: center;}


.model-one{
    position: absolute;
    z-index: 1;        width: clamp(590px, 52vw, 659px); 
    height: 1000px;
}


    .main-info-sec2 {
        width: 31%;
padding: 233.62px 0 0 0;box-sizing: border-box;
display: flex;flex-direction: column;gap: 105px;            margin: 0 0 0 7.9%;
position: relative;}

.cont-sec2 {
    width: 100%;
    height: 100%;
    display: flex;padding: 0;
    justify-content: flex-start;}

.text-box2-sec2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 295.574px;
     padding-left: clamp(10%, 5vw, 33%);}


.container-imgs-sec2 {
    position: absolute;
    right: -109px;
}

.img-decorations-sec2 {
    position: absolute;
    top: 207px;
            left: -6%;
}
.www {

    z-index: 11;
}

.img3-decorations-sec2 {
    position: absolute;
    top: 312px;
    left: 130%;
   
}
.lolipop {
    position: absolute;
    right: 8px;}


.img3-decorations-sec2{
        position: absolute;
        top: 364px;
        left: 104%;
        z-index: 1;
}

.sub-cont-sec{width: 100%;}

.main2-sec2 {
    width: 100%;}




.container-cards-sec3{
    display: flex;
flex-direction: row;gap: 20px;
display: flex;gap: 20px;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;

}


.card1-sec3{
    width: 346px;
}

.card2-sec3{
    width: 346px;
}


.card3-sec3{
    width: 346px;
}



    .container-cards-sec3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px; 
    }

    
    .card3-sec3 {
        margin-left: 0; 
    }

   
    @supports (display: flex) {
        .container-cards-sec3 > .card3-sec3 {
            margin-left: 30px; 
        }
    }

.tap1-sec4 {
    display: flex;
       width: 103%;      top: -40px;
   }

.main-info-sec4 {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 98px;
    padding: 0 7.9% 0 7.9%;}


.card1-sec4

 {flex: 1 1 500px;
    width: 175%;}

.card2-sec4 {flex: 1 1 400px;
    width: 104%;}

.header-sec4 {
    color: var(--black-text);
    margin: 0;
    font-family: Poppins;
    font-size: 40px;
    font-style: normal;
    width: 35%;}


.row2-sec4 {
    display: flex;
    flex-direction: row;
    gap: 20px;        row-gap: 203px;
    flex-wrap: wrap;
}
.main2-sec4 {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: fit-content;
            row-gap: 234px;
}


.container-sec4 {
    width: 100%;
    height: fit-content;}


    /* .dec1-sec4 {
        transition: 0.3s ease;
        position: absolute;
        left: -55px;
        bottom: calc(-114px + (var(--wrapped, 0) * 150px));
     
    } */

    .dec1-sec4 {
        transition: 0.3s ease;
        position: absolute;
        transform: rotate(38deg);
        left: -8%;
        z-index: 1;
        top: 20%;
        bottom: calc(-114px + (var(--wrapped, 0) * 150px));}



/* .row2-sec4.wrapped .dec1-sec4 {
           top: 249px;
        z-index: 1;
        left: -52px;
}


    .row2-sec4:has(.card2-sec4:nth-child(2)) {
        --wrapped: 1;
    } */

    .dec2-sec4 {
        position: absolute;
        right: calc(-80px + (var(--wrapped, 0) * -150px));

        transition: 0.3s ease;
    }

    .row2-sec4.wrapped .dec2-sec4 {
           left: 87%;
        top: -73px; 
}
.dec2-sec4 {
    right: -80px;
    position: absolute;
    transition: 0.3s ease;
}

.cont2-sec5 {
    width: 100%;
    height: fit-content;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 98px;
    padding: 107px 7.9% 0 7.9%;}



.card-cont-sec5 {
    flex-wrap: wrap;
}


.card-cont-sec5 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}


.card-cont-sec5.wrapped .card1-sec5:first-child {
  width: 100%;
  height: 243.13px;
}

.card-cont-sec5.wrapped .card2-sec5,
.card-cont-sec5.wrapped .card1-sec5:nth-child(3) {
  width: calc(50% - 10px);
  height: 243.13px;
}


.para3-sec5 {
  display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

  .card-cont-sec5 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .card1-sec5:first-child {
    flex: 1 1 100%;
    min-width: 0;
    height: 267px;
  }

  .card2-sec5,
  .card1-sec5:nth-child(3) {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    height: 267px;
  }



  .card-cont-sec5.wrapped .card1-sec5:first-child {
    flex: 1 1 100%;  
    width: 100% !important;
    height:296px;  
  }

  .card-cont-sec5.wrapped .card2-sec5,
  .card-cont-sec5.wrapped .card1-sec5:nth-child(3) {
    flex: 1 1 calc(50% - 10px); 
    width: calc(50% - 10px) !important;    padding: 22px 30px;
    height: 267px; 
  }
.imgbig2-sec5 {
    position: absolute;
    left: -227px;
    top: -223px;
    z-index: 1;
}




.big-circle-sec6{width: 409.31px;
height: 409.31px;position: absolute;
flex-shrink: 0;border-radius: 409.31px;
background: var(--design);
left: -48px;}

.img1-sec6{position:absolute;left: -123px;width: 417px;}
.img2-sec6{position:absolute;top: -10px;right: 40px;    width: 194px;}
.img3-sec6{position:absolute;bottom: -24px;;right: -68px;    width: 307px;}


.colum-form-sec6 {
    display: flex;
    flex-direction: column;
    gap: 97px;
    width: 48.3%;
    margin-top: 114.27px;
    min-width: 400px;}

.cont-info2-sec6 {
    padding: 0 7.9% 0 7.9%;}



.main-info-footer {
    width: 100%;
    padding: 100px 7.9% 0 7.9%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}


.box2-footer {
    width: 301px;
}


.whitepart {
    width: 1299px;
    background-color: var(--white);
    box-sizing: border-box;
    height: 47.9px;
    width: 100%;
    padding: 0 7.9%;}


.footer{background-position: center;
background-size: cover;}


.footer-p{background-position: center;
background-size: cover;}


    .tap1-sec4 {
        display: flex;
        width: 128%;
        top: -2px;
    }

.tap2-sec4 {
    width: 128%;
    right: 0;
}



.sec1-cont2-info-p {
    width: 100%;
    padding: 100px 7.9% 0;}



.container-hero-products {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;    min-width: 0;
    justify-content: flex-start;
    height: fit-content;
}

.img-heroo-sec1-products {
    position: absolute;
            left: -23%;
    bottom: 0;
    width: 815px;
    width: clamp( 65vw, 67vw, 815px);
}

.row2-decoration-bg-sec1-p {
    bottom: 87px;}


.text-box-p {
    display: flex;
    flex-direction: column;
    gap: 54px;
    gap: clamp(43px, 48px, 54px);
    position: relative;
    padding-top: 70px;    transform: translateX(-200px); 
padding-top: clamp(120px, 100px, 70px);transition: all 0.6.5 ;
    width: 557px;}


.text-box-p.animate {
    transform: translateX(0); 
    opacity: 1;
}







.header-sec1-p {

     font-size: clamp(77px, 10vw, 128px);
}


.serachbar-p {
    width: 438.468px;
 width: clamp( 300px, 380px, 438.468px);
}

.search-input-p {
     font-size: clamp(16px, 18px, 18px);}

.img-circle-sec1-p {
width: 160.9px;right: -67px;
 width: clamp( 120px, 130px, 160px);

}

.text-in-row-sec1-p {
font-size: clamp(77px, 10vw, 128px);
}
.container-background-sec1-p {
    height: 805px;
   height:clamp( 700px, 740px, 805px);
}

.img-sec1-p{  left: 0;
    width: 815px;
    width: clamp( 65vw, 67vw, 815px); transform: translateX(0);
        bottom: 0;
        left: 20%;
}



.img-sec1-p.animate {
     left: 0;
    opacity: 1;
}











.main-info-sec2-p {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
}



.card1-sec2-p {
    width: 73%;
transform: translateX(-400px);
  transition: all 0.7s ease-out;
}

.card1-sec2-p.animate {
transform: translateX(0);
  opacity: 1;
}





.card2-sec2-p {

    width: 73%;transform: translateX(400px);
  transition: all 0.7s ease-out;
}

.card2-sec2-p.animate {
transform: translateX(0);
  opacity: 1;
}


.card3-sec2-p {
    width: 87%;
transform: translateX(-400px);
  transition: all 1s ease-out;
}

.card3-sec2-p.animate {
transform: translateX(0);
  opacity: 1;
}

.container3-model-1-sec2-p {
    width: 497.163px;
    height: 408.358px;
    position: relative;
    z-index: 1;
}

.img4-sec2-p-deco {
    position: absolute;
    top: -27%;
    right: 60%;
}





.container2-sec3-p {
    max-width: 100%;
    width: 100%;}


/* .main-cont-sec3-p {
    flex-wrap: wrap;
}



.container-vertical-cards-sec3-p {
    flex: 1 1 487px;
    min-width: 487px;
}

.card2-sec3-p {
    width: 100%;
    height: 311.2px;
    border-radius: 20px;
    background: var(--design2);
    display: flex;
    flex-direction: row;
    gap: 15px;
    padding: 0 30px 0 30px;
    box-sizing: border-box;
    position: relative;
    align-items: center;
}


   .card-sec3-p{
    flex: 1 1 487px;
    min-width: 487px;
} */

.card-sec3-p {
    padding: 0 30px 66px 30px;}

    .card2-sec3-p {
        padding: 30px ;}



.all-cont-sec4-p {
    max-width: 100%;
    width: 100%;}

.model-sec4-p {
width: 82%;
        max-width: 100%;
        height: 73%;
        min-height: 606px;
        aspect-ratio: 0;
        margin: 0;
}

.font-hotspottt{ 
      width: 143px; 
  }

.HotspotAnnotation {

  width: fit-content;
}


.font2-hotspottt{  color: var(--black-text);
  font-family: Poppins;margin: 0;
  font-size: clamp(20px, 20px, 22px);
  font-weight: 600;
      width: 173px;
    text-align: left;
   }


.font3-hotspottt{  color: var(--black-text);
  font-family: Poppins;margin: 0;
  font-size: clamp(20px, 20px, 22px);
  font-weight: 600;
      width: 156px;
    text-align: left;
    }

.main-info-sec5-p {
    max-width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 77px;}

.img-cont-sec5-p {
    margin: 0;
    padding: 0;
    position: relative;
    width: 46%;
transform: translateX(400px);
    bottom: 33px;
  transition: all 0.7s ease-out;
}

.img-cont-sec5-p.animate {
 transform: translateX(0px);
  opacity: 1;
}





.box-right-sec5-p {
    display: flex;
    width: 50%;
    flex-direction: column;
    gap: 60px;
}





.text-decor-bg-sec1-b {
    font-size: clamp(77px, 12vw, 128px);
}


.header-sec1-b {
    font-size: clamp(77px, 12vw, 128px);}

.header-sec1-a {
    font-size: clamp(77px, 12vw, 128px);}

.big-cont-sec2-b {
    max-width: 100%;
    width: 100%;}

.img-card-sec-b {
    width: 50%;}


.main-info-sec3-b {
    display: flex;
    flex-direction: column;
    max-width: 100%;}

.container2-model-sec3-b {
  width: 66%;
    height: 741px;
    align-self: center;
    position: absolute;
    right: -25%;
    bottom: -183px;
}

.container-model-sec3-b {
    width: 73%;
    height: 741px;
    align-self: center;
    position: absolute;
          left: -29%;
    bottom: -178px;
}

.container3-model-sec3-b {
    width: 69%;
    height: 714px;
    align-self: center;
    position: absolute;
    left: -27%;
    bottom: -187px;
}

.card1-sec3-b {
    padding: 0 8% 0 0;}


.card2-sec3-b {
    padding: 0 0 0 8%;}


.main-inf0-sec4-b {
    max-width: 100%;
    width: 100%;}


.container-img-sec4-b {
    position: relative;
    width: 50%;
    min-width: 417px;}



.img2-sec1-a {
    width: clamp(200px, 65vw, 674px);}
.img-sec1-a {
    width: clamp(200px, 65vw, 674px);}



.main-info-sec2-a {
    max-width: 100%;
    width: 100%;}


.model-sec-a {
    width: 129%;
    height: 111%;
    position: relative;
    left: 56px;
    top: -93px
}

.pic2-sec2-a {
     position: absolute;
        bottom: 11%;
        left: 19%;
}



.yello-box-sec2-a {
    min-width: 515px;
}


.main-box-sec3-a {
    max-width: 100%;}



  .container-sec3-a {
    max-width: 1250px;    
    margin: 0 auto;
    flex-wrap: wrap;     
  }
.card-sec3-a,
.card2-sec3-a {
    flex: 1 1 347px;  
}


.main-box-sec3-a{
    max-width: 1280px;
width: 100%;
}
.card2-sec3-a {
    margin-top: 0;}

.main-inf0-sec4-a {
    max-width: 100%;
    width: 100%;
}

.row2-sec4-a {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.card-sec4-a {
    flex: 1 1 340px;
}

.imgg-deco-sec4-a {
    position: absolute;
    top: 55px;
    left: -139px;
}

.Hotspot3Annotation {
    width: 152px;
}

.Hotspot3Annotation:hover { width: 152px;}

.Hotspot3.active .Hotspot3Annotation .font3-hotspottt {
   width: 152px;
}

.Hotspot3.active .Hotspot3Annotation .cont-para3-sec4 {
    display: block;
}

 .Hotspot3.active   .Hotspot3Annotation {
        width: 152px;
    }
.Hotspot3 {
    right: -164%;
}

.para3-sec4-p {

    width: 152px;}





.Hotspot {
    left: -68%;}


.HotspotAnnotation {
           width: 143px;
}

.HotspotAnnotation:hover {        width: 143px;}

.Hotspot.active .HotspotAnnotation .font-hotspottt {
           width: 143px;
}

.Hotspot.active .HotspotAnnotation .cont-para1-sec4 {
    display: block;
}

 .Hotspot.active   .HotspotAnnotation {
               width: 143px;
    }
.Hotspot {
    right: -164%;
}

.para1-sec4-p {
    color: var(--fadedtext);
    margin: 0;
    text-align: right;
    font-family: Poppins;
    width: 143px;}

    .font-hotspottt {
        width: 100%;
    }









.Hotspot2Annotation {
    width: 162px
}

.Hotspot2Annotation:hover { width: 162px}

.Hotspot2.active .Hotspot2Annotation .font2-hotspottt {
   width: 162px
}

.Hotspot2.active .Hotspot2Annotation .cont-para2-sec4 {
    display: block;
}

 .Hotspot2.active   .Hotspot2Annotation {
        width: 162px
    }


.para2-sec4-p {

    width: 162px;}








.rectangle-sec3-a.animate {
    transform: translateX(-100px);
    opacity: 1;
}









}