/*==================================================
    IOTUPS Website
    Version : 1.0.0
==================================================*/


/*==================================================
    RESET
==================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

    font-size:16px;

}

body{

    font-family:'Vazirmatn',sans-serif;

    direction:rtl;

    background:#ffffff;

    color:#1e293b;

    overflow-x:hidden;

    line-height:1.8;

    font-size:15px;

}

img{

    max-width:100%;

    display:block;

}

ul{

    list-style:none;

    padding:0;

    margin:0;

}

a{

    text-decoration:none;

    transition:.3s;

}

button{

    border:none;

    outline:none;

}

input,
textarea,
select{

    outline:none;

    box-shadow:none;

}

section{

    position:relative;

    padding:90px 0;

}

.container{

    position:relative;

    z-index:5;

}

/*==================================================
    ROOT COLORS
==================================================*/

:root{

    --primary:#0A3D91;

    --primary-dark:#072C69;

    --secondary:#00B894;

    --secondary-dark:#009A7B;

    --warning:#F4B400;

    --danger:#E63946;

    --success:#2ecc71;

    --dark:#111827;

    --gray:#6b7280;

    --light:#f8fafc;

    --white:#ffffff;

    --border:#e5e7eb;

    --shadow:

        0 12px 40px rgba(0,0,0,.08);

    --radius:12px;

}

/*==================================================
    TYPOGRAPHY
==================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-weight:700;

    color:var(--dark);

    margin-bottom:20px;

    line-height:1.4;

}

h1{

    font-size:56px;

}

h2{

    font-size:42px;

}

h3{

    font-size:32px;

}

h4{

    font-size:24px;

}

h5{

    font-size:20px;

}

h6{

    font-size:18px;

}

p{

    color:#64748b;

    margin-bottom:18px;

    font-size:16px;

}

/*==================================================
    LINKS
==================================================*/

a{

    color:var(--primary);

}

a:hover{

    color:var(--secondary);

}

/*==================================================
    UTILITIES
==================================================*/

.text-primary{

    color:var(--primary)!important;

}

.text-secondary{

    color:var(--secondary)!important;

}

.bg-primary{

    background:var(--primary)!important;

}

.bg-secondary{

    background:var(--secondary)!important;

}

.bg-light{

    background:var(--light)!important;

}

.shadow-custom{

    box-shadow:var(--shadow);

}

.radius{

    border-radius:var(--radius);

}

.rounded-20{

    border-radius:20px;

}

.rounded-30{

    border-radius:30px;

}

/*==================================================
    SPACING
==================================================*/

.mt-100{

    margin-top:100px;

}

.mb-100{

    margin-bottom:100px;

}

.pt-100{

    padding-top:100px;

}

.pb-100{

    padding-bottom:100px;

}

/*==================================================
    TRANSITIONS
==================================================*/

.transition{

    transition:.35s ease;

}

/*==================================================
    SELECTION
==================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/*==================================================
    SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}
/*==================================================
FOOTER
==================================================*/

.footer{

    background:#111827;

    color:#fff;

}

.footer-title{

    color:#fff;

    font-size:20px;

    margin-bottom:25px;

}

.footer-links{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    color:#CBD5E1;

    transition:.3s;

}

.footer-links a:hover{

    color:#00B894;

    padding-right:8px;

}

.footer-contact{

    list-style:none;

    padding:0;

}

.footer-contact li{

    margin-bottom:18px;

    color:#CBD5E1;

}

.footer-contact i{

    color:#00B894;

    width:28px;

}

.social-footer{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#1F2937;

    color:#fff;

    transition:.3s;

}

.social-footer:hover{

    background:#00B894;

    color:#fff;

}

.footer hr{

    border-color:rgba(255,255,255,.1);

}


/*==================================================
HERO
==================================================*/

.hero{

    position:relative;

    min-height:750px;

    display:flex;

    align-items:center;

    background:

    linear-gradient(

    135deg,

    #071E4F,

    #0A3D91,

    #1D4ED8

    );

    overflow:hidden;

    color:#fff;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(

    circle,

    rgba(255,255,255,.08),

    transparent

    );

}

.hero h1{

    color:#fff;

    font-size:65px;

    font-weight:800;

}

.hero h2{

    color:#fff;

    opacity:.9;

}

.hero p{

    color:#dbeafe;

    font-size:18px;

    margin-top:25px;

    margin-bottom:35px;

}

.hero-badge{

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

    background:#00B894;

    color:#fff;

    margin-bottom:25px;

}

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.hero-counter{

    display:flex;

    gap:45px;

}

.hero-counter h3{

    color:#00B894;

    font-size:36px;

    margin-bottom:5px;

}

.hero-counter span{

    color:#fff;

}

.hero-image{

    animation:float 4s ease infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

@media(max-width:992px){

.hero{

text-align:center;

padding:120px 0;

}

.hero h1{

font-size:42px;

}

.hero-counter{

justify-content:center;

margin-top:40px;

}

.hero-buttons{

justify-content:center;

}

}
/*=============================================
FEATURES
=============================================*/

.features{

    padding:100px 0;

}

.feature-box{

    background:#fff;

    padding:40px;

    border-radius:18px;

    text-align:center;

    transition:.35s;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    height:100%;

}

.feature-box:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.feature-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0A3D91;

    color:#fff;

    font-size:34px;

}

.feature-box:hover .feature-icon{

    background:#00B894;

}

.feature-box h4{

    margin-bottom:20px;

}

.feature-box p{

    margin:0;

}
/*=====================================
PRODUCTS
=====================================*/

.products{

    padding:100px 0;

}

.section-title h2{

    font-size:44px;

}

.product-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 15px 45px rgba(0,0,0,.06);

    position:relative;

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.product-card img{

    width:100%;

    padding:35px;

}

.product-body{

    padding:30px;

}

.product-body h3{

    font-size:28px;

}

.product-body ul{

    margin:25px 0;

}

.product-body li{

    margin-bottom:10px;

    color:#64748b;

}

.product-body li::before{

    content:"✔ ";

    color:#00B894;

}

.product-badge{

    position:absolute;

    top:20px;

    left:20px;

    background:#E63946;

    color:#fff;

    padding:6px 15px;

    border-radius:30px;

    font-size:12px;

    font-weight:bold;

}
/*=====================================
CLOUD PLATFORM
=====================================*/

.cloud-section{

    padding:110px 0;

    background:#F8FAFC;

}

.cloud-image{

    text-align:center;

}

.cloud-image img{

    border-radius:20px;

    box-shadow:0 25px 70px rgba(0,0,0,.12);

    transition:.4s;

}

.cloud-image img:hover{

    transform:translateY(-8px);

}

.cloud-feature{

    background:#ffffff;

    border-radius:14px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    transition:.3s;

    height:100%;

}

.cloud-feature:hover{

    background:#0A3D91;

    color:#fff;

    transform:translateY(-5px);

}

.cloud-feature i{

    font-size:24px;

    color:#00B894;

    min-width:30px;

}

.cloud-feature:hover i{

    color:#ffffff;

}

.cloud-feature span{

    font-weight:600;

    font-size:15px;

}
/*=====================================
WARRANTY
=====================================*/

.warranty-section{

    padding:110px 0;

    background:#ffffff;

}

.warranty-box{

    background:#fff;

    border-radius:20px;

    padding:40px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.warranty-box h3{

    margin-bottom:30px;

}

.warranty-feature{

    background:#F8FAFC;

    border-radius:14px;

    padding:18px;

    display:flex;

    gap:18px;

    align-items:center;

    transition:.3s;

    height:100%;

}

.warranty-feature:hover{

    background:#0A3D91;

    color:#fff;

}

.warranty-feature i{

    font-size:28px;

    color:#00B894;

    width:40px;

    text-align:center;

}

.warranty-feature:hover i{

    color:#fff;

}

.warranty-feature strong{

    display:block;

    font-size:16px;

}

.warranty-feature small{

    color:#6B7280;

}

.warranty-feature:hover small{

    color:#fff;

}

.warranty-box .form-control{

    border-radius:12px;

    padding:15px;

    border:1px solid #dbe4ee;

}

.warranty-box .form-control:focus{

    border-color:#0A3D91;

    box-shadow:0 0 0 .2rem rgba(10,61,145,.15);

}
/*=====================================
DOWNLOAD CENTER
=====================================*/

.downloads-section{

    padding:110px 0;

    background:#F8FAFC;

}

.download-card{

    background:#ffffff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.35s;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

    height:100%;

}

.download-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.download-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#0A3D91;

    color:#ffffff;

    font-size:38px;

    transition:.3s;

}

.download-card:hover .download-icon{

    background:#00B894;

}

.download-card h4{

    margin-bottom:15px;

}

.download-card p{

    min-height:60px;

    color:#64748B;

}
/*=====================================
NEWS
=====================================*/

.news-section{

    padding:110px 0;

    background:#ffffff;

}

.news-card{

    background:#ffffff;

    border-radius:20px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 15px 45px rgba(0,0,0,.06);

    height:100%;

}

.news-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.news-image{

    position:relative;

    overflow:hidden;

}

.news-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.4s;

}

.news-card:hover .news-image img{

    transform:scale(1.08);

}

.news-category{

    position:absolute;

    top:15px;

    right:15px;

    background:#00B894;

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

}

.news-body{

    padding:30px;

}

.news-date{

    color:#64748B;

    font-size:14px;

    margin-bottom:15px;

}

.news-date i{

    color:#0A3D91;

    margin-left:6px;

}

.news-body h3{

    font-size:24px;

    margin-bottom:15px;

    line-height:1.5;

}

.news-body p{

    color:#64748B;

    margin-bottom:25px;

}

.news-body a{

    color:#0A3D91;

    font-weight:600;

    text-decoration:none;

}

.news-body a:hover{

    color:#00B894;

}
/*=====================================
PARTNERS
=====================================*/


.partners-section{

    padding:100px 0;

    background:#F8FAFC;

}



.partner-box{

    height:130px;

    background:#fff;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:25px;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}



.partner-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}



.partner-box img{

    max-height:60px;

    max-width:160px;

    filter:grayscale(100%);

    opacity:.7;

    transition:.3s;

}



.partner-box:hover img{

    filter:grayscale(0);

    opacity:1;

}
/*=====================================
TESTIMONIALS
=====================================*/


.testimonials-section{

    padding:100px 0;

    background:#ffffff;

}



.testimonial-card{

    background:#F8FAFC;

    border-radius:22px;

    padding:35px;

    height:100%;

    position:relative;

    transition:.35s;

}



.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.1);

}



.quote-icon{

    position:absolute;

    top:25px;

    left:25px;

    font-size:40px;

    color:#0A3D91;

    opacity:.15;

}



.stars{

    color:#F4B400;

    margin-bottom:20px;

}



.testimonial-card p{

    font-size:16px;

    line-height:2;

    margin-bottom:30px;

}



.customer{

    display:flex;

    align-items:center;

    gap:15px;

}



.customer img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

}



.customer h5{

    margin:0;

    font-size:17px;

}



.customer span{

    color:#64748B;

    font-size:14px;

}
/*=====================================
STATISTICS
=====================================*/


.statistics-section{

    padding:90px 0;

    background:

    linear-gradient(
        135deg,
        #071E4F,
        #0A3D91
    );

}



.stat-box{

    text-align:center;

    color:#fff;

    padding:35px 20px;

    border-radius:20px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    transition:.35s;

}



.stat-box:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.15);

}



.stat-icon{

    width:80px;

    height:80px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#00B894;

    color:#fff;

    font-size:30px;

}



.stat-box h2{

    font-size:50px;

    font-weight:800;

    margin-bottom:10px;

    color:#fff;

}



.stat-box p{

    font-size:18px;

    color:#dbeafe;

}
/*=====================================
FAQ
=====================================*/


.faq-section{

    padding:110px 0;

    background:#F8FAFC;

}



.faq-image img{

    border-radius:25px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}



.accordion-item{

    border:none;

    margin-bottom:15px;

    border-radius:15px!important;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}



.accordion-button{

    padding:22px;

    font-size:17px;

    font-weight:700;

}



.accordion-button:not(.collapsed){

    background:#0A3D91;

    color:#fff;

}



.accordion-body{

    padding:25px;

    line-height:2;

    color:#64748B;

}



.accordion-button:focus{

    box-shadow:none;

}

/*=====================================
CONTACT
=====================================*/


.contact-section{

    padding:110px 0;

    background:#ffffff;

}



.contact-info-box,

.contact-form-box{

    background:#F8FAFC;

    border-radius:25px;

    padding:40px;

    height:100%;

}



.contact-info-box h3{

    margin-bottom:35px;

}



.contact-item{

    display:flex;

    gap:20px;

    align-items:flex-start;

    margin-bottom:30px;

}



.contact-item i{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#0A3D91;

    color:#fff;

    font-size:20px;

}



.contact-item strong{

    display:block;

    margin-bottom:5px;

}



.contact-item p{

    margin:0;

    color:#64748B;

}



.contact-form-box .form-control{

    padding:15px;

    border-radius:12px;

    border:1px solid #dbe4ee;

}



.contact-form-box textarea{

    resize:none;

}



.contact-form-box .form-control:focus{

    border-color:#0A3D91;

    box-shadow:0 0 0 .2rem rgba(10,61,145,.15);

}
/* ===============================
PRODUCT PAGE
================================ */


.product-hero{

padding:120px 0;

background:linear-gradient(135deg,#071E4F,#0A3D91);

color:#fff;

}


.product-hero h1{

font-size:48px;

font-weight:800;

}



.products-page{

padding:100px 0;

background:#F8FAFC;

}



.product-page-card{

background:#fff;

border-radius:25px;

overflow:hidden;

height:100%;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.3s;

}



.product-page-card:hover{

transform:translateY(-10px);

}



.product-page-card img{

width:100%;

height:250px;

object-fit:cover;

}



.product-content{

padding:30px;

}



.product-content h3{

margin-bottom:15px;

}



.product-content p{

color:#64748B;

line-height:2;

}
/* PRODUCT DETAIL */

.product-detail-hero{

padding:120px 0;

background:#F8FAFC;

}


.product-detail-hero h1{

font-size:55px;

font-weight:800;

color:#0A3D91;

}


.product-detail-hero p{

font-size:20px;

line-height:2;

color:#64748B;

}


.product-main-image{

max-height:450px;

border-radius:25px;

}



.product-features{

padding:100px 0;

}



.feature-box{

padding:35px;

background:#fff;

border-radius:20px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,.08);

height:100%;

}



.feature-box i{

font-size:40px;

color:#00B894;

margin-bottom:20px;

}



.spec-section{

padding:100px 0;

background:#F8FAFC;

}



.spec-section table{

background:#fff;

}



.spec-section th{

background:#0A3D91;

color:#fff;

width:30%;

}



.download-product{

padding:80px 0;

background:#0A3D91;

color:#fff;

}



.product-contact{

padding:80px 0;

}
/* ===========================
DARK MODE
=========================== */


body.dark-mode{

background:#0f172a;

color:#e2e8f0;

}



body.dark-mode header{

background:#111827;

}



body.dark-mode .navbar .nav-link{

color:#e2e8f0;

}



body.dark-mode .product-page-card,
body.dark-mode .feature-box{

background:#1e293b;

color:#e2e8f0;

}



body.dark-mode .product-content p,
body.dark-mode p{

color:#cbd5e1;

}



body.dark-mode .spec-section{

background:#111827;

}



body.dark-mode table{

color:#e2e8f0;

}



body.dark-mode .table{

--bs-table-bg:#1e293b;

}



body.dark-mode .dropdown-menu{

background:#1e293b;

}



body.dark-mode .dropdown-item{

color:#e2e8f0;

}



body.dark-mode .dropdown-item:hover{

background:#334155;

}



body.dark-mode .btn-light{

background:#334155;

color:#fff;

border-color:#475569;

}
/* Mega Menu */

.mega-dropdown{
    position: static;
}


.mega-menu{

    width: 100%;
    left:0;
    right:0;

    border:0;

    border-radius:0 0 15px 15px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}



.mega-title{

    font-size:16px;

    font-weight:700;

    margin-bottom:15px;

    color:#0A3D91;

}



.mega-item{

    display:block;

    padding:10px;

    color:#333;

    text-decoration:none;

    border-radius:8px;

}



.mega-item:hover{

    background:#f1f5ff;

    color:#0A3D91;

}



.mega-item i{

    width:25px;

}