:root{
    --hedaerandfooter:#FADA7A;
    --background1:#FCE7C8;
    --background2:#F9DBB0;
    --cta:#F0A04B;
    --green:#B1C29E;
    --green2:#AABB97;
    --text-color:#3A2C04;
    --design:#FCD189;
    --cta-hover:#ffbf7a;
    --cta-shadow:rgba(0, 0, 0, 0.25);
    --img-shadow:rgba(0, 0, 0, 0.12);
    --flastpart: #FFF0C4;;
}

.body{margin: 0;}

.header{width: 100%;
position: relative;
background-color: var(--hedaerandfooter);
}


.navi{width: 100%;
height: 100px;z-index: 111111;
background-color: var(--hedaerandfooter);
position: fixed;
padding: 0 150px 0 150px;margin: 0;
box-sizing: border-box;
display: flex;align-items: center;}

.navi2{display: flex;width: 100%;
flex-direction: row;margin: 0;
justify-content: space-between;
align-items: center;}


.list-header{margin: 0;padding: 0;
list-style-type: none;
display: flex;
flex-direction: row;
gap: 30px;align-items: center;
}


.sub-list1{color: #3A2C04;
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 600;}

.sub-list1:not(.active-nav)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 7%;
  width: 100%;
  background-color: var(--text-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s linear;
}

.sub-list1:not(.active-nav):hover::after {
  transform: scaleX(1);
}


.link-headers{text-decoration: none;width: fit-content;}



.sub-list2 {
  color: #3A2C04;
  margin: 0;height: 27px;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  position: relative; 
}

.sub-list2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 7%; 
  width: 100%;
  background-color: var(--text-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s linear; 
}



.sub-list2, .sub-list1 {
  color: #3A2C04;
  margin: 0;
  font-family: Poppins;
  font-size: 18px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}


.sub-list2:not(.active-nav)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 7%;
  width: 100%;
  background-color: var(--text-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s linear;
}

.sub-list2:not(.active-nav):hover::after {
  transform: scaleX(1);
}


.active-nav {
  text-decoration-line: underline;
  text-decoration-thickness: 9%;
  text-underline-offset: 24%;
}

.active-nav {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 9%;
    text-underline-offset: 24%;
    text-underline-position: from-font;
}

.sub-list2:not(.active-nav)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 7%;
  width: 100%;
  background-color: var(--text-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s linear;
}

.sub-list2:not(.active-nav):hover::after {
  transform: scaleX(1);
}




.nav-lang-cont{width: 98.969px;
    height: 44.152px;

flex-shrink: 0;
border-radius: 42px;
border: 1px solid var(--text-color);
background: var(--background1);
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}

.nav2-lang{margin: 0;
    display: flex;flex-direction: row;gap: 6px;
        align-items: center;
}

.english-nav{
    width: 46.491px;
height: 31.216px;background-color: var(--cta);
border-radius: 42px;display: flex;
justify-content: center;
align-items: center;
}


.engli{color: var(--text-color);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 600;}

.arab{color: var(--text-color);
margin: 0;height: 27px;
font-family: Poppins;
font-size: 18px;
font-weight: 600;}

.arab-nav{
    width: fit-content;
height: 31.216px;
border-radius: 42px;display: flex;
justify-content: center;
align-items: center;
}



.music-circle{display: flex;
width: 39.152px;
height: 39.152px;margin: 0;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
border-radius: 19.576px;
border: 1px solid var(--text-color);
background: var(--background1);}


.music-icon{
    width: 22.538px;margin: 0;padding: 0;
height: 20.428px;background-image: url(pic/pic1.png);
width: 25px;
height: 22px;
}


.music-icon.active {
    background-image: url("pic/pic2.png");  
}

.music-circle.active {
    background: var(--cta)
}

.sec1{width: 100%;height: 100vh;
background-color: var(--background1);
background-image: url(pic/pic2.svg);
background-repeat: no-repeat;
background-position: left bottom;}


.sec1-cont{display: flex;overflow: hidden;
    justify-content: center;position: relative;
    align-items: center;width: 100%;height: 100%;
    
}


.text-container-sec1{display: flex;
    flex-direction: column;width: 593.812px;
    gap: 63px;justify-content: center;
    align-items: center;
    position: relative;z-index: 1;
}

.header-sec1{color: var(--text-color);
text-align: center;
margin: 0;
font-family: Fredoka;
font-size: 64px;
font-style: normal;
font-weight: 700;
line-height: normal;}


.sub-header-container{display: flex;
flex-direction: column;gap: 28px;
justify-content: center;
align-items: center;
}

.sub-header-sec1{color: var(--text-color);
text-align: center;
margin: 0;
font-family: Fredoka;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: normal;}


.paragr-sec1{
color: var(--text-color);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}


.ctas-sec1-cont{display: flex;
    flex-direction: row;
    gap: 18px;margin: 0;
}

.cta1{display: flex;
width: 236px;
height: 56px;
justify-content: center;
align-items: center;border-color: transparent;
border-radius: 15px;
background: var(--cta);
box-shadow: 0 4px 10.4px 0 var(--cta-shadow);
transition: all 300ms linear;}

.cta1:hover{background: var(--cta-hover);}


.text-in-cta1{color: var(--text-color);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 700;}


.cta2{display: flex;
width: 236px;
height: 56px;
justify-content: center;
align-items: center;border: 1px solid var(--text-color);
border-radius: 15px;
background: var(--background1);
box-shadow: 0 4px 10.4px 0 var(--cta-shadow);
transition: all 300ms linear;}

.cta2:hover{background: var(--cta-hover);
border-color: transparent;}

.link-cta-sec1{width: 100%;height: 100%;display: flex;
justify-content: center;
align-items: center;text-decoration: none;}


.imgs-sec1-group{position: absolute;
    right: 0;
    width: 427px;
    height: 656px;
    margin: 0;}


.img1-sec1 {
    position: absolute;
    right: -59px;
    width: 320px;

    transform: scale(0) translateY(50px); 
    opacity: 0;                           
    animation: popUpFixed 1s ease-out forwards;
}

@keyframes popUpFixed {
    0% {
        transform: scale(0) translateY(50px);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) translateY(-10px); 
        opacity: 1;
    }
    80% {
        transform: scale(0.95) translateY(5px);  
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);      
        opacity: 1;                            
    }
}




.img2-sec1 {
    position: absolute;
    left: 0;
    bottom: -47px;
    width: 30vw;           
    max-width: 393px;    
    min-width: 200px;       
    
    transform: scale(0) translateY(10%); 
    opacity: 0;                        
    animation: popUp2 1s ease-out forwards;
    animation-delay: 0.3s; 
}

@keyframes popUp2 {
    0% {
        transform: scale(0) translateY(10%);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) translateY(-5%);
        opacity: 1;
    }
    80% {
        transform: scale(0.95) translateY(2%);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}


.img3-sec1{    position: absolute;
    right: -250px;
    width: 327px;
    top: 61.63px;}

.img4-sec1{    position: absolute;
    left: -225px;
    width: 272px;
    top: 73px;}

.contt-text-big-sec1{position: relative;}


.sec2{width: 100%;height: 100vh;background-color: var(--background1);
}

.sec2-info{width: 100%;height: 100vh;display: flex;
    position: relative;
justify-content: center;align-items: center;}


.card-sec2{width: 1077.56px;height: 498.78px;
background-image: url(pic/pic7.png);
display: flex;flex-direction: row;
position: relative;z-index: 1;}

.card-sec2 {
  transform: translateY(300px);
  opacity: 0;
  transition: all 500ms ease-out;
}

.card-sec2.animate {
  transform: translateY(0);
  opacity: 1;
}


.img-sec2{box-shadow: 8px 4px 4px 0 var(--img-shadow);}



.cont-2-text2-sec2{position: relative;    width: 525px;
display: flex;align-items: flex-start;gap: 29px;}


.container-text-sec2{display: flex;
width: 453.281px;
flex-direction: column;
align-items: flex-start;padding-top: 77px;
gap: 50px;}

.header-sec2{color: var(--text-color);
margin: 0;
font-family: Fredoka;
font-size: 36px;
font-style: normal;
font-weight: 600;height: 69px;
line-height: normal;}


.container-text2-sec2{
    display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}

.subhedaer-sec2{color: var(--text-color);
margin: 0;
font-family: Fredoka;height: 13px;
font-size: 18px;
font-weight: 500;}


.par-sec2{
color: var(--text-color);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: -webkit-box;
display: box;
display: flexbox;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}

.circle-sec2 {
    width: 230.08px;
    height: 230.41px;
    margin: 0;
    flex-shrink: 0;
    position: absolute;
    aspect-ratio: 1080 / 498.78;
    bottom: -132px;
    display: flex;
    justify-content: center;
    align-items: center;

    animation: bounce 2s ease-in-out infinite;
}
.circle-sec2-link {
    width: 230.08px;
    height: 230.41px;
    display: flex;
    justify-content: center;
    align-items: center;

   
}
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);  
    }
    50% {
        transform: translateY(-20px); 
    }
}





.circle-img-sec2 {
    width: 230.08px;
    height: 230.41px;
    margin: 0;
    background-image: url(pic/pic9.svg);
    background-size: cover;     
    background-position: center; position: absolute;
    transform-origin: center;   display: flex;justify-content: center;
    align-items: center;
    animation: rotateBg 20s linear infinite; 
}


@keyframes rotateBg {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.container-right-card-sec2{width: 578.78px;
display: flex;justify-content: center;
padding-left: 48px;position: relative;}



.circle-nav{width: 169.932px;margin: 0;border-radius: 50%;
    display: flex;justify-content: center;align-items: center;
height: 169.932px;background-color: var(--background1);}



.small-circle-cont{display: flex;
flex-direction: column;
gap: 22px;justify-content: center;
align-items: center;padding: 62px 0 62px 0;}

.small-circle-sec2{height: 27.551px;
align-self: stretch;width: 27.55px;border-radius: 50%;
background-color: var(--background1);}


.pic1-deco-sec2{position: absolute;left: 0;
     width: 507px;

        top: 157px;}


.pic2-deco-sec2 {
    position: absolute;
     left: -28px;
    bottom: 142px;
    width: 178px;
}

.pic3-deco-sec2{position: absolute;
    right: 0;
    bottom: 44px;
    width: 495px;
    height: 559px;
    margin: 0;
    background-image: url(pic/pic13.svg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;}



html {
    scroll-snap-type: y mandatory;
    
    scroll-behavior: auto;      
}

section {
    scroll-snap-align: start;
    scroll-snap-stop: always;     
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .snap-wrapper {
    scroll-snap-type: y mandatory;
}

.snap-wrapper section {
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
} */

section:not(.sec3) {
                
    scroll-snap-align: start;     
    scroll-snap-stop: always;     
    display: flex;
    align-items: center;
    justify-content: center;
}

footer:not(.sec3) {
                
    scroll-snap-align: start;     
    scroll-snap-stop: always;     
    display: flex;
    align-items: center;
    justify-content: center;
}





.sec3{width: 100%;
    height: 1350px;
    background-color: var(--background1);
    background-image: url(pic/pic16.svg);
    background-size: cover;}


.sec3-info{width: 100%;height: 100%;
display: flex;justify-content: center;
overflow: hidden;}

.sec3-sub-info{display: flex;
flex-direction: column;
position: relative;
    padding-top: 142px;}


.row1-sec3{width: 1080px;
display: flex;    align-items: center;
    justify-content: space-between;
  transform: translateX(500px);
  opacity: 0;
  transition: all 800ms ease-out;}



.row1-sec3.animate {
  transform: translateX(0);
  opacity: 1;
}







.text-1-sec3{display: flex;
    flex-direction: column;
    gap: 70px;width: 453.281px;
}

.chapter-cont{display: flex;
    flex-direction: column;
    gap: 30px;
}

.header-sec3{color: var(--text-color);
margin: 0;
font-family: Fredoka;
font-size: 36px;
font-style: normal;height: 25px;
font-weight: 600;
line-height: normal;}

.sub-header-sec3{color: var(--text-color);
margin: 0;
font-family: Fredoka;
font-size: 24px;
font-style: normal;height: 17px;
font-weight: 600;
line-height: normal;}


.para-sec3{color: var(--text-color);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;}


.img1-sec3{width: 588.029px;
height: 588.029px;}


.row2-sec3{display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 1080px;
    padding-top: 485.94px;
    position: absolute;
      transform: translateX(-500px);
  opacity: 0;
  transition: all 800ms ease-out;
}

.row2-sec3.animate {
  transform: translateX(0);
  opacity: 1;
}




.img2-sec3{width: 540.313px;
height: 540.313px;}



.text-box2-sec3{display: flex;
flex-direction: column;width: 438px;
gap: 33px;padding-top: 202px;}


.img-dec-sec3-1{position: absolute;
    top: 175px;
    left: 293px;}


.img2-dec-sec3-1{position: absolute;
    top: 590px;}

.sec4{width: 100%;height: fit-content;background-color: var(--background1);}


.sec4-info{width: 100%;height: 100%;justify-content: center;
    display: flex;overflow: hidden;
    
position: relative;}

.main-box-sec4{display: flex;     padding-top: 180px;height: fit-content;
    flex-direction: column;gap: 89px;width: 1191.719px;
        align-items: center;padding-bottom: 180px;
}


.title-box-sec4{display: flex;
width: 453.281px;
flex-direction: column;
align-items: center;
gap: 32px}


.card-cont-sec4{display: flex;flex-direction: row;
column-gap: 20px;row-gap: 184.17px;width: 1079.26px;
flex-wrap: wrap;position: relative;}


.card-sec4{display: flex;flex-direction: column;width: 346.263px;
gap: 35px;
  transform: translatey(280px);
  opacity: 0;
  transition: all 800ms ease-out;}


.img-sec4{margin: 0;padding: 0;background-image: url(pic/pic21.svg);
height: 346.263px;width: 346.263px;}

.para-sec4{color: var(--text-color);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 18px;
font-weight: 500;}




.card-move-down {
    transform: translateY(80px); 
}


.dec-sec4-img{position: absolute;padding: 90px 0 0 0;
    align-self: center;width: 1191.72px;height: 110.7px;
    left: -56px;}



.card-sec4.card-move-down {
  transform: translateY(360px); 
}

.card-sec4.animate {
  transform: translateY(0); 
  opacity: 1;
}


.card-sec4.card-move-down.animate {
  transform: translateY(82px);
}

.pic-dec-sec4{
        position: absolute;
    top: 136px;
    right: 50px;
}

.pic2-dec-sec4{
        position: absolute;
    bottom: 100px;
    left: 50px;
}


.sec5{width: 100%;height: fit-content;background-color: var(--background2);
background-image: url(pic/pic31.svg);}

.sec5-info{width: 100%;height: 100%;display: flex;
justify-content: center;position: relative;
background-image: url(pic/pic40.png);overflow: hidden;
    background-position: center 30px;}


.all-nfo-sec5{width: 1080px;display: flex;
flex-direction: column;gap: 72px;
padding-top: 100px;padding-bottom: 100px;
}

.text-box1-sec5{display: flex;flex-direction: column;
gap: 30px;padding-top: 80px;}

.header-sec5{color: var(--text-color);
margin: 0;
font-family: Fredoka;
font-size: 36px;
font-style: normal;
font-weight: 600;height: 25px;
line-height: normal;}

.sub-title-sec5{color: var(--text-color);
margin: 0;
font-family: Fredoka;
font-size: 24px;
font-style: normal;height: 24px;
font-weight: 600;
line-height: normal;}

.box2-sec5{display: flex;flex-direction: column;gap: 30px;}

.card1-sec5{width: 805px;
height: 492.798px;
flex-shrink: 0;
border-radius: 44px;display: flex;
justify-content: center;align-items: center;
background: var(--design);
      transform: translateX(-500px);
  opacity: 0;
  transition: all 800ms ease-out;}


.card1-sec5.animate {
  transform: translateX(0);
  opacity: 1;
}



.card-info-sec5{width: 100%;height: 100%;position: relative;
padding: 40px;box-sizing: border-box;
}




.text-card-sec5{width: 348px;height: 349px;
background-image: url(pic/pic33.png);
display: flex;justify-content: center;position: relative;z-index: 1;
align-items: center;flex-direction: column;
gap: 21px;padding: 0 30px 0 30px;box-sizing: border-box;}

.para-sec5{color: var(--text-color);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;}


.img1-sec5{position: absolute;
    bottom: 40px;
    right: 40px;}


.tap-sec5{position: absolute;   
    top: -20px;
    right: -30px;}


.card2-sec5{width: 805px;
height: 492.798px;
flex-shrink: 0;margin-left: 275px;
border-radius: 44px;display: flex;
justify-content: center;align-items: center;
background: var(--design);
      transform: translateX(500px);
  opacity: 0;
  transition: all 800ms ease-out;}


.card2-sec5.animate {
  transform: translateX(0);
  opacity: 1;
}





.card-2info-sec5{width: 100%;height: 100%;position: relative;
padding: 40px;box-sizing: border-box;}


.textcard2-sec{width: 417.879px;
height: 387.08px;
flex-shrink: 0;background-repeat: no-repeat;position: relative;
background-image: url(pic/pic36.png);    z-index: 1;
display: flex;justify-content: center;
align-items: center;    margin-left: 306.46px;}

.text-sub-box-sec5{    display: flex;
    width: 365.435px;
    height: 346.545px;
    transform: rotate(-3.876deg);
    padding: 30px 18px 30px 70px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    gap: 10px;}

.img2-sec5{position: absolute;bottom: 40px;}

.tap2-sec5{position: absolute;top: -10px;}

.img-dec1-sec5{position: absolute;top: 285px;
        right: 147px;}

.img2-dec1-sec5{position: absolute;top: 600px;
       right: 28px;}

.img3-dec1-sec5{position: absolute;bottom: 140px;
       left: 150px;}


.img4-dec1-sec5{position: absolute;    bottom: 613px;
       left: 50px;}




.sec6{width: 100%;height: fit-content;background-color: var(--background1);
}

.cont-info-sec6{width: 100%;height: 100%;justify-content: center;
display: flex;overflow: hidden;
    box-sizing: border-box;
    justify-content: center;
    padding: 100px 0 100px 0;
}


.big-cont-sec6{display: flex;flex-direction: column;
gap: 97px;position: relative;width: 1080px;}


.sub-big-cont-sec6{display: flex;flex-direction: column;
gap: 110px;padding-top: 80px;width: 1080px;}


.text-cont-sec6{display: flex;flex-direction: column;
gap: 30px;align-items: center;}


.header-sec6{color: var(--text-color);
margin: 0;
font-family: Fredoka;
font-size: 36px;
font-style: normal;height: 25px;
font-weight: 600;
line-height: normal;}

.sub-header-sec6{color: var(--text-color);
margin: 0;
font-family: Fredoka;
font-size: 24px;
font-style: normal;height: 17px;
font-weight: 600;
line-height: normal;}


.cards-horix-sec6{display: flex;flex-direction: row;gap: 20px;
    height: 547px;
}

.card-sec6{display: flex;flex-direction: column;gap: 35px;
  transform: translatey(280px);
  opacity: 0;
  transition: all 800ms ease-out;}

.img-sec6{margin: 0;padding: 0;
    height: 350.863px;width: 346px;border-radius: 15px;
    background-image: url(pic/pic46.svg);position: relative;
    display: flex;justify-content: center;
    align-items: center;
}

.para-sec6{color: var(--text-color);
text-align: center;
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;}

.card-move-down-sec6 {
    transform: translateY(80px); 
}


.img-dec-sec6{position: absolute;    top: -60px;}

.img-sec6-hori{position: absolute;align-self: center;    top: -136px;
}





.card-sec6.card-move-down-sec6  {
  transform: translateY(360px); 
}

.card-sec6.animate2 {
  transform: translateY(0); 
  opacity: 1;
}


.card-sec6.card-move-down-sec6.animate2 {
  transform: translateY(82px);
}


.end-container{display: flex;
    flex-direction: row;
    gap: 52px;    width: 1080px;
        justify-content: center;
    align-items: flex-end;
      opacity: 0;
  transition: all 800ms ease-out;
}

.end-container.animate2 {
  
  opacity: 1;
}

.end{color: var(--green2);
margin: 0;
font-family: Fredoka;
font-size: 36px;
font-weight: 600;}

.footerr{width: 100%;
height: fit-content;background-color: var(--hedaerandfooter);
display: flex;flex-direction: column;
gap: 70px;}


.footercont1{padding: 96px 150px 0 150px;box-sizing: border-box;
    width: 100%;height: 100%;}

.box-big-footer{display: flex;flex-direction: column;
    gap: 60px;
}

.sub-box-1footer{display: flex;
    flex-direction: column;gap: 38px;width: 355.539px;
    
}

.slogen-footer{color: var(--text-color);
margin: 0;
font-family: Fredoka;
font-size: 36px;
font-weight: 600;
line-height: 140%; /* 50.4px */}


.nav-b0x-footer{display: flex;margin: 0;
flex-direction: row;gap: 20px;}


.hori-footer{display: flex;flex-direction: row;
justify-content: space-between;width: 100%;
    ALIGN-ITEMS: flex-end;}


.box2-footer{display: flex;
width: 469.909px;
flex-direction: column;
align-items: flex-start;
gap: 26px;}

.subtit-footer{color: var(--text-color);
margin: 0;
font-family: Fredoka;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;}












.form-f{width: 438px;margin: 0;padding: 0;
height: 56px;position: relative;}


.input-f{width: 414.481px;
  
height: 56px;
flex-shrink: 0;
border-radius: 15px;
background: var(--background1);
display: flex;    border-color: transparent;
display: flex;align-items: center;
padding: 0 0 0 31px;box-sizing: border-box;}



.input-f::placeholder {
  color: var(--text-color);
margin: 0;
font-family: Poppins;

font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */
}


.input-f:focus {
  outline: none; 
  border-color: transparent; 
}


.buttom-f{display: flex;
width: 149px;margin: 0;
height: 56px;position: absolute;right: 0;
justify-content: center;top: 0;
align-items: center;
gap: 10px;
flex-shrink: 0;border-color: transparent;
border-radius: 15px;
background: var(--cta);
transition: all 300ms linear;}


.link-f{width: 100%;height: 100%;
display: flex;justify-content: center;
align-items: center;text-decoration: none;
}

.text-cta-f{color: var(--text-color);
margin: 0;
font-family: Poppins;

font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;}

.buttom-f:hover{background-color: var(--cta-hover);}



.contact-info-box-f{display: flex;
width: 386px;
flex-direction: column;
align-items: center;    align-items: self-start;
gap: 26px;}

.hori-list-footer{list-style-type: none;margin: 0;padding: 0;
display: flex;flex-direction: column;gap: 20px;}


.list-small-f{display: flex;flex-direction: row;gap: 15px;
margin: 0;padding: 0;}

.title-f{color: var(--text-color);
margin: 0;
font-family: Poppins;
font-size: 18px;
font-style: normal;width: 81px;
font-weight: 600;
line-height: 140%; /* 25.2px */}

.info-f {
    color: var(--text-color);
    margin: 0;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    position: relative;
    cursor: pointer; 
}

.info-f::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; 
    height: 1.7px;
    width: 0; 
    background-color: var(--text-color);
    transition: width 0.3s ease; 
}

.info-f:hover::after {
    width: 100%; 
}



.last-part-f{width: 100%;height: 47.9px;
padding: 0 150px 0 150px;box-sizing: border-box;
display: flex;justify-content: space-between;
align-items: center;
background-color: var( --flastpart);}


.small-text-foooter{color: var(--text-color);
font-family: Poppins;margin: 0;
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 15px */}


.small-list-footer{list-style-type: none;
margin: 0;padding: 0;display: flex;align-items: center;
flex-direction: row;gap: 10px;}


.link-small-text-f{text-decoration: none;}

.listt-footerrr-small{color: var(--text-color);
margin: 0;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;    position: relative;
    cursor: pointer; 
}

.listt-footerrr-small::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px; 
    height: 1.4px;
    width: 0; 
    background-color: var(--text-color);
    transition: width 0.3s ease; 
}
.listt-footerrr-small:hover::after {
    width: 100%; 
}



.rec-small{width: 1px;
height: 13.503px;
background: var(--text-color);}












@media (max-width: 1280px) {
    .navi{width:1280px;
height: 100px;padding: 0 100px 0 100px;}


.imgs-sec1-group{position: absolute;
right: 0;width: 315px;height: 566px;
margin: 0;padding-top: 71px;}



.img1-sec1 {
    position: absolute;
    right: -59px;
    width: 254px;

    transform: scale(0) translateY(50px); 
    opacity: 0;                           
    animation: popUpFixed 1s ease-out forwards;
}

@keyframes popUpFixed {
    0% {
        transform: scale(0) translateY(50px);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) translateY(-10px);
        opacity: 1;
    }
    80% {
        transform: scale(0.95) translateY(5px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);      
        opacity: 1;                            
    }
}





.img2-sec1 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 275px;

    transform: scale(0) translateY(50px);
    opacity: 0;                           
    animation:  popUp2 1s ease-out forwards;
    animation-delay: 0.3s; 
}

@keyframes  popUp2 {
    0% {
        transform: scale(0) translateY(50px);
        opacity: 0;
    }
    60% {
        transform: scale(1.1) translateY(-10px); 
        opacity: 1;
    }
    80% {
        transform: scale(0.95) translateY(5px);  
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);    
        opacity: 1;                             
    }
}


.img4-sec1{position:absolute;
left: -144px;width: 220px;
top: 38px;}

.sec1-cont {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    width: 1280px;}

.img3-sec1{position:absolute;
right: -196px;width: 294px;
top: 43.63px;}

.body {
    margin: 0;
    width: 1280px;
    overflow-x: hidden;
overflow-y: scroll;}

.pic3-deco-sec2{position: absolute;right: 0;
    bottom: 0;    width: 540px;height: 490px;
margin: 0;   width: 433px;
background-image: url(pic/pic14.svg);
        right: -149px;
        bottom: 35px;}

.pic1-deco-sec2{position: absolute;left: 0;
    top: 149px;width: 298px;
left: -55px;
        top: 157px;}
.pic2-deco-sec2{position: absolute;left: 0;
    bottom: 115px;width: 114.788px;
}

.sec2-info { overflow: hidden;}

.sec3{width: 100%;
background-color: var(--background1);
background-image: url(pic/pic15.svg);}

.pic2-dec-sec4{
        position: absolute;
    bottom: 57px;
    left: -13px;
}



.sec5{width: 1280px;background-color: var(--background2);
background-image: url(pic/pic32.png);}

.sec5-info{
background-image: url(pic/pic41.png);
 background-position: center 100px;}





.img-dec1-sec5{position: absolute;top: 285px;
        right: 58px;}


.img2-dec1-sec5{position: absolute;top: 600px;
       right: -28px;}


.img3-dec1-sec5{position: absolute;bottom: 140px;
       left: 100px;}


.img4-dec1-sec5{position: absolute;    bottom: 440px;
       left: -22px;}


.footerr {width: 1280px;}
.footercont1 {
    padding: 96px 100px 0 100px;}

.last-part-f {    padding: 0 100px 0 100px;}




}





















