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

html
{
    font-size: 10px;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    scroll-behavior: smooth;
}

a{
    text-decoration: none;
    color: inherit;
}

a:hover{
    color: rgb(73, 97, 255);
}

li{
    list-style: none;
}

/*******************************************************************************************************/


/****************************temporary_section*******************************************************************/
img{
    width: 5rem;
}

p{
    font-weight: 600;
}

/* *{
    border: 1px solid red;
} */

.section_one{
    background-image: url(images/compressed/Abstract_Background11.jpg);
    background-attachment: fixed;
    background-size: cover;
    /* background-position: top; */
    /* object-fit: cover; */
    
}
.section_two{
    background-image: url(images/compressed/Abstract_Background27.jpg);
    background-attachment: fixed;
    background-size: cover;
    /* background-position: top; */
    /* object-fit: cover; */
    
}

.section_three{
    background-image: url(images/compressed/Abstract_Background15.jpg);
    background-attachment: fixed;
    background-size: cover;
    /* background-position: top; */
    /* object-fit: cover; */
    color: aliceblue;
}


@keyframes appear{
    from{
        opacity: 0;
        scale: 0.5;
        /* transform: translateY(200px); */
    }
    
    to{
        opacity: 1;
        scale: 1;
        /* transform: translateX(0px); */
    }
}
.product_highlights_container, .section_two_heading{
    animation: appear linear;
    animation-timeline: view();
    /* animation-range: entry 0; */
    animation-range: entry 0% cover 40%;
    backdrop-filter: blur(10px);
    background-color: rgba(207, 94, 255, 0.5);

}




/*******************************************************************************************************/

/*******************header_section_start***********************/
header{
    position:sticky;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    
    padding: 1rem;
    background-color: darkgray;
    color:darkslategray;
    z-index: 100000;

}

.logo_box{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav_list{
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand_logo{
    height: 5rem;
    width: auto;
}

header p{
    font-weight: 700;
}

/*******************header_section_end***********************/

/*******************section_one_start***********************/
.section_one{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* height: min(70svw,70svh); */
    /* padding: min(14svw, 18svh) 2rem; */
    gap: 5rem;
    height: 90svh;
    padding: 6rem 2rem;
    
    background-color: gainsboro;
    /* color: rgb(54, 0, 190); */
    color: white;
    background-position: center;
    /* bottom: 0px  ; */
    /* background-color: black; */
    /* mix-blend-mode: darken; */
    
}

.heading_tag{
    /* background-color: rgba(0, 0, 0, 0.6); */
    background-color: black;
    padding: 0.5rem 1rem;
    border-radius: 3rem;
    text-align: center;
    
}

h1.main_heading {
    color: rgb(255, 255, 255);
    font-weight: 900;
    /* font-size: xxx-large; */
    font-size: min(9svh, 9svw);
    /* text-shadow: 0px 0px 10px black; */

    /* text-shadow: 0px 0px 10px #00b3ff89,
                0px 0px 20px #00b3ff89,
                0px 0px 40px #00b3ff89,
                0px 0px 80px #00b3ff89,
                0px 0px 120px #00b3ff89; */

    text-shadow: 0px 0px 10px #00b3ff,
                0px 0px 20px #00b3ff,
                0px 0px 40px #00b3ff,
                0px 0px 80px #00b3ff,
                0px 0px 120px #00b3ff;
    text-align: center;
}

.heading_description{
    text-shadow:    0px 0px 10px white,
                    0px 0px 20px white,
                    0px 0px 40px white,
                    0px 0px 120px white;
    font-size: max(2.5svh, 1svw);
    font-weight: 400;
    text-align: center;
    color: black;
    width: 70svw;
    /* line-height: min(6svh, 4svw); */
}

.explore_products{
    font-weight: 900;
    font-size: 2rem;
    color: white;
    /* background-color: rgba(0, 0, 0, 0.8); */
    background-color: black;
    padding: 1rem 2rem;
    border-radius: 1.5rem;
    border: none;
    cursor: pointer;
}

.explore_products:hover{
    /* scale: 1.2; */
    transition: all 0.5s ease-out;
    background-color: white;
    color: rgba(0, 0, 0, 0.8);
    box-shadow: 10px 10px 1px 1px black;

}


/*section one 0000000000000000*/

/* .section_one_1::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url(extra_images/compressed/Abstract_Background25.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    z-index: -1;
}

.section_one_1 h1{
    text-align: center;
    font-size: 10rem;
    font-weight: 900;
   
} */

/*section one 0000000000000000*/

/*******************section_one_end***********************/

/*******************section_two_start***********************/
.section_two{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;

    /* background-color: rgb(186, 223, 255); */
    margin: 1rem 1rem;
    padding: 5rem;
    /* z-index: -1; */
}

.section_two_heading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    /* background-image: linear-gradient(135deg,rgb(71, 61, 139),rgb(137, 43, 226)) ; */
    
    /* backdrop-filter: blur(10px); */
    /* background-image: linear-gradient(135deg,rgba(71, 61, 139, 0.7),rgba(137, 43, 226, 0.7)) ; */
    /* background-image: linear-gradient(135deg,rgba(51, 43, 98, 0.8),rgba(84, 26, 139, 0.8)) ; */
    
    background-image: linear-gradient(-45deg,rgb(71, 61, 139),rgb(153, 50, 250)) ;
    text-align: center;
    color: white;
    /* border-radius: 4rem 0px 4rem 0px; */
    border-radius: 2rem;
    padding: 3rem;
    /* box-shadow: -1px -1px 2px 1px rgb(186, 223, 255),
            1px 1px 2px 1px rgb(60, 60, 60); */
    box-shadow: inset 1px 1px 2px 0px rgb(255, 255, 255),
                1px 1px 1px 0px rgb(0, 0, 0);
    /* border: 0px solid black; */
}

.product_highlights_container{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    gap: 2rem;
    /* background-color: whitesmoke; */
    border-radius: 1rem;
    padding: 2rem;
    flex-wrap: wrap;
    
}

.product_highlight{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 1rem;
    
    /* background-image: linear-gradient(135deg,rgb(88, 146, 146),darkslategray, black) ; */
    
    background-image: linear-gradient(135deg,rgb(158, 255, 255),darkslategray, black) ;
    box-shadow: inset 0px 0px 2px 2px rgb(255, 255, 255);
    color: white;
    padding: 2rem;
    border-radius: 1rem;
    flex-wrap: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 1;
    /* width: 20rem; */
    
    /*experimental*/
    width: 30rem;
    height: 20rem;
    /*experimental*/
}

/*******************section_two_end***********************/

/*******************section_three_start***********************/
/* for laptop devices 111111111111111111111111111 */
.section_three{
    padding: 3rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

/*heading*/
.section_three_heading{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}
.section_three_heading h1{
    font-size: 3rem;
}
.section_three_heading p{
    font-size: 1.5rem;
}
.section_three_heading p,.section_three_heading h1{
    text-shadow: 0px 0px 5px rgb(0, 0, 0);
}
/*heading*/

/*products*/

.product_grid{
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    width: 95svw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
    border-radius: 3rem;
}

.product_container{
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    padding: 1rem;
    /* background-color: rgba(255, 0, 0, 0.5); */
}

.haze_container{
    flex-direction: row-reverse;
}

.product_container>*{
    /* flex-grow: 1;
    flex-shrink: 1; */
    width: 40svw;
    /* background-color: rgba(255, 255, 255, 0.5); */
    border-radius: 3rem;
    margin: 1rem;

    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    flex-direction: column;
    gap: 1rem;

}

.image_container img{
    width: 50svh;
    object-fit: cover;
    box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.4);
    border-radius: 3rem;
    /* align-self: center; */
}


/*products details*/
.product_details{
    padding: 2rem 2rem;
    text-align: justify;
    /* text-align: center; */
    justify-content: space-between;
    /* box-shadow: 5px 5px 10px white,
            inset 1px 1px 5px white; */
}

/* .product_details>*{
    border: 1px dotted whitesmoke;
} */

.product_tag{
    align-self: self-end;
    padding: 0.25rem 1rem;
    border-radius: 1rem;
    background-color: black;
    box-shadow: 0px 0px 10px white;
}

.product_name{
    font-size: 3rem;
}
.product_description{
    font-size: 1.8rem;
    font-weight: 400;
    /* margin: 0px 1.5rem; */
}

.key_features_container{
    /* border: 1px dotted whitesmoke; */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}
.key_features{
    font-size: 2rem;
}
.key_features_points_container{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

}
.key_features_points_container>*{
    /* max-width: 50rem; */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 18rem;
    /* border: 1px dotted whitesmoke; */
}

.key_features_points{
    display: flex;
    /* align-items: center; */
    /* justify-items: center; */
    font-size: 1.5rem;
    gap: 1rem;
}

.key_features_points svg{
    /* color: rgb(0, 0, 0); */
    color: rgb(22, 163, 74);
    width: 1.8rem;
    flex-shrink: 0;
    /* box-shadow: inset 1px 1px 1px black; */
    /* filter: drop-shadow(0px 0px 1px rgb(255, 255, 255));   */
    /* filter: drop-shadow(0px 0px 2px rgb(255, 255, 255));   */
}


/*ideal for*/
.ideal_for_container{
    /*experimental*/
    padding: 2rem 1rem;
    /*experimental*/
    width: 100%;
    /* border: 1px dotted white; */
}
.ideal_for_container h2{
    font-size: 2rem;
}

.ideal_for_points{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-wrap: nowrap;
    flex-wrap: wrap;
    /* border: 1px dotted white; */
    margin-top: 2rem;
}

.ideal_for_points>*{
    /* border: 1px dotted white; */
    flex-grow: 1;
    flex-shrink: 1;
    /* flex-basis: 10rem; */
}

/*ideal for*/


/*products details*/



/*products*/

/*11111111111111111111111111111111111111111111111*/


@media (max-width:800px){
    .section_three{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 2rem;  
        /* padding: 2rem; */
        text-align: center;
    }
    
    .image_container img{
        width: 100%;
        /* clip-path: cover; */
    }
    .image_container{
        padding: 0rem 1rem;
    }
    
    .product_grid{
        /* background-color: rgba(150, 150, 150, 0.5); */
        /* background-color: rgba(0, 0, 0, 0.5); */
        
        /*experimental*/
        background-color: inherit;
        /*experimental*/
        width: auto;
    }
    
    .product_container{
        display: flex;
        flex-direction: row;
        align-items: center;
        /* justify-content: center; */
        overflow-x: scroll;
        width: min(40rem,100svw);
        /* gap: 0.5rem; */
        background-color: rgba(0, 0, 0, 0.5);
        scroll-snap-type: x mandatory;
    }
    
    .product_container > *{
        width: min(40rem,100svw);
        /* border: 1px solid white; */
        flex-shrink: 0;
        scroll-snap-align: center;
    }
    
/*section three product details*//*00000000000000000*/
.product_tag{
    background-color: black;
    /* color: rgba(255, 255, 255, 0.8); */
    color: rgba(255, 255, 255, 1);
    padding: 0.5rem 1.5rem;
    border-radius: 3rem;
    display: inline-block;
    box-shadow: 0px 0px 5px 1px white;
}
.product_details{
    padding: 0rem 2rem;
}

.product_name{
    font-size: 3rem;
    padding: 1rem 0rem;
}

.product_description{
    font-size: 1.4rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);;
}


.key_features_container{
    padding: 2rem 0rem;    
}

.key_features{
    font-size: 2rem;
    padding: 2rem 0rem;    
}

.key_features_points_container{
    display: flex;
    /* gap: 0.5rem; */
    gap: 1rem;
    flex-wrap: wrap;
}

.key_features_points_container>*{
    /* background-color: rgba(0, 0, 0, 0.578); */
    /* width: 10rem; */
    flex-grow: 1;
    flex-shrink: 1;

}

.key_features_points{
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    gap: 1rem;

}

.key_features_points svg{
    width: 16px;
}

.key_features_points p{
    font-size: 1.5rem;
    font-weight: 400;
}


.ideal_for_container{
    padding: 2rem 0rem;
}

.ideal_for_points{
    padding: 1rem 0rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

}

.ideal_for_points>*{
    flex-grow: 1;
    flex-shrink: 1;

}
}
/*section three product details*//*00000000000000000*/



/*******************section_three_end***********************/


/*******************footer_section_start***********************/

footer{
    background-image: url(images/compressed/Abstract_Background12.jpg);
    background-size: 100% 250%;
    background-position: bottom;
    color: white;
    /* background-clip: text; */
    /* padding-top: 4rem; */
}

.contact_us_container{
    /* border: 1px solid white; */
    margin: 0rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    padding: 4rem 0rem;
    text-align: center;
}

.contact_us_container h1{
    font-size: 4rem;
    font-weight: 900;
}

.contact_us_container p{
    font-size: 2rem;
    font-weight: 700;
}
/* .contact_us_container>*{
    border: 1px solid white;
} */
.contact_us{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.contact_us>*{
    width: min(50rem, 40svw);
    /* background-color: rgba(0, 0, 0, 0.5); */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.contact_us_heading{
    font-size: 2rem;
}
.contact_us_details{
    flex-direction: column;
    font-size: 1.5rem;
}


/*000000000000000000000000000000*/

.end_section{
    padding: 6rem 2rem;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.end_section>*{
    flex:1 1 0;
    /* border: 1px solid lightblue; */
}

.end_brand_details{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.end_brand_details>*{
    /* border: 1px solid white; */
    flex: 1 1 0;
}

.end_brand_name_and_logo{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* width: 40svw; */

}

.end_brand_name_and_logo>*{
    flex: 1 1 0;
}

.end_logo img{
    /* height: 6rem; */
    width: 100%;
}

.end_brand_name h1{
    font-size: 3rem;
    font-weight: 900;
}
.end_brand_name p{
    font-size: 1.5rem;
}
.end_brand_description p{
    font-size: 1.5rem;
    font-weight: 400;
}

.end_product_links{
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    gap: 1rem;
}

.end_product_links h1{
    font-size: 2rem;
}

.end_product_links p{
    font-size: 1.5rem;
    font-weight: 400;
}
/*******************footer_section_end***********************/