@font-face {
    font-family: Sans;
    src: url("../fonts/IRANSans.ttf");
}
@font-face {
    font-family: SansBold;
    src: url("../fonts/IRANSans_Bold.ttf");
}
@font-face {
    font-family: SansLight;
    src: url("../fonts/IRANSans_Light.ttf");
}
@font-face {
    font-family: SansMed;
    src: url("../fonts/IRANSans_Medium.ttf");
}

.bold{
    font-family: SansBold;
}

.light{
    font-family: SansLight;
}

.medium{
    font-family: SansMed;
}

.normal{
    font-family: Sans;
}

.mainColor{
    color: rgb(0, 24, 55);
}

.secondColor{
    color: rgb(251, 163, 17);
}
.threeColor{
    color: rgb(30, 115, 190);

}

.mainBgColor{
    background-color: rgb(0, 24, 55) !important;
}

.mainBgColor100{
    background-color: #09042d0a !important;
}
.secondBgColor100{
    background-color: #fba11117 !important;
}

.secondBgColor{
    background-color: rgb(251, 163, 17);
}
.threeBgColor{
    background-color: rgb(30, 115, 190) !important;

}

.headerFooterColor{
    background-color: rgb(236, 236, 236) !important;
}

body{
    background-color: rgb(245, 245, 245);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1 {
  font-size: clamp(1.5rem, 3vw, 2.25rem); /* حدود 24 تا 36px */
  font-family: SansBold;
}

h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* 20 تا 28px */
  font-family: SansBold;

}

h3 {
  font-size: clamp(1.125rem, 2vw, 1.5rem); /* 18 تا 24px */
  font-family: SansMed;

}

h4 {
  font-size: clamp(1rem, 1.8vw, 1.25rem); /* 16 تا 20px */
  font-family: SansMed;

}

h5 {
  font-size: clamp(0.95rem, 1.6vw, 1.125rem); /* 15 تا 18px */
  font-family: Sans;

}

h6 {
  font-size: clamp(0.875rem, 1.5vw, 1rem); /* 14 تا 16px */
  font-family: Sans;

}

/* --- متن عمومی --- */
p,
span {
  font-size: clamp(0.875rem, 1.5vw, 1rem); /* 14 تا 16px */
  line-height: 1.6;
  font-family: Sans;

}

/* --- لینک‌ها --- */
a {
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  text-decoration: none;
  font-family: Sans;

}

.footer-link{
    opacity: 0.9;
    text-decoration: none;
}

.footer-link:hover{
    opacity: 1;
}

.header-link{
    opacity: 0.9;
    text-decoration: none;
}

.header-link:hover{
    opacity: 1;
}

.divider{
    height: 0.1px;
    width: 100%;
    opacity: 0.2;

}

.divider2{
    height: 0.1px;
    width: 80%;
    opacity: 0.2;

}

.nav-link,.dropdown-menu{
    font-family: Sans !important;

}

.dropdown:hover .dropdown-menu{
    display: block;
}

.nav-link:hover{
    color: #fba311 !important;
}

.banner{
    height: clamp(200px, 70vh, 500px);
    border-radius: 10px 10px 10px 10px;
}
.why-banner{
    height: clamp(200px, 50vh, 550px);
    object-fit: cover;
}

.article-img{
    height: clamp(100px, 20vh, 200px);
    object-fit: cover;
}
.article-item{
    height: clamp(290px, 30vh, 390px);

}
.article-banner{
    height: clamp(200px, 50vh, 600px);
    object-fit: cover;
}

.article-title{
    position: absolute;
    right: 3%;
    bottom: 3%;
    background-color: rgba(255, 255, 255, 0.655);

}

header{
    position: sticky !important;
    top: 0;
    z-index: 999;
}

.service-item{
    width:115px;
    height:115px;
}

.service-image{
    width:70px;
    height:70px;
}

.service-image2{
    height: 60px;
    width: 60px;
}

.service-image3{
    height: 85px;
    width: 85px;
}
.row-service-item{
    width: 240px;
}

input:focus{
    outline: none;
}
.login-btn{
    border: 1px solid rgb(30, 115, 190);

}
.login-btn:hover{
    background-color: rgb(30, 115, 190);
    color: white;
}

.order-btn{
    background-color: rgb(0, 24, 55);

}

button.nav-link.active{
    color: rgb(251, 163, 17) !important;
}

.product-image{
    height: 70px;
    width: 70px;
    object-fit: cover;
}

.info-image{
    height: 40px;
}

.info-div{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
}

.article-cat{
    position: absolute;
    left: 4%;
    bottom: 4%;
    padding: 5px 10px;
    background-color: #fba111d6;
    color: white;
}

.service-nav{
    color: #fba311;
}

.footer-login-icon{
    vertical-align: text-bottom;
    line-height: 0px;
  }

@media screen and (max-width: 1024px) {
  .banner{
    height: clamp(150px, 60vh, 400px);
  }
  
}
@media screen and (max-width: 767px) {
  .banner{
    height: clamp(150px, 60vh, 220px);
  }
    .row-service-item{
        width: 190px;
    }
  
}
@media screen and (max-width: 420px) {
    .row-service-item{
        width: 100%;
    }
  
}

@media screen and (min-width: 321px) and (max-width: 424px) {
  .service-image{
    width:70px;
    height:70px;

  }
  .service-image3{
    width:110px;
    height:110px;

  }
  .service-item{
    width:140px;
    height:140px;
  }
  .footer-login-text{
    font-size: 12px;
    vertical-align: text-top;
  }
  
  
}
@media screen and (max-width: 320px){
    .footer-login-text{
        font-size: 10px;
        vertical-align: text-top;
    }
}
/* class LightThemeColor {
  static const bodyBackgroundColor = Color.fromRGBO(245, 245, 245, 1);
  static const appBarBackgroundColor = Color.fromARGB(255, 236, 236, 236);
  static const primaryColor = Color.fromARGB(255, 249, 251, 255);
  static const onPrimaryColor = Color.fromARGB(255, 13, 15, 15);
  static const secondaryColor = Color.fromARGB(255, 251, 163, 17);
  static const onSecondaryColor = Color.fromARGB(255, 30, 115, 190);
  static const secondaryFixedColor = Color.fromARGB(255, 65, 61, 59);
  static const dividerColor = Color.fromARGB(255, 105, 105, 105);
  static const titleColor = Color.fromARGB(255, 9, 52, 109);
  static const dataColor = Color.fromARGB(255, 0, 24, 55);

  static const errorColor = Color.fromARGB(255, 151, 9, 9);
  static const onErrorColor = Color.fromARGB(255, 151, 16, 16);
  static const surfaceColor = Color.fromARGB(255, 0, 24, 55);
  static const onSurfaceColor = Color.fromARGB(255, 61, 57, 57);
  static const outlineColor = Color.fromARGB(255, 0, 24, 55);

  static const shadowColor = Colors.black12;
  'document.location="{% url 'service:detail' category.id %}"'
} */