@font-face {
    font-family: "Toonish";
    src: url(font/TOONISH.ttf)}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



:root{
  --background: #ECD5BC;
  --header:#FFEDE8;
  --border-color:#0B1E37;
  --header-shadow:rgba(0, 0, 0, 0.25);
  --black:#000;
  --design :#DE7655;
  --cta:#E9B63B;
  --background2:#B5C8CE;
  --ctahover:#ffffff;
  --white:#FFF;
  --footershadow:rgba(0, 0, 0, 0.09);
  --red:red;
  --gray:#30303095;
}

.bodyy{background-color: var(--background);
   overflow-x: hidden;
background-position: center;position: relative;
width: 100vw;background-image: url(pic/img1.png);
background-size: cover;}

.header{width: 100%;
        justify-content: center;
    display: flex;
    

}

.nav-header {
    height: 74.659px;
    background-color: var(--header);
    border-radius: 26px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 4px 0 var(--header-shadow);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 42px;
    left: 150px; 
    right: 150px; 
  z-index: 111111;
}



.list-header{list-style-type: none;
flex-direction: row;
justify-content: center;
align-items: center;display: flex;
gap: 72px;}


.list-text-header{color: var(--black);
font-family: Montserrat;
font-size: 18px;
font-weight: 700;
line-height: 102.591%; 
position: relative; 
display: inline-block; }

.list-text-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    top: 22px;
    width: 0; 
    height: 2px;
    background-color: var(--black);
    transition: width 0.3s ease; 
}

.list-text-header:hover::after {
    width: 100%;
}

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


body::-webkit-scrollbar {
    width: 12px; 
    height: 12px; 
}


body::-webkit-scrollbar-track {
    background: var(--header);
    border-radius: 10px;
}


body::-webkit-scrollbar-thumb {
    background-color: var(--design); 
    border-radius: 10px;
}


.sec1{width: 100%;
    height: fit-content;
    display: flex;padding: 0 8%; 
justify-content: center;
min-width: 1080px;}


.sec1-main-info{
        max-width: 1280px;
        width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    /* gap: 5%; */
    padding-top: 234px;
}


.header-sec1{color: var(--border-color);
text-align: center;
margin: 0;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: var(--black);
font-family: Toonish;
font-size: 126.232px;
font-style: normal;
font-weight: 400;
line-height: 121%; position: relative;z-index: 1;
letter-spacing: 4.8px;
  font-size: clamp(117px, 8vw, 126px);
}



.row-sec1{display: flex;
    margin: 0;   justify-content: space-between;
flex-direction: row;
width: 100%;}


.big-box-sec1{display: flex;    gap: 40px;
flex-direction: column;}

.img1-sec1{width: 262px;height: 234px;}

.box1-sec1{display: flex;
flex-direction: row;
gap: 16px;width: 369px;align-items: center;
padding-top: 116.71px;
    height: fit-content;}

.rect0sec1{width:  6.661px ;
height:63px;
background-color: var(--design);
}

.parag-sec1{
color: var(--black);
margin: 0;
text-overflow: ellipsis;
font-family: Montserrat;
font-size: 18px;
font-weight: 500;
line-height: 140%; /* 25.2px */
    animation: fadeSlideUp 0.3s ease-out;
}

@keyframes fadeSlideUp {
    0% {
        opacity: 0.7;
        transform: translateY(18px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



.big-box2-sec1{display: flex;
flex-direction: column;
justify-content: space-between;}

.imgdec02-sec1{width: 210.2px;height: 210.2px;
margin-left: 20px;}


.img-left-sec1{position: absolute;left: 0;
width: 206.4px;height: 181.32px;
    top: 139px;}





.box2-sec1{display: flex;
flex-direction: row;align-items: center;
gap: 16px;width: 369px;
    height: fit-content;
    align-self: end;
    padding-bottom: 145px}

.parag2-sec1{
color: var(--black);
margin: 0;
text-overflow: ellipsis;
font-family: Montserrat;
font-size: 18px;
font-weight: 500;
text-align: end;
line-height: 140%; /* 25.2px */
    animation: fadeSlideUp 0.3s ease-out;}


.cont-img-sec1{width: 346.39px;height: 571.35px;
position: relative;display: flex;
justify-content: center;}



.pic-sec1 {
    opacity: 0;
    transform: translateY(20px);
  transform: translateY(20px) scale(0.9);
}


.pic-sec1.animate {
  animation: jumpIn 0.6s ease-out forwards;
}



@keyframes jumpIn {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translateY(-27px) scale(1.03);
    }
    100% {
         opacity: 1;
        transform: translateY(0) scale(1);
    }
}



.sec2{width: 100%;
    height: 915px;
    display: flex;
justify-content: center;padding: 0 8%; 
min-width: 1080px;position: relative;
z-index: 1;
}


.sec2-background{
    background-image: url(pic/img10.png);
    width: 100%;position: absolute;
    top: -4px;
    height: 100%;
        top: -41px;
    height: 105%;
}


.main-info-sec2{max-width: 1280px;
    width: 100%;
display: flex;z-index: 1;align-items: center;
flex-direction: row;padding-top: 112px;
    justify-content: space-between;}

.text-box-sec2{display: flex;
flex-direction: column;
gap: 82px;width: 438px;}


.header-sec2{color: var(--border-color);
font-family: Toonish;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 121%; /* 48.4px */
letter-spacing: 4px;}


.parag-cont{display: flex;
flex-direction: column;
gap: 32px;}

.para-sec2{
color: var(--black);
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */}


.cta-sec2{display: flex;
width: 225px;
height: 54px;
justify-content: center;
align-items: center;
border-radius: 16px;
border: 1px solid var(--border-color);
background: var(--cta);
transition: all 100ms linear;}

.cta-sec2:hover{background-color: var(--ctahover);}
.link-sec2{width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none
;}

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



.imgs-container-sec2{width: 583.67px;
position: relative;
flex-direction: column;
    display: flex;}


.img-1-sec2{align-self: flex-end;
width: 532.51px;
height: 344.238px;
    transition: all 0.6s ease-out 0.2s;
  transform: scale(0);  
  opacity: 0;}

.img-2-sec2{width: 405.31px;
height: 256.96px;
    transition: all 0.6s ease-out;
  transform: scale(0);  
  opacity: 0;
}

.img-2-sec2.animate {
  transform: scale(1) translateX(0); 
  opacity: 1;
}

.img-1-sec2.animate {
  transform: scale(1) translateX(0); 
  opacity: 1;
}


.sec3{width: 100%;
  height: fit-content;
    display: flex;
justify-content: center;padding: 0 8%; 
min-width: 1080px;position: relative;
z-index: 1;}


.main-info-sec3{max-width: 1280px;
    width: 100%;
display: flex;
flex-direction: row;padding-top: 115px;
    padding-bottom: 115px;
    justify-content: center;}


.sub-info-sec3{display: flex;
flex-direction: column;    align-items: center;
gap: 54px;    width: 100%;}


.header-sec3{color: var(--border-color);
text-align: center;
font-family: Toonish;
font-size: 40px;
font-style: normal;width: 438px;
font-weight: 400;
line-height: 121%; /* 48.4px */
letter-spacing: 4px;}


.row-sec3{display: flex;
flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
height: 562px;
    align-items: flex-start;}


.card-sec3{width: 100%;height: 425.15px;
display: flex;justify-content: center;
background-image: url(pic/pic13.png);
background-size: cover;
border-radius: 20px;}

.big-card-sec3{display: flex;flex-direction: column;
gap: 40px;
display: flex;    width: 100%;cursor: pointer;
justify-content: center;}


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





.title-cards-sec3{color: var(--black);
text-align: center;
font-family: Montserrat;
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 121%; /* 33.88px */}




.cta-sec3{display: flex;
width: 276px;
height: 54px;
justify-content: center;
align-items: center;
border-radius: 16px;
border: 1px solid var(--border-color);
background: var(--cta);
transition: all 100ms linear;}

.cta-sec3:hover{background-color: var(--ctahover);}
.link-sec3{width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none
;}

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

.img-pop {
  opacity: 0;
  transform: scale(0.5) translateY(40px); 
  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out;
}

.img-pop.animate {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.img-pop.img-delay-2 {
  transition-delay: 0.25s;
}



.sec4{width: 100%;
    height: fit-content;
    display: flex;
justify-content: center;padding: 0 8%; 
min-width: 1080px;position: relative;
z-index: 1;
background-image: url(pic/pic17.png);}



.main-info-sec4{max-width: 1280px;
    width: 100%;
display: flex;gap: 85px;
flex-direction: column;padding-top: 348px;
    padding-bottom: 115px;position: relative;
    justify-content: center;}


.part1-sec4{display: flex;
flex-direction: row;
justify-content: space-between;
    align-items: end;}


.header-sec4{color: var(--border-color);
font-family: Toonish;
font-size: 40px;
font-weight: 400;
line-height: 121%; 
letter-spacing: 4px;}


.navagation-sec4{display: flex;
flex-direction: row;text-decoration: none;
gap: 12px;}

.link-text-sec4{color: var(--border-color);
font-family: Montserrat;
font-size: 18px;
font-weight: 700;}

.arrow-sec4{width: 18px;height: 15px;}


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

.card-sec4 {
  width: 100%;
  height: fit-content;
  border-radius: 36px;
  background-color: var(--white);
  padding: 32px 36px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;opacity: 0;
   transform:translateY(100px); 
  transition:all 0.3s ease-out
}

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




.img-card-sec4 {
  width:100%;
  height: 248.494px;
  aspect-ratio: 456.34 / 248.49;
  border-radius: 20px;
  overflow: hidden;background-size: cover;
  position: relative;
}

.img-card-sec4::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-position: center;
  background-size: cover;
  transition: transform 0.6s ease;
  transform: scale(1);
}
.card-sec4:hover .img-card-sec4::before {
  transform: scale(1.15);
}


.text-box-card-sec4{display: flex;
flex-direction: column;
gap: 20px;}

.header-card-sec4{color: var(--black);
font-family: Montserrat;
font-size: 28px;
font-style: normal;
font-weight: 700;height: 20px;
line-height: 121%;}


.para-card-sec4{
color: var(--black);
font-family: Montserrat;
font-size: 18px;
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;}

.img-decoration-sec4-1{position: absolute;
    left: -100px;
    top: 395px;}

.img-decoration-sec4-2{
    position: absolute;
    right: -70px;
    bottom: 37px;}




.sec5{width: 100%;
    height: fit-content;
    display: flex;
justify-content: center;padding: 0 8%; 
min-width: 1080px;
}



.main-info-sec5{max-width: 1280px;
    width: 100%;height: 100%;
display: flex;gap: 85px;
flex-direction: column;padding-top: 115px;
    padding-bottom: 115px;position: relative;
    justify-content: center;}



.header-sec5{color: var(--border-color);
text-align: center;
font-family: Toonish;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 121%; /* 48.4px */
letter-spacing: 4px;}


.cards-container-sec5{display: flex;
flex-direction: row;    justify-content: space-between;
gap: 20px;}

.card-sec5{
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    height: 393px;display: flex;
    border-radius: 21px;flex-direction: column;
padding: 26px 26px 0 26px;gap: 30px;
background-image: url(pic/pic23.png);
   transform:translateY(140px); opacity: 0;
  transition:all 0.6s ease-out
}

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

.card-sec5.delay-2 {
  transition-delay: 0.1s; 
}

.img-card-sec5 {
  width: 100%;
  height: 196.976px;
  aspect-ratio: 293.55/196.98;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.img-card-sec5::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-position: center;
  background-size: cover;
  transition: transform 0.6s ease;
  transform: scale(1);
}


.card-sec5:hover .img-card-sec5::before {
  transform: scale(1.15);
}


.container-text-sec5{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.small-text-card-sec5{color: var(--black);
font-family: Montserrat;
font-size: 18px;
font-style: normal;height: 18px;
font-weight: 500;
line-height: 121%;}

.title-card-sec5{color: var(--black);
font-family: Montserrat;
font-size: 28px;
font-weight: 700;
line-height: 121%; }

.link-cards-sec5{text-decoration: none;
    width: 100%;}








.footerr{width: 100%;
    height: 407.425px;
    display: flex;
justify-content: center;padding: 0 8%; 
min-width: 1080px;
}

.footerr2{width: 100%;
    height: 407.425px;
    display: flex;
justify-content: center;padding: 0 8%; 
min-width: 1080px;
background-image: url(pic/pic81.png);
}

.main-info-footer{
    width: 100%;height: 100%;
    border-radius: 121px 85px 0 0;
border: 1px solid var(--border-color);
background: var(--header);
box-shadow: 0 -2px 14.2px 0 var(--footershadow);
display: flex;
flex-direction:column ;   
padding-top: 109px;justify-content: space-between;
}


.part1-footer{display: flex;
flex-direction: row; padding: 0 90px 0 90px;
justify-content: space-between;}



.box1-footer{display: flex;
    flex-direction: column;
    gap: 26px;list-style-type: none;

}

.header1-footer{    color: var(--black);
font-family: Montserrat;
font-size: 24px;width: 408px;
font-weight: 700;}


.list1-footer{display: flex;
    flex-direction: row;
    gap: 15px;
}

.titles-footer{color: var(--black);
font-family: Montserrat;
font-size: 18px;width: 81px;
font-weight: 600;
line-height: 140%; /* 25.2px */}


.information-footer {
  color: var(--black);
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 500;
  position: relative;      
  display: inline-block;  
}

.information-footer::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;             
  height: 1.7px;          
  width: 0;             
  background-color: var(--black); 
  transition: width 0.3s ease;   
}

.information-footer:hover::after {
  width: 100%;
}



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

.list-sub-container-box1-footer{display: flex;
    flex-direction: column;
    gap: 20px;list-style-type: none;
}


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

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


.header-2-footer{color: var(--black);
font-family: Montserrat;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;}


.navigation-box-footer{
    width: 438px;;position: relative;
height: 54px;
}

.input-footer{width: 438px;
height: 54px;
border-radius: 16px;
border: 1px solid var(--black);
background: var(--header);
color: var(--black);
font-family: Montserrat;
font-size: 18px;padding-left: 24px;
font-weight: 500;   
line-height: 140%; /* 25.2px */}



.input-footer::placeholder {
color: var(--black);
font-family: Montserrat;
font-size: 18px;
font-weight: 500;    
line-height: 140%; /* 25.2px */
}


.input-footer:focus {
    color: var(--black);
font-family: Montserrat;
font-size: 18px;
font-weight: 500; 
line-height: 140%; /* 25.2px */
  outline: none; 
}

.cta-footer{display: flex;
width: 184.379px;
height: 54px;position: absolute;right: 0;top: 0;
justify-content: center;
align-items: center;
border-radius: 16px;
border: 1px solid var(--border-color);
background: var(--cta);}

.cta-footer:hover{background: var(--ctahover);}
.link-cta-footer{width: 100%;height: 100%;
display: flex;
justify-content: center;
align-items: center;text-decoration: none;
}

.submit-footer{color: var(--black);
font-family: Montserrat;
font-size: 18px;
font-weight: 600;}

.part2-footer{
    width: 100%;
    height: 40.532px;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
background: var(--header);
display: flex;
align-items: center;    justify-content: space-between;
padding: 0 20px;
}


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

.last-list-footer{display: flex;
    flex-direction: row;
    gap: 11px;
    list-style-type: none;
}


.last-list-text-footer{
    color: #000;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
  position: relative;      
  display: inline-block;  
}

.last-list-text-footer::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;             
  height: 1.3px;          
  width: 0;             
  background-color: var(--black); 
  transition: width 0.3s ease;   
}


.last-list-text-footer:hover::after {
  width: 100%;
}


.small-rect-footer{width: 1px;
height: 13.503px;background: var(--black);}

.cta-footer-header{display: flex;
width: 140px;
height: 54px;
justify-content: center;
align-items: center;
border-radius: 16px;
border: 1px solid var(--border-color);
background: var(--cta);}


.cta-footer-header:hover{background: var(--ctahover);}

.cart-cont-hedaer{display: flex;
width: 46.825px;
height: 46.825px;
padding: 11px;
align-items: center;cursor: pointer;
gap: 10px;
border-radius: 23.413px;
border: 1.261px solid var(--black);
background: var(--cta);}

.cart-cont-hedaer:hover{background: var(--ctahover);}

.profile-cont-hedaer{display: flex;
width: 46.825px;
height: 46.825px;
padding: 11px;
align-items: center;cursor: pointer;
gap: 10px;
border-radius: 23.413px;
border: 1.261px solid var(--black);
background: var(--cta);}

.profile-cont-hedaer:hover{background: var(--ctahover);}


.sec1-page2{width: 100%;
    height: fit-content;
    display: flex;padding: 0 8%; 
justify-content: center;
min-width: 1080px;}

.sec1-main-info-page2{
        width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
       padding-top: 240px;
    padding-bottom: 120px;
        max-width: 1280px;
}


.container-sec1-p2{
    display: flex;width: 100%;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}

.text-container-sec1-p2{display: flex;
flex-direction: column;    justify-content: center;
gap: 67px;
position: relative;}




.big-header-sec1-p2{color: var(--border-color);
text-align: center;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: var(--black);
font-family: Toonish;
font-size: 126.232px;
font-weight: 400;
line-height: 121%;
letter-spacing: 4px;}



.small-text-sec1-p2{color: var(--border-color);
text-align: center;
font-family: Toonish;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 121%; /* 24.2px */
letter-spacing: 4px;}



.img-sec1-p2{
    width: 476.586px;
height: 584.944px;
background-image: url(pic/pic34.png);
background-size: cover;
display: flex;
justify-content: center;
}



.img-decor-sec1-p2{position: absolute;
    right: -219px;
    top: -37px;}


.img2-decor-sec1-p2{position: absolute;
    right: -133px;
    bottom: 104px;}


.img3-decor-sec1-p2{position: absolute;
    left: -195px;
    bottom: 99px;}


.big-img-sec1-p2 {
    display: block;
    opacity: 0;
    transform: translateY(40px) scale(0.8); 
    transition: all 0.4s ease-out;
}

.big-img-sec1-p2.animate {
    opacity: 1;
    transform: translateY(0) scale(1); 
}



.sec2-p2{width: 100%;height: fit-content;
background-image: url(pic/pic41.png);
    background-position: left;
    display: flex;background-size: cover;
    justify-content: center;
        padding: 0 8%;
}



.main-info-sec2-p2 {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
        padding-top: 225px;
        padding-bottom: 180px;
        
}


.header-sec2-p2{
    color: var(--border-color);
text-align: center;
font-family: Toonish;
font-size: 40px;
font-weight: 400;
line-height: 121%; /* 48.4px */
letter-spacing: 4px;
}


.row-sec2-p2{display: flex;
flex-direction: row;justify-content: space-between;
gap: 20px;}


.img-container-sec2-p2{width: 347px;   
height: 526.55px;
    display: flex;
    justify-content: center;}

.imgs-sec2-p2{display: block;
       transform:translateY(160px); opacity: 0;
  transition:all 0.4s ease-out
}

.imgs-sec2-p2.animate {
  opacity: 1;
  transform:  translateY(0);
}


.text-box-sec2-page2{display: flex;
flex-direction: row;gap: 20px;
    padding-top: 120px;}

.colum-box-sec2-page2{display: flex;
flex-direction: column;width: 347px;
gap: 80px;}


.para1-sec2-page2{
color: var(--black);
margin: 0;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */}



.para2-sec2-page2{
color: var(--black);
margin: 0;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */}


.colum2-box-sec2-page2{display: flex;
flex-direction: column;width: 347px;
gap: 80px;padding-top: 35px;}




.para3-sec2-page2{
color: var(--black);
margin: 0;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */}




.para4-sec2-page2{
color: var(--black);
margin: 0;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */}


.sec3-page2{width: 100%;height: 848px;
    display: flex;
    justify-content: center;
        padding: 0 8%;}

.main-info-sec3-p2 {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
        padding-top: 115px;
        padding-bottom: 115px;
        gap: 85px;
        
}


.header-sec3-p2{color: var(--border-color);
font-family: Toonish;
font-size: 40px;
font-weight: 400;
line-height: 121%; /* 48.4px */
letter-spacing: 4px;}

.card-sec3-p2{width: 980.68px;
height: 468.813px;
background-image: url(pic/pic45.png);
background-size: cover;
align-self: center;
display: flex;
flex-direction: row;}

.paragraph-container-sec3-p2{margin-left: 133px;
display: flex;    justify-content: center;
flex-direction: column;
width: 479px;
gap: 48px;}


.para-sec3-p2{
color: var(--black);
font-family: Montserrat;
font-size: 18px;width: 347px;
font-weight: 500;
line-height: 140%; /* 25.2px */}


.paragraph-container-sec3-p2 p:nth-child(2) {
    margin-left: 132.06px;
}


.img-container-sec3-p2{width: 333.62px;height: 457.56px;
    align-self: end;
        display: flex;
    align-items: end;
    
}


.img-sec3-p2{display: block;
           transform:translateY(130px); opacity: 0;
  transition:all 0.5s ease-out
}

.img-sec3-p2.animate {
  opacity: 1;
  transform:  translateY(0);
}




.sec4-page2{width: 100%;height: fit-content;
    display: flex;
    justify-content: center;
        padding: 0 8%;
    background-color: var(--background2);
background-image: url(pic/pic49.png);
background-size: cover;
}

.main-info-sec4-p2 {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
        padding-top: 115px;
        padding-bottom: 115px;
        gap: 85px;
        
}



.header-sec4-p2{color: var(--border-color);
text-align: center;
font-family: Toonish;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 121%; /* 48.4px */
letter-spacing: 4px;}

.row-sec4-p2{display: flex;
flex-direction: row;
gap: 20px;
    justify-content: center;}


.card-sec4-p2{
    width: 100%;
    background-size: cover;
    background-position: bottom;
        background-repeat: no-repeat;
height: 397.32px;
border-radius: 20px;
padding: 24px 24px 0 24px;
gap: 25px;display: flex;
flex-direction: column;
background-image: url(pic/pic50.png);
       transform:translateY(140px); opacity: 0;
  transition:all 0.5s ease-out
}

.card-sec4-p2.animate {
  opacity: 1;
  transform:  translateY(0);
}

#episodeCardsContainer a:nth-child(2) .card-sec4-p2.animate {
    transition-delay: 0.1s;
}


.img-card-sec4-p2 {
  width:100%;
  height: 208.234px;
 aspect-ratio: 310.32/208.23;
  border-radius: 20px;
  overflow: hidden;background-size: cover;
  position: relative;
}

.img-card-sec4-p2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-position: center;
  background-size: cover;
  transition: transform 0.6s ease;
  transform: scale(1);
}
.card-sec4-p2:hover .img-card-sec4-p2::before {
  transform: scale(1.15);
}

.text-card-box-sec4-p2{display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;}


.small-text-sec4-p2{color: var(--black);
font-family: Montserrat;
font-size: 18px;
font-weight: 500;height: 13px;
line-height: 121%;}

.title-sec4-p2{color: var(--black);
font-family: Montserrat;
font-size: 28px;
font-weight: 700;
line-height: 121%; }


.link-sec4-cards-p2{text-decoration: none;
    width: 100%;}



#episodeCardsContainer a:nth-child(2) .card-sec4-p2 {
    margin-top: 56px;
}





.sec5-p2{width: 100%;height: fit-content;
    background-position: left;
    display: flex;background-size: cover;
    justify-content: center;
        padding: 0 8%;
}



.main-info-sec5-p2 {
    max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
        padding-top: 115px;
        padding-bottom: 115px;
        gap: 85px;
        
}

.part1-sec5-p2{display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
}

.header-sec5-p2{color: #0B1E37;
font-family: Toonish;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 121%; /* 48.4px */
letter-spacing: 4px;}



.cards-sec5-p2{display: flex;
gap: 20px;position: relative;
flex-wrap: wrap;       transform:translateY(140px); opacity: 0;
  transition:all 0.5s ease-out
}

.cards-sec5-p2.animate {
  opacity: 1;
  transform:  translateY(0);
}


.link-sec5-p2{ width:49%;}


.img-card-sec5-p2 {
  width:100%;
  height: 286.065px;
border-radius: 26px;
border: 2px solid var(--white);
  overflow: hidden;background-size: cover;
  position: relative;
}

.img-card-sec5-p2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-position: center;
  background-size: cover;
  transition: transform 0.6s ease;
  transform: scale(1);
}
.img-card-sec5-p2:hover::before {
  transform: scale(1.15);
}




.container-login-page{
        display: flex;
    flex-direction: row;
    gap: 35px;
    margin: 0;
    padding: 0;
    justify-content: space-between;
    align-items: center;
    height: fit-content;
    width: 100%;
}

.img1-login-page {
  width: 464.483px;
  height: 642.897px;
  margin: 0;
  padding: 0;
  background-image: url(pic/pic74.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  opacity: 0;
  transform: translateY(100px); 
  transition: all 0.4s ease-out 3006ms;
}

.img1-login-page.animate {
  opacity: 1;
  transform: translateY(0);
}















.content-info-login-page{display: flex;flex-direction: column;gap: 64px;border-radius: 15px;
margin: 0;padding: 74px 51px;box-sizing: border-box;background-color: var(--white);
width: 628px;}

.header-log-in-page{color:var(--black);
text-align: center;
font-family: Montserrat;
font-size: 32px;
font-weight: 800;margin: 0;
line-height: 140%;}

.form{margin: 0;padding: 0;display: flex;flex-direction: column;
gap: 30px;}

.input1{display: flex;flex-direction: column;gap: 22px;margin: 0;
    padding: 0;border-color: transparent;}

.placeholder-login{color: var(--black);
font-family: Montserrat;
font-size: 24px;margin: 0;padding: 0;
font-weight: 600;}


.text-info-login {
height: 47px;
border-radius: 5px;color: var(--black);
    display: flex;background-color: transparent
;border: 2px solid var(--black);padding-left: 26.92px;box-sizing: border-box;

}
.text-info-login:focus,
.text-info-login:active,
.text-info-login:visited,
.text-info-login:focus-visible,
.text-info-login:focus-within,
.text-info-login:hover {
  color: var(--black) !important;
  border: 2.019px solid var(--black);
  background-color: transparent;
  outline: none;
  box-shadow: none;
}

.input-group{display: flex;flex-direction: column;gap: 30px;
    margin: 0;padding: 0;border-color: transparent;
}

.group-input2{display: flex;flex-direction: column;gap: 12px;
    margin: 0;padding: 0;border-color: transparent;
}

.forgot-pass{color: var(--black);
text-align: right;
font-family: Montserrat;
font-size: 16px;
font-weight: 500;margin: 0;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: 5.5%; 
text-underline-offset: 12.5%; 
text-underline-position: from-font;}

.link{text-decoration: none;}

.input3{display: flex;flex-direction: row;gap: 9px;margin: 0;
    padding: 0;border-color: transparent;}

.checkbox {
  width: 25.473px;
  height: 25.473px;
  background: transparent; 
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--black);
  cursor: pointer;margin: 0;
  position: relative;    flex-shrink: 0;
    display: inline-block;
}


.checkbox:checked::after {
  content: "";
  position: absolute;
  top: 2px;
      left: 7px;
  width: 6px;
  height: 12px;
  border: solid var(--black);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rember-text{color: var(--black);
font-family: Montserrat;
font-size: 22px;
font-style: normal;
font-weight: 500;margin: 0;padding: 0;}

.buttonn{display: flex;
height: 50px;width: 100%;
;box-sizing: border-box;
justify-content: center;cursor: pointer;
align-items: center;
align-self: stretch;
border-radius: 15px;    border: 1px solid var(--border-color);
background: var(--cta);gap: 10px;
transition: all 300ms linear;}

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

.link-button{width: 100%;text-decoration: none;
display: flex
;gap: 10px;
    align-items: center;
    justify-content: center;}

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

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

.buttonn:hover .img-cta-home-page{background-image: url(pic/img25\(hover\).svg);}

.img-cta-home-page{width: 21.883px;background-position: center;
height: 21.883px;background-image: url(pic/img25.svg);}


.sec-login{    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    padding: 0 8%;
    min-width: 1080px;
    position: relative;
    z-index: 1;
}


.containerr-sec-login{
        max-width: 1280px;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-top: 185px;
    justify-content: center;
}

.error-message {
    color: var(--red);
font-family: Montserrat;
    font-size: 16px;
    display: none;   
}



.sec-profile {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    padding: 0 8%;
    min-width: 1080px;
    position: relative;
    z-index: 1;
}


.main-info-profile {
    max-width: 1280px;
    width: 100%;
    display: flex;
    padding-top:225px;
    padding-bottom: 115px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.part1-profile{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.row-part1-profile{display: flex;
flex-direction: row;align-items: flex-end;
justify-content: space-between;}


.hedaer-profile{color: var(--border-color);
font-family: Toonish;
font-size: 40px;
font-weight: 400;
line-height: 60px;
letter-spacing: 4px;}

.editiconn{

width: 20px;
height: 20px;
}
.row-profile{display: flex;
height: 197px;
padding: 0 32px;
align-items: center;
gap: 32px;
align-self: stretch;
border-radius: 24px;
border: 1px solid var(--border-color);
background: var(--header);
  opacity: 0;
  transform: translateY(100px); 
  transition: all 0.4s ease-out;
}

.row-profile.animate {
  opacity: 1;
  transform: translateY(0);
}














.img-profile{border-radius: 32177776px;
border: 1px solid var(--border-color);}


.colum-profile{display: flex;
flex-direction: column;
gap: 11px;}


.name-profile{color: var(--black);
font-family: Montserrat;
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 42px; /* 150% */}

.email-p {
  color: var(--black);
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}

.part2-colum-big{display: flex;
flex-direction: column;gap: 32px;}

.part2-profile{display: flex;
width: 100%;
    padding: 30px;
align-items: flex-start;
gap: 21px;border-radius: 21px;
border: 1.75px solid var(--border-color);
background: var(--header);
display: flex;
flex-direction: row;
gap: 20px;
  opacity: 0;
  transform: translateY(100px); 
  transition: all 0.4s ease-out;
}

.part2-profile.animate {
  opacity: 1;
  transform: translateY(0);
}

































.card-profile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    flex: 1; 
    min-width: 0; 
        border: 1px solid var(--black);
    padding: 20px;
    border-radius: 20px;
}
.colum-part2-profile {
    display: flex;
    flex-direction: row;
    gap: 32px;
    width: 100%;
}

.hedaer-part2-profile{color: var(--border-color);
font-family: Toonish;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 60px; /* 150% */
letter-spacing: 4px;}

.small-text-p{color: var(--black);
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 121%; /* 21.78px */}

.header-card-p{color: var(--black);
font-family: Montserrat;
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 121%; /* 33.88px */}

.imgss-profile{width: 100%;}


.imgss-profile {
  width: 100%;
  height: 278.58px; 
  display: block; 
  position: relative;
  overflow: hidden;
  border-radius: 14px 14px 0  0  ;
}

.imgss-profile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.6s ease;
  transform: scale(1);
}

.card-profile:hover .imgss-profile::before {
  transform: scale(1.15);
}


























.preloaderrr {
  transition: opacity .5s ease;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;z-index: 111111111;
}


.video{width: 60%;}




.container-header-buttons{
        width: 140px;
    display: flex;
    gap: 20px;
    justify-content: flex-end;

}




.card-sec6 {
  width: 100%;
  height: fit-content;
  background-color: var(--white);
  padding: 32px 36px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 36px;
background: var(--white);
}




.img-card-sec6 {
  width:100%;
border: 1px solid var(--black);
  height: 248.494px;
  aspect-ratio: 456.34 / 248.49;
  border-radius: 20px;
  overflow: hidden;background-size: cover;
  position: relative;
    transition: transform 0.6s ease; 
}

.img-card-sec6::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-position: center;
  background-size: cover;
  transition: transform 0.6s ease;
  transform: scale(1);
}
.card-sec6:hover .img-card-sec6::before {
  transform: scale(1.15);
}




.part2-sec6 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
opacity: 0;
   transform:translateY(100px); 
  transition:all 0.3s ease-out
}

.part2-sec6.animate {
  opacity: 1;
  transform:  translateY(0);
}





























.cta-sec6{display: flex;
width: 149px;
height: 56px;
padding: 8px;
align-items: center;
gap: 9px;
flex-shrink: 0;
border-radius: 14px;
border: 1px solid var(--black);
background: var(--cta);
justify-content: center;}



.container-card-sec6{display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;align-items: center;
}

.text-count-sec6{color: var(--black);
font-family: Montserrat;
font-size: 24px;
font-weight: 600;
line-height: 140%; 
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;}







.cart-box {
    position: absolute;
    top: 80px;
    left: 0;
    width: 350px;
    background: var(--header);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 28px;
    z-index: 999;font-family: Montserrat;
}


.hidden {
  display: none;
}

.cart-item {
  display: flex;
  justify-content: space-between;
}

.cart-remove {
  background: var(--cta);
  color: var(--black);
  border: none;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
      width: 35px;
    height: 35px;font-size: 24px;
}



.cart-add{
      background: var(--cta);
  color: var(--black);
  border: none;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;font-size: 24px;
      width: 35px;
    height: 35px;
}



.cart-item-title{color: var(--black);
font-family: Montserrat;
font-size: 20px;
font-weight: 700;
line-height: 140%; /* 39.2px */}


.cart-item-price{color: var(--black);
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 140%; /* 25.2px */}


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

.cart-item-left{display: flex;
flex-direction: column;
gap: 8px;}











@media (max-width: 1280px) {

.bodyy{background-color: var(--background);
width: 100vw;}

.sec1{padding: 0 100px;
justify-content: flex-start;min-width: 1280px; }
.nav-header {

    left: 100px; 
    right: 100px; 
     min-width: 1080px;
}
.header-sec1 {
    font-size: 119px;

}



.img-left-sec1 {

    left: -129px;
}

.sec1-main-info {
    width: 100%;
    min-width: 1080px;}


.sec2{padding: 0 100px; 
min-width: 1280px;
}
.main-info-sec2 {
    max-width: 100%;
    min-width: 1080px;}

.sec3{padding: 0 100px; 
min-width: 1280px;
}

.main-info-sec3 {
    max-width: 100%;
    min-width: 1080px;}
.sec4{padding: 0 100px; 
min-width: 1280px;
}
.main-info-sec4 {
    max-width: 100%;
    min-width: 1080px;}


.sec5{padding: 0 100px; 
min-width: 1280px;
}
.main-info-sec5 {
    max-width: 100%;
    min-width: 1080px;}


.footerr {
    padding: 0 100px; 
min-width: 1280px;
}
.main-info-footer {
        max-width: 100%;
    min-width: 1080px;
}

.sec1-page2 {
        padding: 0 100px; 
min-width: 1280px;
}


.img3-decor-sec1-p2 {
    position: absolute;
 left: -170px;
        bottom: 126px;
}


.sec2-p2{
            padding: 0 100px; 
min-width: 1280px;
}


.main-info-sec2-p2 {
           max-width: 100%;
    min-width: 1080px;
}

.sec3-page2{
                padding: 0 100px; 
min-width: 1280px;
}

.main-info-sec3-p2 {
             max-width: 100%;
    min-width: 1080px;
}

.sec4-page2 {
            padding: 0 100px; 
min-width: 1280px;
}


.main-info-sec4-p2 {
       max-width: 100%;
    min-width: 1080px;
}


.sec5-p2{
        padding: 0 100px; 
min-width: 1280px;
}

.main-info-sec5-p2 {
           max-width: 100%;
    min-width: 1080px;
}


    .sec-login {
        padding: 0 100px;
        min-width: 1280px;
    }

    .containerr-sec-login {
        max-width: 100%;
        min-width: 1080px;
    }

    .sec-profile  {
        padding: 0 100px;
        min-width: 1280px;
    }

.main-info-profile{
            max-width: 100%;
        min-width: 1080px;
}



}