/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px; 
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}
body {
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    margin: 0; 
}


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
select {
    text-align: center; /* متن گزینه‌ها وسط چین */
    text-align-last: center; /* متن انتخاب‌شده وسط چین */
    width: 50%;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    font-size: 14px;
    font-family: "IRANSans", Tahoma, sans-serif;
    color: #333;
    transition: all 0.3s ease;
    appearance: none; /* حذف استایل پیش‌فرض مرورگر */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23666' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

    select:focus {
        border-color: #4CAF50;
        box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
        outline: none;
        background-color: #fff;
    }

option {
    padding: 8px;
}
input,
textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    font-size: 14px;
    font-family: "IRANSans", Tahoma, sans-serif;
    color: #333;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin:5px;
}

    input:focus,
    textarea:focus {
        border-color: #4CAF50;
        box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
        outline: none;
        background-color: #fff;
    }

.btn-arrow-r:hover {
    background-image: -o-linear-gradient(to left,rgba(0, 0, 0, 0.2),rgba(255, 255, 255, 0));
    background-image: -webkit-linear-gradient(to left,rgba(0, 0, 0, 0.2),rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(to left,rgba(0, 0, 0, 0.2),rgba(255, 255, 255, 0));
    background-image: linear-gradient(to left,rgba(0, 0, 0, 0.2),rgba(255, 255, 255, 0));
}

.btn-arrow-l:hover {
    background-image: -o-linear-gradient(to right,rgba(0, 0, 0, 0.2),rgba(255, 255, 255, 0));
    background-image: -webkit-linear-gradient(to right,rgba(0, 0, 0, 0.2),rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(to right,rgba(0, 0, 0, 0.2),rgba(255, 255, 255, 0));
    background-image: linear-gradient(to right,rgba(0, 0, 0, 0.2),rgba(255, 255, 255, 0));
}
.btn-view.color-1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
    max-width: 400px;
    transform: scale(1);
    animation: beat 1s infinite;
}

.btn-view.color-2 {
    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
    max-width: 400px;
    transform: scale(1);
    animation: beat 1s infinite;
}

.btn-view.color-3 {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
    max-width: 500px;
    transform: scale(1);
    animation: beat 1s infinite;
}

.btn-view.color-4 {
    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);
    max-width: 400px;
    transform: scale(1);
    animation: beat 1s infinite;
}

.btn-view.color-5 {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
    max-width: 500px;
    transform: scale(1);
    animation: beat 1s infinite;
}

.btn-view.color-6 {
    /*background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);*/
    background-image: linear-gradient(to right,#009245, #FCEE21, #D9E021, #009245);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    max-width: 400px;
    transform: scale(1);
    animation: beat 1s infinite;
}

.btn-view.color-7 {
    background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
    box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
    max-width: 400px;
    transform: scale(1);
    animation: beat 1s infinite;
}

.btn-view.color-8 {
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
    max-width: 400px;
    transform: scale(1);
    animation: beat 1s infinite;
}

.btn-view.color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
    max-width: 400px;
    transform: scale(1);
    animation: beat 1s infinite;
}

.btn-view.color-10 {
    background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a, #FBB03B);
    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
    max-width: 400px;
    transform: scale(1);
    animation: bea 1s infinite;
}

.btn-view.color-11 {
    background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
    box-shadow: 0 5px 15px rgba(242, 97, 103, .4);
    max-width: 400px;
    transform: scale(1);
    animation: beat 1s infinite;
}

.btn-view {
    font-size: 10fr;
    color: #fff;
    cursor: pointer;
    text-align: center;
    border: none;
    background-size: 300% 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 50px;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

    .btn-view:hover {
        background-position: 100% 0;
        -moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

    .btn-view:focus {
        outline: none;
    }
/* Heart beat animation */
@keyframes beat {
    /* to { transform: scale(1.1); }*/
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(0, 140, 255);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}