@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

@font-face {
    font-family: iransans;
    src: url(../fonts/sans.ttf);
}

html, body{
    height: 100%;
}

body, div, p, h1, h2, h3, h4, h5, h6, a, button, input, input::placeholder, textarea, textarea::placeholder, select, optgroup, option, span, label, b, ul, li, ol, .techno_menu>ul>li>a, .techno_menu ul .sub-menu li a, .breatcumb-content-text ul li a, .breatcumb-content-text ul li span, .video-button a, .from-box button, .blog_page_title h4 a, .widget-sidebar-title h2, .popular-post-content a, .blog-page-title h2 a, .widget-sidebar-title2 h2, .from-box3 button, .widget-service-menu ul li a, .widget-title2 h3, .widget-button a, .widget-service-details-icon p span, .from-box1 button, .slider3 .slider-button a, .slider3 .slider-content p, .slider-socail-icon span, .service-button a, .style-two .barfiller .tip, .style-two .counter-text span, .counter-title h4, .style-two .counter-title h4, .blog-button a, .slider-button2 a, .style-four .service-button2 a, .style-three .elementor-about-title p, .nav-pills .nav-link.active, .nav-pills .show>.nav-link, .dreamit-department-bottom-content-inner ul li span, .portfolio_menu ul li, .style-three .counter-title h4, .style-two .accordion a, .style-two .accordion li p, .from-box2 button, .style-four .blog-button a, .about-button a, .style-three .service-button2 a, .single_portfolio_content h3 a, .style-two.upper .barfiller .tip, .choose-us-number span, .choose-us-number2 span, .style-two.upper6 .dreamit-department-bottom-content-inner ul li span, .style-three.upper7 .portfolio_menu ul li, .style-two .accordion a, .style-two.upper8 .accordion a, .style-two.upper8 .accordion li p {
    font-family: iransans, sans-serif;
}

body{
    font-family: 'Rubik', sans-serif;
    padding:48px;
    background-attachment: fixed;
    background: rgb(227,227,227);
    /* background-image: url('images/backdrop.jpg'); */
    background-position: center;
    direction: rtl;
    background-repeat: no-repeat;
    background-size: cover;
}
body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, #ff7c8a 0%, #000000 100%);
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}
h3,h4{
    margin:  25px 8px 25px 8px;
    color:#fff;
}
p{
    font-size:14px;
    color:#fff;
}

.pa{
    text-decoration: none;
    font-size:14px;
    color:#fff;
}

.pa:hover{
    text-decoration: none;
    font-size:15px;
    color:#d1d1d1;
}

.viewport{
    z-index: 999999;
    background: rgb(61 0 6 / 20%);
    backdrop-filter: blur(8.9px);
    -webkit-backdrop-filter: blur(8.9px);
    border: 1px solid rgba(255, 156, 166, 0.35);

    display:block;
    margin: auto;
    width:414px;
    max-width: 100%;
    padding: 16px 8px 16px 8px;
    text-align:center;
    box-shadow: 0px 24px 24px rgba(0,0,0,0.4);
    border-image: linear-gradient(#ffffff, #FF9CA6) 30;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo{
    display:block;
    margin: auto;
    width:414px;
    padding: 16px 8px 16px 8px;
    text-align:center;
}

.tiles div{
    display:inline-block;
    margin:8px;
    width: 175px;
    height:140px;
    background-color: rgba(225,225,225,0.2);
    box-shadow: 0px 16px 24px rgba(0,0,0,0.3);
    border: 1px solid rgba(225,225,225,0.1);
    border-radius:16px;
    backdrop-filter: blur(10px);
}

.input-holder{
    text-align: center;
    margin-bottom: 10px;
}

.input{
    text-align: right;
    padding: 4px 10px;
    padding-right: 50px;
    border-radius: 5px;
    width: 80%;
    font-size: 14px;
    height: 2.5rem;
    border: none;
    border-bottom: 2.5px solid rgba(255, 255, 255, 0.2);
    border-top: 2.5px solid rgba(0, 0, 0, 0.4);
    background-color: rgba(255, 255, 255, 0.05);
    color: #f1e9f2;
    box-shadow:
        inset 0 30px 60px -12px rgba(255, 255, 255, 0.1),
        inset 0 18px 36px -18px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color-scheme: dark;
}

.input::placeholder {
    color: rgba(241, 233, 242, 0.6);
    opacity: 1;
}

.input:-ms-input-placeholder {
    color: rgba(241, 233, 242, 0.6);
}

.input::-ms-input-placeholder {
    color: rgba(241, 233, 242, 0.6);
}

.input::-webkit-input-placeholder {
    color: rgba(241, 233, 242, 0.6);
}

textarea:focus, input:focus{
    outline: none;
}

.input-button{
    padding: 4px 10px;
    border-radius: 5px;
    width: 80%;
    color: rgb(32 32 32);
    background: #FF9CA6;
    border: none;
    font-size: 14px;
    height: 2.5rem;
    -webkit-box-shadow: 5px 5px 18px 5px rgba(0, 0, 0, 0.61);
    box-shadow: 5px 5px 18px 5px rgba(0, 0, 0, 0.61);
    margin-bottom: 1rem;
}

.secondary {
    background: #e6b3b7;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.fontAwesome {
    font-family: Helvetica, 'FontAwesome', sans-serif;
}

.input-holder i {
    position: absolute;
}

.icon {
    padding: 10px;
    color: #fff;
    min-width: 50px;
    text-align: center;
}

.general{
    height: 100%;
    position: relative;
}