:root{
    --gold: hsl(48,100%,50%);
    --gold-lighter: hsl(48,22%,30%);
    --gold-darker: hsl(45,100%,47%);
    --silver: hsl(210,6%,72%);
    --silver-lighter: hsl(0,0%,26%);
    --silver-darker: hsl(210,3%,61%);
    --bronze: hsl(28,38%,67%);
    --bronze-lighter: hsl(28,13%,27%);
    --bronze-darker: hsl(28,31%,52%);
    --gri-e-hapur: rgb(243, 243, 243);
    --gri-e-mesem: rgb(231, 228, 228);
    --gri: rgb(214, 213, 213);
    --buton-success:rgb(96, 185, 61);
    --buton-danger:rgb(240, 75, 46);
    --buton-alert:rgb(255, 187, 0);
    --buton:rgb(216, 216, 216);
}
body{overflow-x: hidden;}
.m-left-20{margin-left:20px}

.m-right-20{margin-right:20px}

.m-top-20{margin-top: 20px;}

.m-bottom-20{margin-bottom: 20px;}

.p-top{padding-top: 20px;}

.p-left{padding-left: 200px;}

.p-right{padding-right: 20px;}

.p-bottom{padding-bottom: 20px;}
.padding{padding: 20px;}
.margin{margin:10px}

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


#container{
    width: 100%;
    height: 112vw;
    background-color: #f1f3f4;
    left: 0;
    position: absolute;
    top: 0;
}

.flex{display: flex!important}

.block{display: block;}

.grid{display: grid;}

.inline{display: inline;}

.header{height:80px;position: absolute;left: 0;top:0;width: 100vw;}

 

.footer{width: 100%;height: 150px;position: absolute;color: var(--gri-e-hapur);}

.container-fluid{width: 80%;height:100%;margin-left:10%;color: var(--gri-e-hapur);}

.card-3{position:relative;
      width: calc(100% / 4);
      height: calc(100% / 5);
      border: 1px solid var(--gri);
      border-radius: 10px;
    }
.card-3 .card-img img {
    float: left;
    padding: 0px;
    height: 5vw;
    width: 5vw!important;
    background: #f1f3f4;
    top: 0px;
    position: absolute;
    left: 123px;
    border-right: 8px solid #726f6f;
}
.slider{height: 400px;
        background-color: var(--gri);
        width: 100%;
        display: inline;
    }
.fixed{position: fixed;}

.sticky{position: sticky;top:0;left:0}


.img1{position: relative;
    top: 53px;
    width: 34vw;filter: drop-shadow(2px 4px 6px black);transition: .5 ease-in-out;}

    .img2{position: relative;
        top: -40px;
        width: 25vw;filter: drop-shadow(2px 4px 6px black);transition: .5 ease-in-out;}
.img3{position: relative;
    top: -90px;
    width: 8vw;filter: drop-shadow(2px 4px 6px black);transition: .5 ease-in-out;}
.img4{position: relative;
    top: 32px;
    width: 20vw;filter: drop-shadow(2px 4px 6px black);transition: .5 ease-in-out;}
.img5{    position: relative;
    top: -43px;
    width: 12vw;filter: drop-shadow(2px 4px 6px black);transition: .5 ease-in-out;}
.img6{ position: relative;
    left: 1031px;
    width: 11vw;
    top: -273px;
    filter: drop-shadow(2px 4px 6px black);transition: .5 ease-in-out;
}
.img7{   position: relative;
    top: -60px;
    width: 20vw;
    left: -138px;
    filter: drop-shadow(2px 4px 6px black);transition: .5 ease-in-out;
}
    .img8{position: relative;
        top: -102px;
        width: 32vw;
        left: -141px;filter: drop-shadow(2px 4px 6px black);transition: .5 ease-in-out;}
        .img9{position: relative;
            top: -62px;
            left: 2vw;filter: drop-shadow(2px 4px 6px black);transition: .5 ease-in-out;}
            .img10{    position: relative;
                top: -392px;
                left: 63vw;
                width: 15vw;filter: drop-shadow(2px 4px 6px black);transition: .5 ease-in-out;}
                .img11{    position: relative;
                    top: -182px;
                    left: 9vw;filter: drop-shadow(2px 4px 6px black);transition: .5 ease-in-out;}
    
  img:hover{cursor: pointer;}  
    
    .pershkrim{    width: 97vw;
        height: 15vw;
        background: rgba(0,0,0, .1);
        z-index: 99;
        position: relative;
        top: -438px;}
    .pershkrim h1{color: white;
        font-size: 41px;
        text-align: center;
        padding: 20px;
        text-shadow: 2px 2px 4px black;}

.h1-card-titull{    
    font-size: var(--titull);
    line-height: normal;
    font-weight: 700;
    color: darkgray;
    padding: 20px;}

.p-card{font-size: 1.1vw;
    line-height: normal;
    font-weight: 100;
    color: darkgray;
    padding: 20px;
    top: 83px;
    position: absolute;}


    /* database.css */
    #container-database{height: 150vw;
        width: 100%;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;}

    #container-database .content {
        position: relative;
    width: 100%;
    height: 200vw;
    left: 0;
    padding: 0;
    left: -20px;
    top: 6vw;
    }


    #container-database .card {
        width: 100%;
        height: 20vw;
        background: transparent;
        display: flex;
        aspect-ratio: 16 / 9;
        position: relative;
        margin-top: 0px;
        margin-bottom: 50px;
        align-items: center;
        left: 52%;
        transform: translate(-50%, 20%);
    }