@import url('https://fonts.googleapis.com/css?family=Baloo+Da');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@600&display=swap');

html,body{
    font-family: 'Baloo Da', cursive;
    /* background: rgb(209, 209, 209); */
    /* background-image: linear-gradient(90deg, rgb(209, 209, 209), #ffffff); */
}

:root {
    /* ------------ FONTS ------------- */
    --font-1: 'Baloo Da', cursive;
    --font-2: 'Noto Sans Bengali', sans-serif;
    /* ------------ FONT SIZE ------------- */
    --font-size-1: 1.5rem;
    --font-size-2: 0.58rem;
    --font-size-3: 0.8rem;
    --font-size-4: 0.6rem;
    --font-size-5: 1rem;
    --font-size-6: 1.8rem;
    --font-size-7: 2rem;
    --font-size-8: 3rem;
    --font-size-9: 4rem;
    --font-size-10: 5rem;
    --font-size-11: 6rem;
    --font-size-12: 10rem;

    /* ------------ COLORS ------------- */
    --color-1: #111455;
    /* --color-1: rgb(43, 10, 73); */
    --color-2: rgb(126, 27, 219);
    --color-3: rgb(0, 0, 0);
    /* --color-4: rgb(255, 191, 0); */
    --color-4: #ffd717;
    --color-5: rgba(132, 0, 255, 0.455);
    --color-6: #446a468b;
    --color-7: #BB001B;
    --color-8: #b0b0b1;
    --color-9: rgb(240, 247, 254);
    --color-10: #534340;
    --color-12: #FFE162;
    --color-13: #29af5e;
    --color-14: #f7c37f;
    --color-15: rgb(183, 183, 183);
    --color-16: #5853bc8d;
    --color-17: #1a4d2ec3;
    /* --color-18: #AAA966; */
    --color-18: #5853BC;
    --color-19: #77ACF1;
    --color-20: #77acf16e;
    --color-21: #FF5200;
    --color-22: #123922;
}

#pre-Loader{
    background: white url('../webImages/loader.gif') no-repeat center center;
    /* background-size: 25%; */
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100;
}

.color-1{
    color: var(--color-19);
}

.bg-color-1{
    background: var(--color-1);
}

.bg-color-2{
    /* background: #ffc517; */
    background: var(--color-16);
}

.bg-color-3{
    background: #77ACF1;
}

#bg-color-8{
    background: var(--color-8);
}

.color-2{
    color: var(--color-12);
}

.color-3{
    color: var(--color-1);
}

.color-8{
    color: var(--color-8);
}

.font-s-1 {
    font-size: var(--font-size-3);
}
.font-s-2 {
    font-size: var(--font-size-5);
}

.font-s-3 {
    font-size: var(--font-size-6);
}

.font-s-4 {
    font-size: var(--font-size-4);
}

.font-s-5 {
    font-size: var(--font-size-1);
}

.font-s-6 {
    font-size: var(--font-size-10);
}

/* .lh-1{
    line-height: 0.25in;
} */



.anchor {
    text-decoration: none;
    color: var(--color-19);
    transition: 0.3s;
}

.anchor:hover {
    color: var(--color-4);
}

.lett-sp{
    letter-spacing: calc(2em / 10);
}

.proper{
    display: flex;
    flex-direction: row;
    column-gap: 20px;
}

.extra-shd{
    
    box-shadow: 3px 5px 10px #748DA6;
}

@media only screen and (min-width: 300px) {
    .font-res {
        font-size: var(--font-size-2);
    }
    .big-n{
        font-size: var(--font-size-10);
    }
    .font-s-poly {
        font-size: var(--font-size-3);
    }
    .font-s-dyn{
        font-size: var(--font-size-3);
    }
    .col-0{
        visibility: hidden;
        display: none;
        opacity: 0;
        width: 0.0000001rem;
        position: absolute;
    }
    .caros{
        height: 42vh;
        filter: brightness(40%);
    }
    .caption{
        font-size: var(--font-size-3);
    }
    .shift{
        margin-top: -1rem;
        position: relative;
        z-index: 2;
    }
    #partition{
        border-bottom: 2px solid var(--color-19);
    }
    .font-res-2{
        font-size: var(--font-size-2);
    }

    .wid-res{
        width: 270px;
    }
}

/* @media only screen and (min-width: 360px) {
    .wid-res{
        width: 200px;
    }
} */

@media only screen and (min-width: 360px) {
    .font-res {
        font-size: var(--font-size-3);
    }
    .caros{
        height: 38vh;
    }
    .shift{
        margin-top: -2rem;
        /* position: relative;
        z-index: 2; */
    }
    .wid-res{
        width: 310px;
    }
    .big-n{
        font-size: var(--font-size-11);
    }

}

@media only screen and (min-width: 370px) {
    .wid-res{
        width: 328px;
    }
}

@media only screen and (min-width: 390px) {
    .wid-res{
        width: 345px;
    }
}

@media only screen and (min-width: 399px) {
    .wid-res{
        width: 368px;
    }
}

@media only screen and (min-width: 400px) {
    .wid-res{
        width: 365px;
    }
}

@media only screen and (min-width: 430px) {}

@media only screen and (min-width: 500px) {
    .caros{
        height: 28vh;
    }
    #partition{
        border-bottom: none;
        border-right: 2px solid var(--color-19);
    }
    .big-n{
        font-size: var(--font-size-11);
    }
    .font-s-w {
        font-size: var(--font-size-5);
    }

}

/* ------------ Extra small devices (phones, 600px and down) ------------ */

@media only screen and (max-width: 600px) {}

/* ------------ Small devices (portrait tablets and large phones, 600px and up) ------------ */
@media only screen and (min-width: 600px) {
    .font-res {
        font-size: var(--font-size-5);
    }
    .font-s-dyn{
        font-size: var(--font-size-3);
    }
    .caption{
        font-size: 1.5rem;
    }
    .away{
        transform: translateX(10%);
    }
    .font-s-dyn{
        font-size: var(--font-size-5);
    }
    .wid-res{
        width: 222px;
    }
    
}

/* ------------ Medium devices (landscape tablets, 768px and up) ------------ *Thank you for your business! We look forward to working with you again. */

@media only screen and (max-width: 700px) {}

@media only screen and (min-width: 700px) {
    .font-s-dyn{
        font-size: var(--font-size-4);
    }
}


@media only screen and (min-width: 768px) {}

@media only screen and (min-width: 769px) {
    /* .wid-res{
        width: 240px;
    } */
    .wid-res{
        width: 389px;
    }
}

@media only screen and (max-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {}

@media only screen and (min-width: 992px) {
    /* .col-0{
        visibility: visible;
        display: block;
        opacity: 1;
        width: unset;
        position: unset;
    } */
    /* .caros{
        height: 80vh;
    } */
    .font-res-2{
        font-size: var(--font-size-3);
    }
    .font-s-poly {
        font-size: var(--font-size-5);
    }
    .font-s-dyn{
        font-size: var(--font-size-5);
    }
    .wid-res{
        width: 389px;
    }
    .wid-resx{
        width: 407px;
    }
    .big-n{
        font-size: var(--font-size-12);
    }
    .font-s-w {
        font-size: var(--font-size-6);
    }
}
@media only screen and (min-width: 1020px) {
   
}
@media only screen and (min-width: 1030px) {
    .col-0{
        visibility: visible;
        display: block;
        opacity: 1;
        width: unset;
        position: unset;
    }
    .shift{
        margin-top: -3rem;
        /* position: relative;
        z-index: 2; */
    }
    
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1200px) {

}

@media only screen and (min-width: 1200px) {
    .caros{
        height: 80vh;
    }
}

@media only screen and (min-width: 1300px) {}

@media only screen and (min-width: 1500px) {}