@font-face {
            font-family: 'miranreg';
            src: url(miranreg.woff2);
        }

        @font-face {
            font-family: 'miranbold';
            src: url(miranbold.woff2);
        }

        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            position: relative;
            font-family: 'miranreg';
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
            -moz-tap-highlight-color: transparent;
            -ms-tap-highlight-color: transparent;
            -o-tap-highlight-color: transparent;
        }

        html, body {
            padding: 0;
            margin: 0;
            overflow-x: hidden;
            background-color: #d8c7b9;
        }

        ::-webkit-scrollbar {
            width: 5px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #ffffff;
            border-radius: 100px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            appearance: none;
            margin: 0;
        }

        .actr:active {
            transform: translate(0px, 0px) scale(0.98);
            transition-duration: 0.2s;
        }

        /* div.wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            overflow-y: auto;
        } */

        div.container_main {
            background-image: url(bg1.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: 100%;
            opacity: 0.6;
        }

        div.container {
            width: 100%;
            height: calc(100vh - 380px);
            background: rgb(255 255 255 / 43%);
            backdrop-filter: blur(16px);
            /* position: absolute; */
            /* left: 50%; */
            /* margin-top: 380px; */
            /* bottom: auto; */
            margin: 0 auto;
            margin-top: 380px;
            border-radius: 120px 120px 0px 0px;
            /* transform: translateX(-50%); */
            animation-name: fadecontainer;
            animation-timing-function: ease-in;
            animation-delay: 0s;
            animation-duration: 1000ms;
            animation-fill-mode: forwards;
            animation-play-state: running;
            padding-top: 10px;
            overflow-x: hidden;
            overflow-y: auto;
        }

        @keyframes fadecontainer {
            to {
                opacity: 1;
            }
        }

        p.topttl {
            font-size: 4vw;
            text-align: center;
            color: white;
            margin-bottom: 40px;
        }

        p.topttl span {
            /* background: white; */
            border-radius: 0;
            padding: 16px 16px 16px 16px;
            font-family: 'miranbold';
            color: #8399a2;
            animation-name: overr;
            animation-duration: 1000ms;
            animation-play-state: running;
            animation-delay: 0.1s;
            animation-timing-function: ease-in;
            animation-fill-mode: forwards;
            display: inline-block;
            transform: scale(1);
            opacity: 0.1;
        }

        @keyframes overr {
            forom {
                opacity: 0;
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .jps_main {
            display: flex;
            margin: 0 auto;
            text-align: center;
            justify-content: space-evenly;
            align-items: center;
            align-content: center;
            flex-wrap: nowrap;
            flex-direction: row-reverse;
            gap: 10px 0px;
            transition: all 1000ms;
        }

        .jps {
            width: 20%;
            height: 280px;
            background-color: #ffffff;
            border-radius: 29px;
            /*animation-duration: 500ms;
            animation-play-state: running;
            animation-delay: 0s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: both;
            animation-iteration-count: unset;
            transform: scale(1);
            transition: transform 2s ease-in-out;
            */
            cursor: pointer;
            transition: all .5s;
        }

        .jps:hover {
            transform: scale(1.2);
        }

        @keyframes onhoverscale {

            to {
                transform: scale(1.2);

            }
        }

        .jps:active {
            transform: scale(1);
        }

        .inner_jps {
            width: 100%;
            height: 100%;
            background-color: rgb(255 255 255 / 35%);
            border-radius: 29px;
            animation: fadejpsinner ease-in 1s forwards 0.5s;
            opacity: .6;
            transition: all .5s !important;
        }

        @keyframes fadejpsinner {
            to {
                opacity: 1;
            }
        }

        .inner_jps:hover {
            /* animation: fadejpsinnerh ease-in 0.2s forwards 0s; */
            /* transition: all .5s !important; */
            background-color: rgb(255 255 255 / 10%);
        }


        @keyframes fadejpsinnerh {
            to {
                background-color: rgb(255 255 255 / 35%);
            }
        }

        p.jpsttls {
            font-size: 2.3vw;
            top: 50%;
            font-family: 'miranbold';
            background-color: #ffffff8a;
        }





        .jp1 {
            background-image: url(goizha1.png);

        }

        .jp2 {
            background-image: url(miran1.png);
        }

        .jp3 {
            background-image: url(daniacity/1.jpg);
        }

        .jp4 {
            background-image: url(vegetablemarket/1.jpg);
        }



        video#vid {
            position: fixed;
            translate: none;
            top: 0;
            rotate: none;
            scale: none;
            transform: translate(0px, 0%);
            aspect-ratio: .8;
            object-fit: cover;
            opacity: .8;
            width: 100vw;
            object-position: bottom;
            height: 100vh;
            background: #eae0d7;
            overflow: hidden;
            /* background-image: linear-gradient(to right top,
                    #389c96, #319690, #29908a, #208a84, #16847e, #098384, #018289, #00818e, #00849e, #0086ae, #1b87bc, #4386c7); */
        }

        a.logoanchor {
            width: 138px;
            height: 100px;
            display: inline-block;
            position: fixed;
            top: 110px;
            left: 120PX;
            z-index: 1;
            transition: all 800ms;
        }

        a.logoanchor img {
            width: 100%;
            height: auto;
            animation: fadelogo ease-in 1000ms forwards 3s;
            opacity: 0;
        }

        @keyframes fadelogo {
            to {
                opacity: 1;
            }
        }

        .nav {
            z-index: 1;
            background: #ffffff57;
            width: 280px;
            height: 70px;
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            top: 110px;
            border-radius: 100px;
            backdrop-filter: blur(15px);
            text-align: center;
            animation-name: fadinnav;
            animation-timing-function: ease-in;
            animation-duration: 1200ms;
            animation-delay: 0s;
            animation-play-state: running;
            animation-fill-mode: forwards;
            opacity: 0;

        }

        @keyframes fadinnav {
            to {
                opacity: 1;
            }
        }

        .nav button {
            border: none;
            background: white;
            padding: 19px;
            border-radius: 100px;
            margin-top: 6.5px;
            cursor: pointer;
            animation-name: fadinnavbtns;
            animation-timing-function: ease-in;
            animation-duration: 1000ms;
            animation-delay: 0s;
            animation-play-state: running;
            animation-fill-mode: forwards;
            opacity: 0;
            transition: all 1000ms ease;
        }

        @keyframes fadinnavbtns {
            to {
                opacity: 1;
            }
        }

        .nav button:hover {
            scale: 0.9;
        }

        div.projexttxts_loaders {
            padding: 30px 30px;
            width: 90%;
            text-align: left;
            margin: 0 auto;
            margin-top: 30px;
        }

        div.projexttxts_loaders p {
            font-size: 22px;
            line-height: 44px;
        }

        div.container_clicked {
            height: calc(100vh - 100px);
            margin-top: 100px;
            backdrop-filter: blur(140px);
            border-radius: 25px 25px 0px 0px;
            /* background: rgb(0 141 54 / 24%); */
            transition: all 2s ease-in;
        }

        .jps_main_clicked {
            gap: 11px 0%;
            padding: 0px 10%;
        }

        .inner_jps_clicked {
            background-color: #ffffff1f;
        }

        .jp_clicked {
            height: 150px;
            width: 150px;
        }


        .htmlbg_clicked {
            background-image: url(goizha2.jpg);
            transition: all 1s;
        }



        .topttl span.topttlpan_click {
            color: white;
            transition: all 1000ms;
        }

        .jp1_click {
            width: 400px;
        }

        .jp1_click .inner_jps_clicked {
            box-shadow: 0px 0px 0px 3px white;
            z-index: 1;
            transition: box-shadow 500ms ease;

        }

        .nav_clicked {
            top: 15px;
            transition: top 500ms ease;
        }

        .trans_500 {
            transition: all 500ms ease;
        }

        .trans_1000 {
            transition: all 1000ms ease;
        }

        .trans_1500 {
            transition: all 1500ms ease;
        }

        .gallery_main {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            align-content: center;
            gap: 20px 20px;
            margin-top: 40px;
            flex-wrap: wrap;
        }

        .gallery_main img {
            width: 310px;
            border-radius: 30px;
            transition: all 500ms;
            cursor: pointer;
        }

        img.gimg:hover {
            box-shadow: 0px 0px 0px 4px white;
            filter: contrast(1.3);
        }

        .imgshow {
            display: block;
            transition: all 1000ms ease-in-out;
        }

        .expand_img {
            display: flex;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: lightblue;
        }

        .gellary_img_show {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 3;
            background: #ffffff80;
            backdrop-filter: blur(14px);
            overflow-y: auto;
        }

        .imge_inshow {
            height: 95%;
            width: 95%;
            padding: 5px;
            border-radius: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform-origin: center;
            background-attachment: fixed;
            background-size: contain;
            margin: 0 auto;
            display: block;
            transition: all 1000ms ease-in;
        }

        /* .gellary_img_show_hide {
            transform: scale(0);
            display: none;
            transition: all 1000ms ease-out;
        } */
        button.close_pr {
            display: none;
            position: absolute;
            top: 3%;
            right: 3%;
            width: 70px;
            height: 70px;
            background-color: transparent;
            border: none;
            border-radius: 80px;
            cursor: pointer;
            background-image: url(close_rounded_80_white.svg);
            background-size: 40px;
            opacity: .8;
        }

        div.sec2 {
            width: 100%;
            height: auto;
            background: white;
            padding: 40px;
        }

        p.bigttl {
            font-size: 45px;
            text-align: center;
            margin-bottom: 25px;
        }

        p.content_det {
            font-size: 22px;
            line-height: 44px;
        }

        .contact {
            display: flex;
            gap: 10px;
            flex-direction: row;
            align-content: center;
            align-items: center;
            justify-content: center;
        }

        a.cnts {
            padding: 10px;
            text-decoration: none;
            font-size: 25px;
            background: #dbeeff;
            width: 280px;
            flex: 1 1 100%;
            border-radius: 53px;
            text-align: left;
            padding-left: 20px;
            background-repeat: no-repeat;
            background-position: calc(100% - 15px) center;
            background-size: 36px;
        }

        a.tella {
            background-image: url(phone.png);
        }

        a.tellb {
            background-image: url(mail.png);
        }