* {
    margin: 0px;
    padding: 0px;
    }
    html {
    scroll-behavior: smooth;
    }
    
    @font-face {
    font-family: 'Anydore';
    src: url('./fontA/anydore.woff2') format('woff2');
    }
    @font-face {
    font-family: 'fanlste';
    src: url('./fontA/fanlste.woff2') format('woff2');
    }
    
    @font-face {
    font-family: 'Segira';
    src: url('./fontA/Segira.woff2') format('woff2');
    }
    
    @font-face {
    font-family: 'HindSiliguri';
    src: url('./fontA/HindSiliguri.woff2') format('woff2');
    }
    
    @font-face {
    font-family: 'Candara';
    src: url('./fontA/Candara.woff2') format('woff2');
    }
    
    .fanFont {
    font-family:'fanlste';
    }
    
    .anyFont {
    font-family: 'Anydore';
    }
    
    .segFont {
    font-family: 'Segira';
    }
    
    .siliFont {
    font-family: 'HindSiliguri';
    }
    
    .canFont {
    font-family: 'Candara';
    }
    
    .textJustify {
    text-align: justify !important;
    }
    
    .customFontSize {
    font-size: 18px !important;
    }
    
    @media screen and (max-width: 767px){
    .customFontSize {
    font-size: 18px !important;
    }     
    }
    
    .topBottom {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
    }
    .onlyBottom {
        margin-bottom: 6rem !important;
    }
    
    .onlyTop {
        margin-top: 6rem !important;
    }
    
    .myBG {
    background-color: #efefef !important;
    }
    /***********CARDS*****************/
    .card {
    height:100% !important;
    box-shadow: 0px 0px 3px 0px #7d7c76;
    border-style: solid;
    border-width: 0px 5px;
    border-color: #ffffff;
    }
    .card:hover { border-style: solid; border-width: 0px 5px; border-color: #f88f1e; transition: all .2s ease; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease;
    }
    .card-body {
    font-size: 18px !important;
    }
    .card-text {
    text-align: justify;
    }
    @media screen and (max-width:959px) {
    .card-body {
    font-size: 20px !important;
    }
    }
    /**************ONLINE CLASS BTN*******************/
    .btnOnline h1:hover {
    background:#673fa8 !important;
    color:#ffffff !important;
    }
    
    /**************About*******************/
    .aboutBG {
        background: url('./img/aboutBG.webp');
        background-attachment:fixed;
        background-repeat:no-repeat;
        background-size:cover;
        }
    
    
    /**************FOOTER*******************/
    .footBg {
    background: url('./img/footBG.webp');
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
    }
    
    /**************MISSION*******************/
    .missionBG {
    background-image: url('./img/missionBG1.webp');
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
    }
    
    
    /***************QUICK_ACCESS************************/
    #quick a:hover {
    background-color: #422d08;
    color: #fff;
    width: 80%;
    transition: all 1s ease;
    }
    /***************USE CUSTOM ANIMATION 
    ***********/
    .brsumonUp {
        transform:translateY(200px);
        animation:fromBottom forwards 1s ease-out;
        -webkit-animation:fromBottom forwards 1s ease-out;
        }
        
        @keyframes fromBottom {
        0%  {transform:translateY(200px);}
        100% { transform:translateY(0)}
        }
        
    .sumonDown {
        position: relative;
        opacity: 0; /* Start with opacity 0 */
        transform: translateY(-10%); /* Move up initially */
        animation-name: slideDown;
        animation-duration: 2s; 
        animation-delay: 1s;
        animation-fill-mode: forwards;
      }
      
      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-100%);
          -webkit-transform: translateY(-100%);
          -moz-transform: translateY(-100%);
          -ms-transform: translateY(-100%);
          -o-transform: translateY(-100%);
    }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
    
    .sumonR {
    position: relative;
    animation-name: liang;
    animation-duration: 2s; 
    /*animation-delay: 1s;*/ 
    animation-fill-mode: forwards;
    }
    
    @keyframes liang {
    from {right: 50%;}
    to {right: 0px;}
    }
    
    
    /******************AnimatedTitle********* 
    NOTE:: Don't use bootstrap text-color class
    *****************/
    .smartTitle {
    animation: suMon 5s infinite;
    -webkit-animation: suMon 5s infinite;
    }
    @keyframes suMon {
    0% {color: #f10808;}
    25% {color: #ccda0b;}
    50% {color: #f0e2f1;}
    75% {color: #13f1f1;}
    100% {color: #f10808;}
    }
    /***************NABVAR LOGO ANIMATION*********/
    .logoMove {
    animation: sumonImg 5s infinite;
    -webkit-animation: sumonImg 5s infinite;
    }
    @keyframes sumonImg {
    0% { transform:scale(.8); -webkit-transform:scale(.8); -moz-transform:scale(.8); -ms-transform:scale(.8); -o-transform:scale(.8); }
    50% { transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); }
    100% { transform:scale(.8); -webkit-transform:scale(.8); -moz-transform:scale(.8); -ms-transform:scale(.8); -o-transform:scale(.8); }
    }
    
    
    @media screen and (max-width:959px) {
    .logoMove {
    width: 5rem;
    height: 3rem;
    animation: sumonImg 5s infinite;
    -webkit-animation: sumonImg 5s infinite;
    }
    @keyframes sumonImg {
    0% { transform:scale(.8); -webkit-transform:scale(.8); -moz-transform:scale(.8); -ms-transform:scale(.8); -o-transform:scale(.8); }
    50% { transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); }
    100% { transform:scale(.8); -webkit-transform:scale(.8); -moz-transform:scale(.8); -ms-transform:scale(.8); -o-transform:scale(.8); }
    }
    }
    
    /********BTN HOVER*****************/
    .CREATE:hover {
    background:#004040;
    color:#ffffff;
    letter-spacing:1em;
    transition:all .5s ease;
    }
    
    /******************ZOOM***************/
    
    .img-hover-zoom { height: 250px !important; width: 250px !important; overflow: hidden; border: 2px solid #ebebeb; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; transition: transform 2s ease; -webkit-transition: transform 2s ease; -moz-transition: transform 2s ease; -ms-transition: transform 2s ease; -o-transition: transform 2s ease;
    }
    
    
    /* [3] Finally, transforming the image when container gets hovered */
    .img-hover-zoom:hover {
    border: 1px solid #400040;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    }
    
    /*TEXT SHADOW*/
    .textShadow {
    text-shadow: 1px 2px 3px #2a2a2a;
    }
    
    /*******ANOTHER ANIMATION **********/


    /*******GALLERY ZOOM ON **********/
    .image-container {
        overflow: hidden;
        position: relative;
    }
    
    .zoom-wrapper {
        position: relative;
        width: 100%;
        height: 400px;
    }
    
    .zoomable-image {
        transition: transform 0.2s ease;
        transform-origin: center;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
      /*******GALLERY ZOOM OFF **********/