body{
    margin: 0;
    padding: 0%;
    overflow-x: hidden;
}


header{
    display: flex;
    justify-content: center;
    align-items: center;
    position:sticky;
    top:0;
    height:40px;
    background-color: rgba(251, 251, 253, .8);
    z-index:100;
}

.nav{
    margin-right: 20px;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    text-decoration: none;
    color: black;
}

.image_wrapper{
    display: flex;
    justify-content: center;
    
}

p
{
    margin:0;
}
.big_img {
    width: 2560px;
    height: 624px;
    background-size: 2560px 624px;
    background-repeat: no-repeat;
    z-index: 1;
    position: relative;
    display: flex;
}


    

.inline
{
    color: blue;
}

.text_copy_wrapper_2 {
    width: 460px;
    display: flex;
  
    flex-direction: column;

    font-size: 30px;
    z-index: 20;
    position: absolute;
    padding-top: 60px;
   
}

.banner_card
{
    margin: 0 auto;
    width: 158px;
    height:56px;
}

.caption_banner
{
    width: 100%;
    max-width: 460px;
    color: white;
    text-align: center;
    margin:2%;
}



.left_col_title
{
    position: absolute; /* Position the text absolutely within the image_text_wrapper */
    
    
    color: white; /* Example text color */
    font-size: 40px; /* Example font size */
    z-index: 2; /* Set a higher z-index value to ensure the text appears on top of the image */
    margin: 0, auto;
    margin-top: 1px;
    
}

.subtext
{
    position: absolute; /* Position the text absolutely within the image_text_wrapper */
    
    margin: 0, auto;
    color: white; /* Example text color */
    font-size: 20px; /* Example font size */
    z-index: 2; /* Set a higher z-index value to ensure the text appears on top of the image */
    margin-top: 60px;
    
}


.left_col
{
    position: absolute;
    left: 50%;
    z-index: 2;
    width: 420px;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.right_col
{
    position: absolute;
    right: 50%;
    z-index: 2;
    width: 420px;
    transform: translate(50%);
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.subtext_right
{
    position: absolute; /* Position the text absolutely within the image_text_wrapper */
    
    margin: 0, auto;
    font-size: 20px; /* Example font size */
    z-index: 2; /* Set a higher z-index value to ensure the text appears on top of the image */

    margin-top: 60px;
}

.right_col_title
{
    position: absolute; /* Position the text absolutely within the image_text_wrapper */
    
    
    color: white; /* Example text color */
    font-size: 40px; /* Example font size */
    z-index: 2; /* Set a higher z-index value to ensure the text appears on top of the image */
    margin: 0, auto;
    margin-top: 1px;
}

#white{ color: white;}


#black
{
    color: black;
}

.text_copy_wrapper {
    width: 350px;
    display: flex;
  
    flex-direction: column;

    font-size: 30px;
    z-index: 20;
    position: absolute;
    top: 85px;
    margin:0;
}

.text_copy_wrapper_bottom {
    width: 450px;
    display: flex;
    background-color: antiquewhite;
    flex-direction: column;
    color: aqua;
    font-size: 30px;
    z-index: 20;
    position: absolute;
   
}

h4, h5, p {
    font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
    text-align: center;
    margin-top:2px;
    color: black;
}



.links
{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
        
}

.image_container
{
    display:flex;
    flex-direction:column;
}


/*Desktop - Carousel*/

.image_wrapper_container {
    height: 1750px;
    width: 2560px;
    background-color: white;
    flex-wrap: wrap;
    flex-shrink: 1;
   
}


.slideshow_wrapper {
    width: 100%;
    height: 720px;
    background-color: white;
    
    
}



/* Changing the below width and margin made it center and work well i need to investigate it. I closed the wrapper and centered it. */
.image_slideshow_container {
    max-width: 2560px;
    height: 703px;
    background-color: white;
    overflow: hidden;
    position: relative;
    margin-left: auto;
    margin-right: auto;
  
}

.wrep {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    
}
.slideshow_image {
    width: 1250px;
    height: 700px;
     

    /* overscroll-behavior: contain; */
    
}

.slide_image_contain
{
    width: 1250px;
    height: 700px;
   
    position: absolute;
    
}


#con2
{
    transform: translateX(1265px);
}

#con3
{
    transform: translateX(2530px);
}

#con4
{
    transform: translateX(3795px);
}


#con5
{
    transform: translateX(5060px);
}

#con6
{
    transform: translateX(6325px);
}

#con7
{
    transform: translateX(7590px);
}

#con8
{
    transform: translateX(8855px);
}

#con9
{
    transform: translateX(10120px);
}

#con10
{
    transform: translateX(11385px);
}




#conFirstClone
{
    transform: translateX(-1265px);
}


#conLastClone
{
    transform: translateX(12650px);
}

#conReplicaClone2
{
    transform: translateX(13915px);
}



.button_container
{
    display: flex;
    align-items: center;
}

.slidelist
{
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
ul
{
    display: flex;

}

li
{
    margin: 0 8px;
}


/*Dot navs list*/
#dn_1
{
    opacity: 1;
}
#dn_2
{
    opacity: 0.3;
}
#dn_3
{
    opacity: 0.3;
}
#dn_4
{
    opacity: 0.3;
}
#dn_5
{
    opacity: 0.3;
}
#dn_6
{
    opacity: 0.3;
}
#dn_7
{
    opacity: 0.3;
}

#dn_8
{
    opacity: 0.3;
}
#dn_9
{
    opacity: 0.3;
}
#dn_10
{
    opacity: 0.3;
}
#dn_11
{
    opacity: 0.3;
}
#dn_12
{
    opacity: 0.3;
}

/* Images background URL at deafult.*/
/* ------------START.---------------*/
#first_clone
{
    background-image: url("Apple_Images/1250/im_10_1250x703.jpg");
}

#im_1
{
    background-image: url("Apple_Images/1250/im_1_1250x703.jpg");
}

#im_2
{
    background-image: url("Apple_Images/1250/im_2_1250x703.jpg");
}

#im_3
{
    background-image: url("Apple_Images/1250/im_3_1250x703.jpg");
}

#im_4
{
    background-image: url("Apple_Images/1250/im_4_1250x703.jpg");
}

#im_5
{
    background-image: url("Apple_Images/1250/im_5_1250x703.jpg");
    background-repeat: no-repeat;
 
    background-size: cover;

}

#im_6
{
    background-image: url("Apple_Images/1250/im_6_1250x703.jpg");
}

#im_7
{
    background-image: url("Apple_Images/1250/im_7_1250x703.jpg");
}

#im_8
{
    background-image: url("Apple_Images/1250/im_8_1250x703.jpg");
}

#im_9
{
    background-image: url("Apple_Images/1250/im_9_1250x703.jpg");
}

#im_10
{
    background-image: url("Apple_Images/1250/im_10_1250x703.jpg");
}

#last_clone{
    background-image: url("Apple_Images/1250/im_1_1250x703.jpg")
}

#last_second_clone
{
    background-image: url("Apple_Images/1250/im_2_1250x703.jpg")
}


.drop_down
{
    display: none;
    cursor: pointer;
    
    

}
.bar
{
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: black;

}

.header_logo
{
    display: none;
}


#playpause
{
    border: none;
    background: none;
    width: 30px;
    height: 11px;
}

/* Images background URL at deafult.*/
/* --------------END.---------------*/

/*************************************************************************************************************************************************************************/
/***************************************************************MEDIA QUERIES*********************************************************************************************/
/*************************************************************************************************************************************************************************/

/*Media query for navbar*/
@media (max-width: 808px) {
    .drop_down
    {
        display: block;
        padding-right: 30px;
        position: relative;
        width: 10px;


    }
    
    header 
    {
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }

        .header_logo
    {
        position: relative;
        display: flex;
        flex: 1;
        width: 50px;
        padding-left: 10px;
    }

    .logo
    {
        width: 29;
        height:28px;
    }

    .nav
{
    display: none;
    cursor: pointer;

}
    
    
  

}


@media  (max-width: 734px) {
    .big_img {
        width: 1479px;
        height: 338px;
    }

   

    .text_copy_wrapper {
        width: 200px;
        display: flex;
        flex-direction: column;
        color: aqua;
        font-size: 12px;
        z-index: 20;
        position: absolute;
        top:50px;   
    }

    .image_slideshow_container
    {
        max-width: 305px;
    }

    .caption_banner1441
    {
      
        width: 100%;
        max-width: 258px;
        text-align:center ;
        font-size: 100px;
    }

    .text_copy_wrapper_2 {
        width: 258px;
        display: flex;
      
        flex-direction: column;
    
        font-size: 30px;
        z-index: 20;
        position: absolute;
        padding-top: 20px;
       
    }
    
    
    .left_col, .right_col
    {
        margin-top: 5px;
    }

    .wrapped
    {
        width: 630px !important;
    }

    .text_copy_wrapper_2
    {
        font-size: 20px !important;
    }

    .caption_banner
    {
        font-size: 19px !important;
    }

    #h6_banner
    {
        font-size: 15px !important;
    }
  


    .text1, .text2 {
        margin: 0;
        height: 22px;
        color: black;
    }
    .caption_banner
    {
        font-size: 12px;
    }

    #h6_banner
    {
        font-size: 10px;
    }

    .banner_card
    {
        margin: 0 auto;
        width: 38px;
        height:14px;
    }

    .flex_container {
        display: flex;
        justify-content: center;
        background-color: white;
        height:fit-content;
       
    }


    .wrapped {
        
        width: 734px !important;
        
    
    }

    .flex_container {
        max-width: 744px; /* Adjust this value as needed */
        max-height: 502px;
    }

    .contain
    {
        width: 100%;
        
    }

   
    .left_col_title
    {
        font-size: 20px;
        margin-top: 1px;
    }
    
    .right_col_title
    {
            font-size: 20px;
            
    }

    .left_col, .right_col
    {
        margin-top: 20px;
    }

    #first_card
    {
        width:100px;
    }

    .text_copy_wrapper
    {
        font-size: 20px;
       
    }
    .text2
    {
        margin-top: 15px;
    }

    .inline 
    {
        margin-top: 20px;
    }
    .left_col_title, .right_col_title
    {
        font-size: 26px;
    }

   .banner_card
   {
     width: 109px;
     height:38px
   }

   .col_watch
   {
    width: 100px;
   }



    .flex_container
    {
     
        height: fit-content;
        max-height: 2451px;
    }
    .image_wrapper_container
    {
        height:auto;
    }

    .subtext, .subtext_right
    {
        margin-top: 40px;
    }

    .slideshow_image
    {
        display: flex;
        width:274px;
        height: 495px;
        object-fit:none;
    }

    #first_clone
    {
    background-image: url("Apple_Images/slideshow_smallres/SlideShow_Image_10_mini_274x593.jpg");
    }

    .subtext, .subtext_right
    {
        margin-top: 45px;
    }

}


   

    @media (min-width: 734px) and (max-width: 1068px) {
        .flex_container {
            display: flex;
            justify-content: center;
            background-color: white;
            height:fit-content;
           
        }
        .big_img {
            width: 1504px;
            height: 312px;
           
        }

     

     
        .text1, .text2 {
            margin: 0;
            height: 30px;
            font-size: 18px;
        }

        .banner_card
        {
            margin: 0 auto;
            width: 78px;
            height:28px;
        }

        .inline
        {
            font-size: 20px;
        }
        .text_copy_wrapper_bottom {
            width: 450px;
            display: flex;
            flex-direction: column;
            color: aqua;
            font-size: 20px;
            z-index: 20;
            position: absolute;
            margin-top: 500px;
        }
        .wrapped {
            width: 100%;
            height: auto;
            object-fit: cover;
            position: relative;
        }
        .contain {
            width: 49%;
            height: auto;
            display: flex;
            flex-shrink: 1;
            position: relative;
        }
    

        .image_wrapper_container {
            height: 1750px;
            width: 2560px;
            background-color: white;
            flex-wrap: wrap;
            flex-shrink: 1;
            display: flex;
            gap: 10px;
           
        }

        .subtext_right
        {
            position: absolute; /* Position the text absolutely within the image_text_wrapper */
            
            margin: 0, auto;
            font-size: 22px; /* Example font size */
            z-index: 2; /* Set a higher z-index value to ensure the text appears on top of the image */
        
            margin-top: 50px;
        }
        
        .right_col_title
        {
            font-size: 28px;
            margin-top: 1px;
        }
      
        .subtext
        {
            position: absolute; /* Position the text absolutely within the image_text_wrapper */
            
            margin: 0, auto;
            font-size: 22px; /* Example font size */
            margin-top: 50px;
        }

        .left_col_title
        {
            font-size: 28px;
            margin-top: 1px;
        }

        .caption_banner
        {
          
            width: 100%;
            max-width: 460px;
            text-align:center ;
            font-size: 18px;
        }

        .text_copy_wrapper_2 {
            width: 460px;
            display: flex;
          
            flex-direction: column;
        
            font-size: 30px;
            z-index: 20;
            position: absolute;
            padding-top: 20px;
           
        }
        


     
   
      


    }
       


    @media (min-width: 1069px) {

        .flex_container {
            display: flex;
            justify-content: center;
            background-color: white;
            height:fit-content;
           
        }
        .big_img {
            width: 2560px;
            height: 624px;
            background-size: 2560px 624px;
            background-repeat: no-repeat;
            z-index: 1;
            position: relative;
            display: flex;
        }


     
        .text1, .text2 {
            margin: 0;
            height: 50px;
        }
        .text_copy_wrapper_bottom {
            width: 450px;
            display: flex;
            flex-direction: column;
            color: aqua;
            font-size: 20px;
            z-index: 20;
            position: absolute;
            margin-top: 500px;
        }
        .wrapped {
            width: 100%;
            height: auto;
            object-fit: cover;
            position: relative;
        }
        .contain {
            width: 49%;
            height: auto;
            display: flex;
            flex-shrink: 1;
            position: relative;
        }
    

        .image_wrapper_container {
            height: 1750px;
            width: 2560px;
            background-color: white;
            flex-wrap: wrap;
            flex-shrink: 1;
            display: flex;
            gap: 10px;
           
        }
        
        h1 {
            position: absolute; /* Position the text absolutely within the image_text_wrapper */
            
            left: 50%;
            transform: translate(-50%);
            color: rgb(0, 255, 34); /* Example text color */
            font-size: 220px; /* Example font size */
            z-index: 2; /* Set a higher z-index value to ensure the text appears on top of the image */
            justify-content: center;
           
        
        }

     
    }


/*ALL SLIDESHOW MEDIA QUERIES BELOW.*/
/*Below 1440px it will execute this, serves as the upperbound of far this will be applied.*/ 
    @media (max-width:1440px)
    {
        .slideshow_wrapper {
            width: 100%;
            height: 524px;
            background-color: white;
            
            
        }

        .image_slideshow_container
        {
            width: 100%;
            height: 523px;
            background-color: white;
            overflow: hidden;
            position: relative;
            margin-left: auto;
            margin-right: auto;
           
        }

        .wrep {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
         
            
        }

        .slide_image_contain
        {
            width: 980px;
            height: 523px;
           
            position: absolute;
            
        }
        .slideshow_image
        {
               width: 980px;
               height: 523px;
               background-repeat: no-repeat;
        }
       
        
     

        #con2
        {
            transform: translateX(995px);
        }
        
        #con3
        {
            transform: translateX(1990px);
        }
        
        #con4
        {
            transform: translateX(2985px);
        }
        
        
        #con5
        {
            transform: translateX(3980px);
        }
        
        #con6
        {
            transform: translateX(4975px);
        }
        
        #con7
        {
            transform: translateX(5970px);
        }
        
        #con8
        {
            transform: translateX(6965px);
        }
        
        #con9
        {
            transform: translateX(7960px);
        }
        
        #con10
        {
            transform: translateX(8955px);
        }
        
     
        #conLastClone
        {
            transform: translateX(9950px);
        }
        #conFirstClone
        {
            transform: translateX(-995px);
        }
    


        #first_clone
        {
            background-image: url("Apple_Images/980/im_10_980.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        }
        
        #im_1
        {
            background-image: url("Apple_Images/980/im_1_980.jpg");
            background-repeat: no-repeat;
         
          
        }
        
        #im_2
        {
            background-image: url("Apple_Images/980/im_2_980.jpg");
        }
        
        #im_3
        {
            background-image: url("Apple_Images/980/im_3_980.jpg");
        }
        
        #im_4
        {
            background-image: url("Apple_Images/980/im_4_980.jpg");
        }
        
        #im_5
        {
            background-image: url("Apple_Images/980/im_5_980.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        
        }
        
        #im_6
        {
            background-image: url("Apple_Images/980/im_6_980.jpg");
        }
        
        #im_7
        {
            background-image: url("Apple_Images/980/im_7_980.jpg");
        }
        
        #im_8
        {
            background-image: url("Apple_Images/980/im_8_980.jpg");
        }
        
        #im_9
        {
            background-image: url("Apple_Images/980/im_9_980.jpg");
        }
        
        #im_10
        {
            background-image: url("Apple_Images/980/im_10_980.jpg");
        }
        
        #im_11
        {
            background-image: url("Apple_Images/980/im_11_980.jpg");
        }
        
        #im_12
        {
            background-image: url("Apple_Images/980/im_12_980.jpg");
        }
        
        #last_clone
        {
            background-image: url("Apple_Images/980/im_1_980.jpg");
        }

     
        
        
    }

    
    @media (max-width:1069px)
    {

       
        .slideshow_wrapper {
            width: 100%;
            height: 387px;
            background-color: white;
            
            
        }

        .image_slideshow_container
        {
            max-width: 1069px;
            height: 387px;
            background-color: white;
            overflow: hidden;
            position: relative;
            margin-left: auto;
            margin-right: auto;
           
        }

        .wrep {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
         
            
        }

        .slide_image_contain
        {
            width: 689px;
            height: 387px;
           
            position: absolute;
            
        }
        .slideshow_image
        {
               width: 689px;
               height: 387px;
               background-repeat: no-repeat;
        }
       
        
    #con2
    {
        transform: translateX(704px);
    }
    
    #con3
    {
        transform: translateX(1408px);
    }
    
    #con4
    {
        transform: translateX(2112px);
    }
    
    
    #con5
    {
        transform: translateX(2816px);
    }
    
    #con6
    {
        transform: translateX(3520px);
    }
    
    #con7
    {
        transform: translateX(4224px);
    }
    
    #con8
    {
        transform: translateX(4928px);
    }
    
    #con9
    {
        transform: translateX(5632px);
    }
    
    #con10
    {
        transform: translateX(6336px);
    }
  
 
    
    #conFirstClone
    {
        transform: translateX(-704px);
    }

    #conLastClone
    {
        transform: translateX(7040px);
    }

        #first_clone
        {
            background-image: url("Apple_Images/688/im_10_689x387.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        }
        
        #im_1
        {
            background-image: url("Apple_Images/688/im_1_689x387.jpg");
            background-repeat: no-repeat;
            
         
          
        }
        
        #im_2
        {
            background-image: url("Apple_Images/688/im_2_689x387.jpg");
        }
        
        #im_3
        {
            background-image: url("Apple_Images/688/im_3_689x387.jpg");
        }
        
        #im_4
        {
            background-image: url("Apple_Images/688/im_4_689x387.jpg");
        }
        
        #im_5
        {
            background-image: url("Apple_Images/688/im_5_689x387.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        
        }
        
        #im_6
        {
            background-image: url("Apple_Images/688/im_6_689x387.jpg");
        }
        
        #im_7
        {
            background-image: url("Apple_Images/688/im_7_689x387.jpg");
        }
        
        #im_8
        {
            background-image: url("Apple_Images/688/im_8_689x387.jpg");
        }
        
        #im_9
        {
            background-image: url("Apple_Images/688/im_9_689x387.jpg");
        }
        
        #im_10
        {
            background-image: url("Apple_Images/688/im_10_689x387.jpg");
        }
        
     
        #last_clone
        {
            background-image: url("Apple_Images/688/im_1_689x387.jpg");
        }

     
        

    }




    @media (max-width:745px)
    {

        .slideshow_wrapper {
            width: 100%;
            height: 593px;
            background-color: white;
            
            
        }

        .image_slideshow_container
        {
            max-width: 745px;
            height: 593px;
            background-color: white;
            overflow: hidden;
            position: relative;
            margin-left: auto;
            margin-right: auto;
           
        }

        .wrep {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
         
            
        }

        .slide_image_contain
        {
            width: 274px;
            height: 593px;
           
            position: absolute;
            
        }
        .slideshow_image
        {
               width: 274px;
               height: 593px;
               background-repeat: no-repeat;
        }
       

            
    #con2
    {
        transform: translateX(289px);
    }
    
    #con3
    {
        transform: translateX(578px);
    }
    
    #con4
    {
        transform: translateX(867px);
    }
    
    
    #con5
    {
        transform: translateX(1156px);
    }
    
    #con6
    {
        transform: translateX(1445px);
    }
    
    #con7
    {
        transform: translateX(1734px);
    }
    
    #con8
    {
        transform: translateX(2023px);
    }
    
    #con9
    {
        transform: translateX(2312px);
    }
    
    #con10
    {
        transform: translateX(2601px);
    }
  
    
 
    
    #conFirstClone
    {
        transform: translateX(-289px);
    }

    #conLastClone
    {
        transform: translateX(2890px);
    }


        






        #first_clone
        {
            background-image: url("Apple_Images/274/im_10_274x593.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        }
        
        #im_1
        {
            background-image: url("Apple_Images/274/im_1_274x593.jpg");
            background-repeat: no-repeat;
            
         
          
        }
        
        #im_2
        {
            background-image: url("Apple_Images/274/im_2_274x593.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        }
        
        #im_3
        {
            background-image: url("Apple_Images/274/im_3_274x593.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        }
        
        #im_4
        {
            background-image: url("Apple_Images/274/im_4_274x593.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        }
        
        #im_5
        {
            background-image: url("Apple_Images/274/im_5_274x593.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        
        }
        
        #im_6
        {
            background-image: url("Apple_Images/274/im_6_274x593.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        }
        
        #im_7
        {
            background-image: url("Apple_Images/274/im_7_274x593.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        }
        
        #im_8
        {
            background-image: url("Apple_Images/274/im_8_274x593.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        }
        
        #im_9
        {
            background-image: url("Apple_Images/274/im_9_274x593.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        }
        
        #im_10
        {
            background-image: url("Apple_Images/274/im_10_274x593.jpg");
            background-repeat: no-repeat;
         
            background-size: cover;
        }
        
   
    
        #last_clone
        {
            background-image: url("Apple_Images/274/im_1_274x593.jpg");
              background-repeat: no-repeat;
         
            background-size: cover;
        }

        

    }




    /* 
#im_1{
  
    position: relative;
    opacity: 1;
    

 
    
   
}
#im_2{
  
    opacity: 0.2;
   
 
 
}
#im_3{
   
    opacity: 0.2;
    
    
    
}
#im_4{
    
    position: relative;
    opacity: 0.2;
      
} */