@import url('root.css');
*{
    padding: 0px;
    margin:0px;
}

body{
    width: 100%;
}
/* main.css*/
.slider {
    width: var(--slider-width);
    height: var(--slider-height);
    overflow: hidden;
}
.slide {
    width: var(--slide-width);
    height: var(--slide-height);
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; /* Resize the background image to cover the entire container */
}


  /*.slide img {
    
    aspect-ratio: 1.2;
  }*/



  /*product section's.product css*/
.product{
    display: flex;
    justify-content: space-evenly;
    flex-wrap:wrap;
    margin-bottom: var(--section-product-tmargin);
}
.product a{
    width: var(--product-a-width);
    height: var(--product-a-height);
    margin: var(--product-a-margin);
    padding: var(--product-a-padding);
    text-decoration: none;
    display: flex;
    flex-direction: column;
}
/*artcle.p-art*/
.product .p-art{
    width: var(--product-p-art-width);
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative; 
    border-radius: var(--product-p-art-border-radius);
    box-shadow:var(--product-p-art-box-shadow) ;
    transition: all 0.5s ease;
}
/*.product .p-art img{
    width: 100%;
    height: 100%;
}*/
.product article{
    
    background-color: #cccccc;  
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

.product h2{
    font-size: var(--product-h2-font-size);
    color: var(--product-h2-color);
    line-height: var(--product-h2-line-height);
    font-family: var(--product-font-family);
    text-align: center;
    font-weight:100;
    margin-top: var(--product-h2-margin-top);
}



/*product's css end*/




/*introduction css*/
.intro 
{
    margin: var(--intro-margin);
}
.intro > article{
    
     width: var(--article-width);
    display: grid;
    grid-template-columns: var(--article-grid-columns);

    grid-template-rows:  var(--article-grid-row);

    background-color:var(--intro-article-bgcolor) ;
   
    padding: var(--article-padding);
}
.intro > article >section{
    position: relative;
    
}
.intro >article >section:nth-child(1){
    text-align: center;
    overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}

.intro-image{
    background-image: url("../pictures/icemark-20logo-202.webp"); /* The image used */
    background-color: #cccccc; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
    overflow: hidden;
    width: var(--intro-image-width);
    height: var(--intro-image-height);
    border-radius:var(--intro-border-radius) ;
}
.intro >article >section:nth-child(2){
    display: flex;
    flex-direction: column;
    padding: 2rem 2rem;
}
.intro >article >section:nth-child(2) h2{
    font-size: var(--h1-font-size);
    font-family:var(--intro-h1-ff);
    font-weight: var(--h1-font-weight);
    
}

.intro >article >section:nth-child(2) h2 span:nth-child(1){
    color: var(--intro-span1);
}
.intro >article >section:nth-child(2) h2 span:nth-child(2){
    color: var( --intro-span2);
}
.intro-doc{
    color: var( --intro-span1);
}
.intro >article >section:nth-child(2) p{
    font-weight: var( --p-weight);
    margin-top: var(--p-margin-top);
    line-height: var(--p-line-height);
    letter-spacing: var(--p-letter-spacing);
    text-align: justify;
    color: var( --color-p);
    font-family:var(--intro-p);
    font-style: normal;
}
.intro >article >section:nth-child(2) .btn{
   
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}
.intro >article >section:nth-child(2) button{
    color: var(--btn-color);
    display: inline-block;
    font-family:var(--intro-p);
    font-size: var(--btn-font-size);
    width: var(--btn-width);
    margin-top: var(--margin-top);
    padding: var(--btn-padding);
    background-color: var(--bg-btncolor-1);
    border-radius: 1rem;
    border: var(--btn-border);
    font-weight: 500;
    transition: all 0.5s ease;
}
.intro >article >section:nth-child(2) button:hover{
    background-color: var(--bg-btncolor-2);
    color: var(--btn-color);
}

/*section.pre-news*/

.pre-news {
    margin: var(--pre-news-tmargin) var(--pre-news-rmargin) var(--pre-news-bmargin) var(--pre-news-lmargin);
   
    display: flex;
    flex-direction: row;
   /* height: var(--pre-news-height);*/
    justify-content: center;
 
  
}
/*Мэдээ:өнгө*/
.pre-news .news-1{
    color: var(--intro-span1);
}
/*Мэдээлэл:өнгө*/
.pre-news .news-2{
    color:var(--intro-span2);
}

.pre-news h2{

    font-size: var(--pn-fsize);
    font-weight:var(--pn-fw) ;  
    font-family: var(--intro-h1-ff);
    height: var(--width-size);  
    text-align: center;
} 

/*news*/
.news .img-1{
    background-image: url("../index_pictures/news1.webp");  
}
.news .img-2{
    background-image: url("../index_pictures/news2.webp ");

}
.news .img-3{
    background-image: url("../index_pictures/news3.webp");
}
.news .img-4{
    background-image: url("../index_pictures/venus_shock3.jpg");
}
.news {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
}
.news icemark-news-box{
    
    margin: var(--n-a-margins);
    width: var(--n-a-width);
}
.news a{
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.news article{
    position: relative;
    overflow: hidden;
    border-radius: var(--n-box-bradius);
   
        width: var(--n-box-width);
        aspect-ratio: 1/1;
         font-family: var(--intro-p);
         box-shadow: var(--news-box-shadow);
         display: flex;
         align-items: flex-end;
       transition: all 0.5s ease;
     
       background-position: center; 
       background-repeat: no-repeat; 
       background-size: cover; 
 }


 .news article  .text{
    width: var(--n-box-width);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--txt-bgcolor);
     color: var(--news-box-font-color);
 }
 section.news a article h2{
    font-family:  var(--intro-p);
    margin: var(--n-h2-margins);
    font-size: var(--f_size_products);
    font-weight: var(--font-weight);
 }
 .news .icons{
    width:100%;
    padding: 0.2rem 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
 } 

@media(max-width: 900px){
    #list{
        display: inline-block;
        color: var(--texts_color-white);
        font-size: 1.5rem;
        margin-right: 2.2rem;
    }
    #list:hover{
        color:var(--hover_color_grey);
        transition:var(--header_transition);
    }

   
   

    .intro > article{
    
       
        width: var( --article-width);
        display: grid;
        grid-template-columns: var(--article-grid-columns-tablet);

        grid-template-rows: var(--article-grid-row-tablet) ;
    
        background-color:var(--intro-article-bgcolor) ;
        z-index: 0;
        padding: var(--article-padding);
    }
    .intro >article >section:nth-child(2) p,h2{
        text-align: center;
    }
    .intro-image{
        
       
        background-size: var(--bg-size);
        width: var(--intro-image-width-Tablet);
        height: var(--intro-image-height-Tablet);
    }
    .intro >article >section:nth-child(2) .btn{
   
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }
    .news icemark-news-box:nth-child(3){
        display: none;
    }
    .news icemark-news-box:nth-child(4){
        display: none;
    }

   

    .news  icemark-news-box{
        text-decoration: none;
        margin: var(--n-article-Rmargins);
        width: calc(50% - 6rem);
    }
     .news a{
        width: 100%;
        height: 100%;
        text-decoration: none;
    }
    
    
    

}
@media(max-width: 600px){
  
   

    .intro > article{
    
        
        width: var(--width-size);
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 20rem var(--article-grid-Mrow);
        background-color:var(--intro-article-bgcolor) ;
        z-index: 0;
        padding: var(--article-padding);
    }
    .intro > article > section{
        padding: 0;
    }
    .intro-image{
        
       
        width: var( --intro-image-width-Mobile);
        height: var(--intro-image-height-Mobile);
        background-size: var(--bg-size);
    }
    .intro >article >section:nth-child(2) h2{
        font-size: 3rem;
        font-family: var(--intro-h1-ff);
        
        
    }
    .intro >article >section:nth-child(2) p{
        text-align: center;
    }
.news {
    display: grid;
    grid-template-columns: 100%;
  
    grid-template-rows: var(--n-Rheight)
    
    var(--n-Rheight);
}
.news  icemark-news-box{
    text-decoration: none;
    margin: var(--n-article-Rmargins);
    width: calc(100% - 6rem);
}
.news article{
    overflow: hidden;
    border-radius: 1rem;
    width: var(--n-box-width);
    height: var(--n-article-height);
   
    box-shadow: var(--news-box-shadow);
}
}