*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{overflow-x: hidden;}
body{overflow-x: hidden;}
a{
  all: unset;  
}
@font-face {
    font-family:NotoSans;
    src: url(assets/fonts/NotoSans-VariableFont.woff2) format("woff2");
}
@font-face {
    font-family:Oswald;
    src: url(assets/fonts/Oswald.woff2) format("woff2");
}
#Backg{
    position: fixed;
    z-index: -999;
   height: 100%; 
   width: 100%;
   background: linear-gradient(145deg,snow,rgb(160, 208, 235),rgb(139, 194, 223));
   background-image: url(assets/img/Mainbackg.png);
   background-size: cover;
}
#Backg::before{
    content: "";
        position: fixed;
    z-index: -999;
   height: 100%; 
   width: 100%;
   background: linear-gradient(145deg,snow,rgb(160, 208, 235),rgb(139, 194, 223));
   background-image: url(assets/img/MainPrebackg.png);
   background-size: cover;
   animation: startfrostMainBkg 5s linear forwards;
}
@keyframes startfrostMainBkg {
    0%{opacity: 1;}
    50%{opacity: 0.5;}
    100%{opacity: 0;}
}
/* Header -------------------------------------------------------------- */
header{
    width: 100%;
    height: 310px;
    z-index: 999;
    padding: 12px;
    background: linear-gradient(145deg,snow,rgba(160, 208, 235, 0.446),rgba(139, 194, 223, 0));
}
#headerContacts{
    font-size: 20pt;
    font-weight: 600;
    color: rgb(0, 140, 255);
}
#header-wrapper{
    width: 100%;
    height: 220px;
}
#HeaderTextMain{
    position: relative;
    z-index: 10;
    font-size: 18pt;
    text-shadow: 1px 1px 2px white;
    font-family: Arial, Helvetica, sans-serif;
}

#CompanyLogo{
    position: relative;
    width: 250px;
    height: 60px;
    background-image: url(assets/img/Logo.png);
    background-size: cover;
    background-position: center;
    z-index: 11;
}
#conditionerIMG{
    position: absolute;
    margin-top: -60px;
    right: 0;
    width: 350px;
    height: 200px;
    background-image: url(assets/img/conditioner.png);
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: 2s;
}
#ImageGifFrost{
    position: absolute;
    top: 150px;
    right: 0;
    margin-right: 70px;
    height: 200px;
    width: 230px;
    background-image: url(assets/img/FrostWind.gif);
    background-size: cover;
    transform: rotate(10deg);
        transition: 2s;
}
#searchBox{
width: 100%;
    margin-top: 20px;
top: -20px;
z-index: 1000;
padding: 4px;
}
#Hquestion{
    position: relative;
    font-family: Oswald;
    font-size: 24pt;
    text-shadow: 0 0 10px white;
    z-index: 9999;
}
#InputSearch{
    position: relative;
    padding: 10px;
    width: 200px;
    min-height: 35px;
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 999;
    background-color: rgba(227, 236, 242, 0.905);

}
#buttonSearch{
    position: relative;
    top: 2px;
    background-color: rgb(0, 97, 160);
    color: white;
    height: 35px;
    width: 100px;
    margin-left: 20px;
    font-size: 15pt;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 1200;
}
#BOXheaderburgermenu{
    margin-top: -35px;
    height:25px;
    width: 30px;
    cursor: pointer;
    position: absolute;
    right: 40px;
    z-index: 999;
}
#headerburgermenu{
    margin-top: 10px;
    height: 5px;
    width: 30px;
    background-color: black;
    cursor: pointer;
    position: absolute;
    pointer-events: none;
}
#headerburgermenu::before{
    content: "";
    display: block;
    height: 5px;
    width: 30px;
    background-color: black;
    margin-top: 8.5px;
}
#headerburgermenu::after{
    content: "";
    display: block;
    height: 5px;
    width: 30px;
    background-color: black;
    margin-top: -22px;
}

#NavMenu{
    display: none;
    position: absolute;
    z-index: 1200;
    width: 100.5%;
    text-align: center;
    height: 90dvh;
    margin-top: 4px;
    overflow-y: scroll;
    overflow-x: hidden;
    left: -1%;
    font-family: Arial, Helvetica, sans-serif;
}
.TNavTitle{
    font-size: 22pt;
    background-color: rgb(44, 80, 147);
}

.TBtnNav{
    background-color: cornflowerblue;
    padding: 20px;
    font-size: 20pt;
    cursor: pointer;
    border: 1px solid rgb(38, 81, 162);
}
.TBtnNav:hover{
    background-color: rgb(181, 200, 236);
}
@keyframes AppearanceNavMenu {
    0%{transform: translateX(100%)  scale(0);opacity: 0;}
    100%{transform: translateX(0%)  scale(1); opacity: 1;}
}
@keyframes disappearanceNavMenu {
    0%{transform: translateX(0%)  scale(1);opacity: 1;}
    100%{transform: translateX(100%)  scale(0);opacity: 0;}
}
@keyframes RotateAppearanceMenu {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(90deg);}
}
@keyframes RotateDisappearanceMenu {
    0%{transform: rotate(90deg);}
      100%{transform: rotate(0deg);}  
}


/* Main ---------------------------------------------------------- */

main{
    display: flex;
    justify-content: center;
        margin-bottom: 90px;
}

#mainContent{
    position: relative;
    padding: 20px 20px 140px;
    margin-top: 50px;
    border-radius: 18px;
    width: 90%;
    background-color: rgb(255, 255, 255);
    /* background-image:  url(assets/img/backg1middle.png); */
    background-size: 100%;
    background-repeat: repeat-y;
    margin-bottom: 25px;
    isolation: isolate;
}
#mainContent::before{
    position: absolute;
    inset: 0;
    content: "";
     padding: 20px 20px 140px;
    margin-top: 0px;
    border-radius: 18px;
    width: 97%;
    background-color: rgb(255, 255, 255);
    background-image:  url(assets/img/backg1middle.png);
    background-size: 100%;
    background-repeat: repeat-y;
    opacity: 0;
    animation: startfrostMContentBkg 7s linear forwards;
}
@keyframes startfrostMContentBkg {
    0%{background-color: rgb(255, 255, 255);opacity: 0;}
    25%{background-color: rgb(0, 255, 229); opacity: 0.2;}
    50%{opacity: 0.5;}
    100%{opacity: 1;}
}

#ice3dImgtop{
    margin-top: -35px;
    margin-left: -19px;
    position: absolute;
    height: 400px;
    width: 100%;
    background-image: url(assets/img/backg3d.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 99;
    opacity: 0;
    animation: startfrostOpacity 9s linear forwards;
    pointer-events: none;
}


#conditionersText{
    position: relative;
    text-align: center;
    margin-top: 70px;
    top: 35px;
    text-shadow: 2px 2px 3px white;
    z-index: 22;
    font-family: Oswald;
    font-size: 40pt;
    animation: textFrozen 6s forwards linear;
}

.conditionersTypeText{
position: relative;
    z-index: 22;
    margin-left: 80px;
    margin-top: 20px;
    margin-bottom: 10px;
color: black;
text-shadow: 2px 2px 3px white;
font-size: 26pt;
text-decoration: underline solid 1px ;
text-underline-offset: 5px;
font-weight: bolder;
z-index: 5;
font-family: NotoSans;
scroll-margin-top: 60px;
}
.ProductBoxes{
position: relative;
z-index: 22;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
    gap: 10px;
    width: 96%;
    margin-top: 30px;
    margin-left: 40px;
    scrollbar-width: none;
}
.ProductBox-wrapper{
    position: relative;
    height: 320px;
    width: 255px;
    background-color: rgb(255, 255, 255);
    border: 2px solid #c2c2c2;
    border-radius: 5px;
    cursor: pointer;
    background-size: 100% 100%;
    isolation: isolate;
}
.ProductBox-wrapper::before{
    position: absolute;
    content: "";
    inset: 0;
    background-color: rgb(255, 255, 255);
    border-radius: inherit;
    cursor: pointer;
    background-image: url(assets/img/backg1111.png);
    background-size: 100% 100%;
    z-index: -1;
    animation: startfrostOpacity 9s linear forwards;
}

.ProductText{
    display: flex;
    font-weight: bold;
    padding: 10px;
    margin-left: 4px;
        max-height: 70px;
        margin-top: -7px;
        margin-bottom: 8px;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
font-family: Arial, Helvetica, sans-serif;
}
.ProductText::-webkit-scrollbar{
    display: none;
}
.ProductPriceAndAbout{
    display: flex;
    justify-content: center;
    gap: 10px;
}
.ProductPrice{
    font-size: 16pt;
    font-weight: bold;
}
.ProductAboutBtn{
    background-color: rgb(0, 97, 160);
    color: white;
    font-weight: bold;
    font-size: 12pt;
    padding: 5px;
    margin-top: -5px;
    border-radius: 5px;
    cursor: pointer;
}

.AboutCompanybottomText{
    position: relative;
    top: 10px;
    z-index: 99;
    padding: 29px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18pt;
}
.TitleAboutCompanybottom{
     position: relative;
     z-index: 99;
     font-family: Arial, Helvetica, sans-serif;
}
.SubTitleAboutCompanybottom{
    position: relative;
    z-index: 99;
    font-size: 20pt;
    left: 30px;
    top: -5px;
    margin-bottom: -25px;
    font-family: Arial, Helvetica, sans-serif;
}
.CircleLists{
    position: relative;
    font-size: 18pt;
    font-family: Arial, Helvetica, sans-serif;
        padding: 29px;
        left: 22px;
            top: 50px;
}




@keyframes startfrostOpacity {
    0%{opacity: 0;}
    50%{opacity: 0.5;}
    100%{opacity: 1;}
}
@keyframes textFrozen {
    0%{color:black}
    100%{color: rgb(60, 60, 166);}
}
/* Footer ------------------------------------------------------------------- */
footer{
    display: flex;
background: linear-gradient(145deg,rgb(255, 250, 250),rgba(160, 208, 235, 0.797),rgb(139, 194, 223));
    height: 120px;
    width: 100%;
    justify-content: center;
    padding: 15px;
    gap: 20%;
    font-family: Arial, Helvetica, sans-serif;
}
#FNumber{
    margin-left: 0px;
}
#spanFNum{
    font-size: 28pt;
}
#Finfo{
    font-family: Arial, Helvetica, sans-serif;
    width: 500px;
    font-size: 12pt;
}
#YCText{
    font-size: 12pt;
}

/* SectionAbout ------------------------------------------------------------- */

#AboutSection{
    position: relative;
    width: 100%;
    --AProductImage: none;
}
#Aboutflexbox{
    display: flex;
    justify-content: center;
    padding: 10px;
    margin-top: -30px;
}
.AboutProductImages{
    margin-top: 150px;
    width: 40%;
    height: 400px;
    background-image: var(--AProductImage);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    flex: 1;

}
#AboutProductText{
    position: relative;
    top: 190px;
    flex: 2;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15pt;
    padding-bottom: 90px;
    z-index: 999;
}
#AboutPrice{
    left: 0;
    margin-left: 25px;
    margin-top: 555px;
    position: absolute;
    width: 300px;
    text-align: center;
    font-size: 30pt;
    font-family: Arial, Helvetica, sans-serif;
}
#BackAboutBtn{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20pt;
    font-family: Arial, Helvetica, sans-serif;
    left: 0;
    top: 620px;
    margin-left: 30px;
    height: 70px;
    padding: 10px;
    border: 2px solid;
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer;
    user-select: none;
    
}
#BackAboutBtn:hover{
    box-shadow: 0 0 10px cyan;
    border-color: cyan;
    color: blue;
    background-color: rgba(219, 231, 245, 0.465);
}
#CharaxkteristikiTitleText{
    position: relative;
    text-align: center;
    top: 165px;
    z-index: 999;

    font-size: 25pt;
    font-family: Arial, Helvetica, sans-serif;
}
/* адаптив -------------------------------------------------------------------*/
@media (min-width: 1880px){
    .AboutProductImages{
    height: 600px;
    background-image: var(--AProductImage);
}
#AboutPrice{
    margin-top: 760px;
}
#BackAboutBtn{
    top: 860px;
    margin-left: 50px;
}
}



@media (max-width: 1076px) and (min-width:570px) {
#ice3dImgtop{
    margin-top: -35px;
    margin-left: -22px;
    height: 400px;
    width: 104%;
}
#Finfo{
    width: 300px;
    font-size: 9pt;
}
#spanFNum{
    font-size: 20pt;
}
#conditionerIMG{
    opacity: 0.7;
}
#ImageGifFrost{
    opacity: 0.7;
}
header{
    width: 100%;
    height: 305px;
}
#conditionersText{
    position: relative;
    text-align: center;
    margin-top: 70px;
    margin-bottom: 20px;
    top: -10px;
    text-shadow: 2px 2px 3px white;
    font-size: 40pt;
}
#headerContacts{
    font-size: 20pt;
    font-weight: 600;
    color: rgb(0, 140, 255);
}
#AboutProductText{

    font-size: 15pt;
    width: 100px;
}
.AboutProductImages{
    margin-top: 150px;
    width: 40%;
    height: 400px;
    background-image: var(--AProductImage);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    flex: 1.5;

}
#NavMenu{
left: -3.2%;
width: 103.2%;
}
}
@media (max-width: 735px) and (min-width: 570px) {
#AboutPrice{
    left: 0;
    margin-left: -23px;
    margin-top: 490px;
    position: absolute;
    width: 300px;
    text-align: center;
    font-size: 30pt;
    font-family: Arial, Helvetica, sans-serif;
}
#BackAboutBtn{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    left: 0;
    top: 560px;
    margin-left: 30px;
    height: 60px;
    padding: 5px;
    border: 2px solid;
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer;
    user-select: none;
    
} 
#NavMenu{
left: -2.0%;
}   
}
@media (max-width: 570px) and (min-width: 420px) {
    #ice3dImgtop{
    margin-top: -35px;
    margin-left: -22px;
    height: 400px;
    width: 104%;
}
#Finfo{
    width: 300px;
    font-size: 7pt;
}
#spanFNum{
    font-size: 14pt;
}
#YCText{
    font-size: 5pt;
}
#conditionersText{
    position: relative;
    text-align: center;
    margin-top: 70px;
    top: -10px;
    text-shadow: 2px 2px 3px white;
    font-size: 40pt;
}
#conditionerIMG{
    opacity: 0.7;
    width: 175px;
    height: 100px;
    margin-top: 30px;
}

#ImageGifFrost{
    opacity: 0.7;
        top: 174px;
    right: 0;
    margin-right: 34px;
    height: 200px;
    width: 115px;
    transform: rotate(5deg);
}
header{
    width: 100%;
    height: 400px;
}
#headerContacts{
    font-size: 20pt;
    font-weight: 600;
    color: rgb(0, 140, 255);
}

#AboutPrice{
    left: 0;
    margin-left: -53px;
    margin-top: 455px;
    position: absolute;
    width: 300px;
    text-align: center;
    font-size: 15pt;
    font-family: Arial, Helvetica, sans-serif;
}
#BackAboutBtn{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    left: 0;
    top: 520px;
    margin-left: 30px;
    height: 40px;
    padding: 2px;
    border: 2px solid;
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer;
    user-select: none;
    
}    
#AboutProductText{

    font-size: 12pt;
    width: 100px;
}
.AboutProductImages{
    margin-top: 150px;
    width: 40%;
    height: 400px;
    background-image: var(--AProductImage);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    flex: 1.7;

}
#NavMenu{
left: -3.2%;
}
}







/* телефоны */
@media (max-width:420px) {
#ice3dImgtop{
    margin-top: -35px;
    margin-left: -30px;
    height: 400px;
    width: 108%;
}
#Finfo{
    width: 300px;
    font-size: 7pt;
}
#spanFNum{
    font-size: 14pt;
}
#YCText{
    font-size: 5pt;
}
#conditionersText{
    position: relative;
    text-align: center;
    margin-left: 25px;
    margin-top: 70px;
    top: -19px;
    text-shadow: 2px 2px 3px white;
    font-size: 25pt;
}
#conditionerIMG{
    opacity: 0.7;
    width: 175px;
    height: 100px;
    margin-top: 30px;
}

#ImageGifFrost{
    opacity: 0.7;
        top: 174px;
    right: 0;
    margin-right: 34px;
    height: 240px;
    width: 115px;
    transform: rotate(5deg);
}
header{
    width: 100%;
    height: 360px;
}
#HeaderTextMain{
    position: relative;
    z-index: 10;
    font-size: 16pt;
    text-shadow: 1px 1px 2px white;
    font-family: Arial, Helvetica, sans-serif;
}
#mainContent{
    position: relative;
    padding: 20px 20px 140px;
    margin-top: 50px;
    margin-left: 0px;
    border-radius: 18px;
    width: 90%;
    background-color: rgb(255, 255, 255);
    /* background-image:  url(assets/img/backg1middle.png); */
    background-size: 100%;
    background-repeat: repeat-y;
    margin-bottom: 25px;
    isolation: isolate;
}
#mainContent::before{
    width: 94%;
    margin-left: -8px;
}
#Backg{
background-position: -60% 10%;
}
#Backg::before{
    content: "";
background-position: -60% 10%;
}
.conditionersTypeText{text-align: center;margin-left: 25px;}
.ProductBoxes{left: -9%;}
#headerContacts{
    font-size: 20pt;
    font-weight: 600;
    color: rgb(0, 140, 255);
}
#Aboutflexbox{
    display: flex;
    justify-content: center;
    flex-direction:column;
    padding: 10px;
    margin-top: -30px;
}
#AboutProductText{
    font-size: 14pt;
    width: 100%;
    margin-top: 100px;
}
.AboutProductImages{
display: none;
}
#AboutPrice{
display: none;
}
#BackAboutBtn{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14pt;
    font-family: Arial, Helvetica, sans-serif;
    left: 0;
    top: 250px;
    margin-left: 10px;
    height: 50px;
    padding: 2px;
    border: 2px solid;
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer;
    user-select: none;
    z-index: 999;
}  
#InputSearch{
    max-width: 140px;
}
#buttonSearch{
   max-width: 110px;
   margin-left: 5px;
}
#NavMenu{
left: -3.2%;
}
}