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

:root{
    --fs-esm: clamp(0.64rem, 0.41vw + 0.57rem, 1.06rem);
    --fs-sm: clamp(0.8rem, 0.59vw + 0.7rem, 1.41rem);
    --fs-base: clamp(1rem, 0.85vw + 0.85rem, 1.88rem);
    --fs-md: clamp(1.25rem, 1.22vw + 1.04rem, 2.5rem);
    --fs-lg: clamp(1.56rem, 1.73vw + 1.26rem, 3.33rem);
    --fs-xl: clamp(1.95rem, 2.43vw + 1.53rem, 4.44rem);
    --fs-2xl: clamp(2.44rem, 3.39vw + 1.85rem, 5.92rem);
    --fs-3xl: clamp(3.05rem, 4.72vw + 2.23rem, 7.89rem);
}

@font-face {
    font-family: 'Codec';
    src: url('../fonts/Codec-Cold-Regular-trial.ttf');
    font-weight: 400;
}
@font-face {
    font-family: 'Codec';
    src: url('../fonts/Codec-Cold-Bold-trial.ttf');
    font-weight: bold;
}
@font-face {
    font-family: 'Codec';
    src: url('../fonts/Codec-Cold-ExtraBold-trial.ttf');
    font-weight: 800;
}
@font-face {
    font-family: 'Codec';
    src: url('../fonts/Codec-Cold-Light-trial.ttf');
    font-weight: 300;
}

.colors_used{
    color :#00080d;
    color : #02DED7;
    color: #EFFBFB;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background: #02DED7;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background:#02ded7a2;
}

body{
    /* background-color: #00111A; */
    /* background-color: #131515; */
    background-color: #00080d;
}

.mainContainer{
    width:min(1920px , 100% );
    margin:auto;
}

.bg-image-cont{
    position: relative;
    width: 100%;
    background-image: url('../resources/header_image_and_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1px;
}

.nav-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: min(2vh, 2rem);
    padding: 1rem;
}

.nav-title{
    color: #02DED7;
    font-family: 'Codec' , sans-serif;
    font-size: var(--fs-lg);
    font-weight: bold;
}

.nav-link{
    display: flex;
    align-items: center;
    text-decoration: none;
    color:#02DED7;
    font-family: 'Codec' ,sans-serif;
    font-size: var(--fs-sm);
    transition: all 0.3s;
}

.nav-link:hover{
    color:rgb(239, 251, 251 , 0.8);
}


.nav-link > span{
    padding: 0px 0.3em;
}

.nav-bar > h2, .nav-bar > a{
    margin: 0px min(3.5rem , 10vw) ;
}

.card{
    width: max(20rem ,55%);
    margin: min(5vh , 1.5rem) auto;
    padding: max(0.5rem , 2vw);
    background-color: rgba(0, 8, 13,0.3);
    border-radius: 30px;
}

.text-blue{
    color:#02DED7;
    font-family: 'Codec' , sans-serif;
    font-size: var(--fs-xl);
    font-weight: bold;
}

.text-white{
    color:#EFFBFB;
    font-family: 'Codec' , sans-serif;
    font-size: var(--fs-md);
    font-weight: 400;
}

.desc-text{
    color: rgba(239, 251, 251, 0.8);
    font-family: 'Codec' ,sans-serif;
    font-size: var(--fs-sm);
    width: 90%;
    max-width: 40rem;
    padding: 0.5em;
    margin-block: min(0.5rem , 1.5vw);
    text-transform: capitalize;
}

.tagline-text{
    color:#02DED7;
    font-family: 'Codec' ,sans-serif;
    font-size: var(--fs-base);
    font-weight: bold;
    width: 90%;
    max-width: 40rem;
    margin-block: min(0.5rem , 1.5vw);
}

.view-pods-link{
    display: inline-block;
    text-decoration: none;
    color:#EFFBFB;
    font-family: 'Codec' ,sans-serif;
    font-size: var(--fs-sm);
    font-weight: bold;
    padding: 1rem 1.5rem;
    border: 2px solid #EFFBFB;
    border-radius: 30px;
    margin-block: min(0.5rem , 1vw);
    text-transform: capitalize;
    transition: all 0.3s;
}

.view-pods-link:hover{
    color:#02DED7;
    border-color: #02DED7;
}

.svg-curve{
    /* display: inline; */
    position: absolute;
    left :0;
    bottom: 0;
}

.products-section-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: min(3vh ,1rem) min(3rem , 5vw);
    overflow: hidden;
}

.head-text{
    color: #02DED7;
    font-family: 'Codec' ,sans-serif;
    font-size: var(--fs-xl);
    font-weight: bold;
}

.product-showcase{
    text-align: center;
}

.prod-link{
    text-decoration: none;
    color: rgba(239, 251, 251,0.5);
    font-family: 'Codec' ,sans-serif;
    font-size: var(--fs-sm);
    font-weight: bold;
    padding: 0.5rem;
    transition: all 0.3s;
}

.prod-link:hover{
    color:rgba(2, 222, 215,0.8);
    transform: scale(1.1);
}

/* #slider img {
    width:250px;
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
    border-radius: 150px;
    margin: 0px 2rem;
}
  
  #slider button{
    position:absolute ; 
    border: none;
    height:250px;
    vertical-align:top;
    font-size: 2em;
    background-color: rgb(30,30,30);
    color:#fff;
    cursor: pointer;
  }

  #slider button:active{
    box-shadow: 0 0 10px rgba(0,0,0,0.7);
  } */

  .image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.image-container img {
    width: 100%;
    height: auto;
    max-width: 150px;  /* Default size */
    border-radius: 50%;
    object-fit: cover;
    flex: 1 0 100%; /* Full width on smallest screens */
}


.heading-advantages-cont{
    margin: min(4rem , 7vh) 0.5rem;
}

.advantages-section-heading {
    color:#02DED7;
    font-family: 'Codec' , sans-serif;
    font-size: var(--fs-xl);
    /* how to give gradien to text learnt from : https://cssgradient.io/blog/css-gradient-text/ */
    /* gradient generated from : https://cssgradient.io/ */
    background: linear-gradient(113deg, rgba(120,216,213,1) 0%, rgba(0,252,244,1) 30%, rgba(120,216,213,1) 68%, rgba(0,252,244,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.4s;
    padding: 0px 0.2em;
}

.advantage-container{
    display: flex;
    margin:0px auto;
    justify-content: center;
    overflow: hidden;
}

.bold-blue{
    color:#02DED7;
    font-weight: bold;
}

.advantage-card{
    background-color: rgba(239, 251, 251,0.04);
    border-radius: 35px;
    width:40%;
    margin: min(2rem , 2vh)  0.7rem;
}

.advantage{
    color:#02DED7;
    font-family: 'Codec' ,sans-serif;
    font-weight: bold;
    font-size: var(--fs-lg);
    text-align: center;
    padding:0.2em;
    margin: max(1rem , 1vw) 0px;
}

.desc{
    font-family: 'Codec' , sans-serif;
    color :rgba(239, 251, 251,0.8);
    font-size: var(--fs-base );
    text-align: center;
    padding: 0.3em 0.9em;
    margin: min(1rem , 2vh) 0px;
}

.contus-btn{
    color:#02DED7;
    background-color: #00080d ;
    border: 2px solid #02DED7;
    font-family: 'Codec' ,sans-serif;
    font-size: var(--fs-sm);
    font-weight: bold;
    padding:0.7em 1em;
    border-radius: 35px;
    transition: all 0.3s;
    /* border: 2px solid  rgba(239, 251, 251, 0); */
    position: fixed;
    bottom: 3%;
    right: 1%;
    z-index: 1;
    cursor: pointer;
}

#contactus-txt{
    transition: all 0.3s;
}

#modal{
    display: none;
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color:#00080d5c;
    backdrop-filter: blur(10px);
    top:0;
    left:0;
    overflow: scroll;
}

.modal-holder{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.contus-btn:hover{
    box-shadow: 0px 0px 15px #02ded77b;
    border: 2px solid #02DED7;
}

.modal-card{
    background-color: rgba(0, 8, 13, 0.85);
    padding:2em;
    border-radius: 35px;
    border: 1px solid #02DED7;
    box-shadow: 5px 0px 35px #02ded77b;
    margin: 0.5rem;

}

.modal-card > h3{
    color: #02DED7;
    font-family: 'Codec' , sans-serif;
    font-weight: bold;
    font-size: var(--fs-xl);
    padding: 0px min(2em , 2vw);
}

.modal-card > h5{
    color: rgba(239, 251, 251, 0.574);
    font-family: 'Codec' , sans-serif;
    font-weight: bold;
    font-size: var(--fs-sm);
}

.inputs-cont{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 90%;
    margin :min(1rem , 2vh) auto;
    padding: 0.1em;
}

.input-holder{
    margin: min(2rem , 2vh) 0px;
}

.form-labels{
    color:#02DED7;
    font-size: var(--fs-esm);
    font-family: 'Codec' , sans-serif;
    font-weight: bold;
}

.form-labels , .input-elems{
    display: block;
    width: 100%;
    margin: 0.5rem 0px;
}

.input-elems{   
    font-size: var(--fs-sm);
    font-family: monospace ;
    font-weight: bold;
    color:rgba(239, 251, 251, 0.8);
    background-color: #00080d;
    outline: none;
    border: 2px solid #02DED7;
    padding: 0.3em 0.5em;
    border-radius: 10px;
    letter-spacing: 1px;
    resize: none;
    transition: all 0.3s;
}

.input-elems:focus{
    box-shadow: 5px 0px 35px #02ded77b;
}

#user-message{
    display: inline-block;
    height: max(5rem , 6vh);
}

.form-btn{
    color:#00080d;
    background-color: #02DED7;
    border: 2px solid rgba(255, 0, 0, 0);
    font-family: 'Codec', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 800;
    padding: 0.5em 1em;
    width: 50%;
    border-radius: 35px;
    word-spacing: 3px;
    transition: all 0.2s;
    cursor: pointer;
}

.form-btn:hover{
    color: #02DED7;
    background-color: #00080d;
    border: 2px solid #02DED7;
}

.fotter-cont{
    background-image: url('../resources/footer-image-bg.png');
    z-index:99;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: min(5rem  , 10vh);
}

.fotter-info{
    width:80%;
    margin:0px auto;
    padding: 0.1em;
}

.fotter-heading{
    font-family: 'Codec' ,sans-serif;
    font-size: var(--fs-xl);
    /* padding: 0.5em 1em; */
    margin: max(2rem , 5vh) 0px;
    color:#EFFBFB;
}

.info-elem{
    color:rgba(239, 251, 251,0.4);
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
    font-weight: bold;
    word-spacing: 5px;
    letter-spacing: 1px;
    font-size: var(--fs-sm);
    margin-block: 1.5rem;
    transition: all 0.3s;
    padding: 0.1em;
    cursor: pointer;
}

.info-elem > i{
    color: #02DED7;
    font-size: var(--fs-base);
}

.info-elem:hover{
    color:rgba(239, 251, 251,0.8);
    transform: scale(1.01);
}

.radhe-radhe{
    text-align: center;
    color:#02DED7;
    font-family: 'Codec' ,sans-serif;
    font-size: var(--fs-lg);
    padding: 0.2em 0px;
    font-weight: bold;
    cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg') , auto;
}

@media (min-width: 480px) {
    .image-container img {
        max-width: 180px;
        flex: 1 0 calc(50% - 20px); /* Two images side by side */
    }
}
@media (min-width: 768px) {
    .image-container img {
        max-width: 210px;
        flex: 1 0 calc(33.33% - 20px); /* Three images side by side */
    }
}
@media (min-width: 992px) {
    .image-container img {
        max-width: 240px;
        flex: 1 0 calc(25% - 20px); /* Four images side by side */
    }
}
@media (min-width: 1200px) {
    .image-container img {
        max-width: 270px;
        flex: 1 0 calc(20% - 20px); /* Five images side by side */
    }
}
@media (min-width: 1400px) {
    .image-container img {
        max-width: 300px;
        flex: 1 0 calc(16.66% - 20px); /* Six images side by side */
    }
}
@media (min-width: 1600px) {
    .image-container img {
        max-width: 325px;
        flex: 1 0 calc(14.28% - 20px); /* Seven images side by side */
    }
}
@media (min-width: 1800px) {
    .image-container img {
        max-width: 350px;
        flex: 1 0 calc(12.5% - 20px); /* Eight images side by side */
    }
}

@media (max-width :375px) {
    #prod-txt{
        display:none;
    }
}

@media (max-width :400px) {
    .head-text{
        font-size: var(--fs-lg);
    }
    .prod-link{
        font-size: var(--fs-esm);
    }
    #contactus-txt{
        display: none;
    }
    .contus-btn{
        padding: 0.8em;
        font-size: var(--fs-base);
    }

}

@media (max-width :320px) {
    .card{
        width: 90%;
    }


}
@media (max-width :425px) {
    .info-elem{
        font-size: var(--fs-esm);
    }
}

@media (max-width :480px) {
    .advantage-container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .advantage-card{
        width: 80%;
    }
}