@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: url('images/backdrop.png'), radial-gradient(circle, #781e53 0%, #370e26 100%);*/
    background-image: url('images/backdrop.png');
    /*background-blend-mode: overlay; !* یا multiply یا soft-light بسته به ظاهر دلخواه *!*/
    background-position: center;
    direction: rtl;
    background-repeat: no-repeat;
    background-size: cover;
}
body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, #3b0023 0%, #000000 100%);
    opacity: 0.6; /* میزان دیده‌شدن گرادیانت */
    z-index: 1;
    pointer-events: none; /* تا روی محتوا کلیک‌پذیر بمونه */
}
h3,h4{
    margin:  25px 8px 25px 8px;
    /* font-size:36px; */
    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: rgba(120, 30, 83, 0.2);
    backdrop-filter: blur(8.9px);
    -webkit-backdrop-filter: blur(8.9px);
    border: 1px solid rgba(120, 30, 83, 0.35);


    display:block;
    margin: auto;
    width:414px;
    max-width: 100%;
    padding: 16px 8px 16px 8px;
    text-align:center;
    /*background: rgb(183,204,197);*/
    /*background: linear-gradient(170deg, rgb(227 227 227) 49%, rgba(150,180,170,0) 50%);*/
    box-shadow: 0px 24px 24px rgba(0,0,0,0.4);
    /*border: 2px solid rgba(225,225,225,0.1);*/
    border-image: linear-gradient(#ffffff, #480041) 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 { /* اینترنت اکسپلورر 10-11 */
    color: rgba(241, 233, 242, 0.6);
}

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

.input::-webkit-input-placeholder { /* کروم و سافاری */
    color: rgba(241, 233, 242, 0.6);
}

/*input:-webkit-autofill,*/
/*input:-webkit-autofill:focus,*/
/*input:-webkit-autofill:hover,*/
/*input:-webkit-autofill:active {*/
/*    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;*/
/*    box-shadow: 0 0 0px 1000px transparent inset !important;*/
/*    -webkit-text-fill-color: #f1e9f2 !important;*/
/*    transition: background-color 9999s ease-in-out 0s;*/
/*    background-color: transparent !important;*/
/*}*/

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

.input-button{
    padding: 4px 10px;
    border-radius: 5px;
    width: 80%;
    color: rgb(209, 209, 209);
    background: #781e53;
    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: #5f4c5c;
}

button:disabled {
    opacity: 0.5; /* Makes the button appear partially transparent */
    cursor: not-allowed; /* Changes the cursor to indicate non-interactivity */
}

.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;
}