﻿.navbar-background {
    background-color: #0C81BC !important;
}

.nav-link-color {
    color: white !important;
}

.logo-color-h {
    color: #DC143C !important;
}

.logo-color-n {
    color: #003893 !important;
}

.fontbold {
    font-weight: bold;
}

.fixed-nav-bar-top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    background-color: #003893;
}

.textoverflowadjust {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.headingtitle {
    clip-path: polygon(0 0,80% 0,100% 100%,0 100%);
    background-color: #04122f;
    color: white;
    padding: 7px 40px 7px 5px;
    -webkit-clip-path: polygon(0 0,80% 0,100% 100%,0% 100%);
}

/* Normal-zoom container */
.img-hover-zoom {
    /*height: 300px;*/ /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

    /* [2] Transition property for smooth transformation of images */
    .img-hover-zoom img {
        transition: transform .5s ease;
    }

    /* [3] Finally, transforming the image when container gets hovered */
    .img-hover-zoom:hover img {
        transform: scale(1.2);
    }

/* Quick-zoom Container */
.img-hover-zoom--quick-zoom {
    /*height: 300px;*/ /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

    .img-hover-zoom--quick-zoom img {
        transform-origin: 0 0;
        transition: transform .25s, visibility .25s ease-in;
    }

    /* The Transformation */
    .img-hover-zoom--quick-zoom:hover img {
        transform: scale(2);
    }

/* Point-zoom Container */
.img-hover-zoom--point-zoom {
    /*height: 300px;*/ /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

    .img-hover-zoom--point-zoom img {
        transform-origin: 65% 75%;
        transition: transform 1s, filter .5s ease-out;
    }

    /* The Transformation */
    .img-hover-zoom--point-zoom:hover img {
        transform: scale(5);
    }

/* Zoom-n-rotate Container */
.img-hover-zoom--zoom-n-rotate {
    /*height: 300px;*/ /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

    .img-hover-zoom--zoom-n-rotate img {
        transition: transform .5s ease-in-out;
    }

    /* The Transformation */
    .img-hover-zoom--zoom-n-rotate:hover img {
        transform: scale(2) rotate(25deg);
    }

/* Slow-motion Zoom Container */
.img-hover-zoom--slowmo {
    /*height: 300px;*/ /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

    .img-hover-zoom--slowmo img {
        transform-origin: 50% 65%;
        transition: transform 5s, filter 3s ease-in-out;
        filter: brightness(150%);
    }

    /* The Transformation */
    .img-hover-zoom--slowmo:hover img {
        filter: brightness(100%);
        transform: scale(3);
    }

/* Brightness-zoom Container */
.img-hover-zoom--brightness {
    /*height: 300px;*/ /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

    .img-hover-zoom--brightness img {
        transition: transform 2s, filter 1.5s ease-in-out;
        transform-origin: center center;
        filter: brightness(50%);
    }

    /* The Transformation */
    .img-hover-zoom--brightness:hover img {
        filter: brightness(100%);
        transform: scale(1.3);
    }

/* Horizontal Zoom-n-pan Container */
.img-hover-zoom--zoom-n-pan-h {
    /*height: 300px;*/ /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

    .img-hover-zoom--zoom-n-pan-h img {
        transition: transform .5s ease-in-out;
        transform: scale(1.4);
        transform-origin: 100% 0;
    }

    /* The Transformation */
    .img-hover-zoom--zoom-n-pan-h:hover img {
        transform: scale(1.5) translateX(30%);
    }

/* Vertical Zoom-n-pan Container */
.img-hover-zoom--zoom-n-pan-v {
    /*height: 300px;*/ /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

    .img-hover-zoom--zoom-n-pan-v img {
        transition: transform .5s ease-in-out;
        transform: scale(1.4);
        transform-origin: 0 0;
    }

    /* The Transformation */
    .img-hover-zoom--zoom-n-pan-v:hover img {
        transform: scale(1.25) translateY(-30%);
    }

/* Blur-zoom Container */
.img-hover-zoom--blur {
    /*height: 300px;*/ /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

    .img-hover-zoom--blur img {
        transition: transform 1s, filter 2s ease-in-out;
        filter: blur(2px);
        transform: scale(1.2);
    }

    /* The Transformation */
    .img-hover-zoom--blur:hover img {
        filter: blur(0);
        transform: scale(1);
    }

/* Colorize-zoom Container */
.img-hover-zoom--colorize {
    /*height: 300px;*/ /* [1.1] Set it as per your need */
    overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

    .img-hover-zoom--colorize img {
        transition: transform .5s, filter 1.5s ease-in-out;
        filter: grayscale(100%);
    }

    /* The Transformation */
    .img-hover-zoom--colorize:hover img {
        filter: grayscale(0);
        transform: scale(1.1);
    }
