*{
    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 {
font-family: Raleway;
background-color: #00080d;
}

.svg-bg{
    /* background-image: url("/home/burpeee/Code/VK_engineering/styles/bg_patter.svg"); */
}

.heading {
text-align: center;
font-size: 2.0em;
letter-spacing: 1px;
padding: 40px;
color: white;
}

.note-txt{
    color: #EFFBFB;
    font-family: 'Codec' ,sans-serif;
    font-size: var(--fs-xsm);
    font-weight: 600;
    padding: 1rem 3.5rem;
}

.contactus-link{
    text-decoration: none;
    color: #02DED7;
    font-family: 'Codec' ,sans-serif;
    font-size: var(--fs-xsm);
    font-weight: bold;
}

.gallery-image {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.gallery-image img {
    height: 300px;
    width: 300px;
transform: scale(1.0);
transition: transform 0.4s ease;
}

.img-box {
box-sizing: content-box;
margin: 10px;
height: 300px;
width: 300px;
overflow: hidden;
display: inline-block;
color: white;
position: relative;
background-color: white;
border-radius: 20px;
}

.caption {
position: absolute;
bottom: 5px;
left: 20px;
opacity: 0.0;
font-family: Arial, Helvetica, sans-serif;
transition: transform 0.3s ease, opacity 0.3s ease;
}

.transparent-box {
    height: 300px;
    width: 300px;
    background-color:rgba(0, 0, 0, 0);
position: absolute;
top: 0; 
left: 0;
transition: background-color 0.3s ease;
}

.img-box:hover img { 
transform: scale(1.1);
}

.img-box:hover .transparent-box {
background-color:rgba(0, 0, 0, 0.5);
}

.img-box:hover .caption {
transform: translateY(-20px);
opacity: 1.0;
}

.img-box:hover {
cursor: pointer;
}

.caption > p:nth-child(2), .caption > p:nth-child(3), .caption > p:nth-child(4) {
font-size: 0.8em;
}

.opacity-low {
opacity: 0.5;
}


.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;
}

.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;
    display: none;
}

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

@media (max-width: 480px) {
    .note-txt {
        font-size: var(--fs-esm);
        padding: 0px 1.5rem;
    }
}