/*
  Theme Name: aruk - Multipurpose ecommerce HTML5 Template
  Author: wpsmasher
  Support: asalam.jes@gmail.com
  Description: Ecommerce html5 bootstrap4 well documented html5 template.
  Version: 1.0
*/

/* CSS Index
-----------------------------------
1. Theme default css
2. Preloader
3. Auto_popup Area
4 .Header Area
5. Slider Area
6. Popular Category Area
7. Category Area
8. Arrival Area
9. Today Deal Area
10. News Area
11. Subscribe Area
12. Instagram Area
13. Service Area
14. Brand Area
15. Footer Area
16. Page Title Area
17. Shop Grid Page
18. Shop Grid Left Sidebar
19. Shop List
20. Shop Details
21. About US Page
22. Contact Page
23. Wishlist Page
24. Shopping Cart
25. Checkout page
26. Blog Page
27. Blog Left Sidebar
28. News Details
29. Responsive

*/

/*===================== 1. Theme default css ====================*/

hr {
    border-bottom: 1px solid #cacaca;
    border-top: 0 none;
    margin: 0;
    padding: 0;
}

.section-title>h2 {
    color: #4a4a4a;
    font-size: 33px;
    line-height: 37px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.p-btn {
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    background-color: rgb(255, 82, 53);
    height: 60px;
    line-height: 60px;
    width: 180px;
    display: inline-block;
    text-align: center;
    color: #f7f7f7;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.p-btn span {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 101%;
}

.p-btn span::before,
.p-btn span::after {
    content: '';
    position: absolute;
    background-color: #f7f7f7;
    height: 100%;
    width: 0;
    top: 0;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    z-index: -1;
}

.p-btn span::after {
    right: 50%;
}

.p-btn:hover span::before {
    opacity: 1;
    visibility: visible;
    width: 50%;
    left: 0;
}

.p-btn:hover span::after {
    opacity: 1;
    visibility: visible;
    width: 50%;
    right: 0;
}



/* ===============16. Page Title Area=============== */
.page-title-area {
    background-color: rgb(245, 245, 245);
}

.page-titel-detalis .section-title h2 {
    color: #292929;
    margin-bottom: 0;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: 0;
    content: "";
    height: 12px;
    width: 2px;
    background: #7c7a7a;
    position: absolute;
    left: -7px;
    top: 7px;
}

.page-bc .breadcrumb {
    padding: 0;
    background-color: transparent;
}

.page-bc .breadcrumb-item+.breadcrumb-item {
    padding-left: 0;
    margin-left: 15px;
}

.page-bc .breadcrumb li a {
    font-size: 17px;
    line-height: 26px;
    font-weight: 300;
    color: #7c7a7a;
}

.page-bc .breadcrumb li:last-child a {

    color: #292929;
}


/* ===============22. Contact Page=============== */
.contact_us .contact-icon{
    font-size: 40px;
    color: rgb(41, 41, 41);
}
.contact_us .contact-info li{
    font-size: 16px;
    line-height: 26px;
    letter-spacing: .6px;
}
.map-area .map-container {
	overflow: hidden;
	position: relative;
	height: 415px;
}
.map-area .map-container iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}
.border{
    border: solid 1px #ccc;
}
.contact-form-area .contact-title h3{
    font-size: 25px;
    line-height: 72px;
    font-weight: 500;
    color: #292929;
    padding-top: 25px;
}
.contact-form-area .contact-title p {
	font-size: 15px;
	line-height: 25px;
	padding: 0 35px;
}
.contact-form-area .contact-input input,
.contact-form-area .contact-input textarea{
    width: 100%;
    border: none;
    border-bottom: 1px solid rgb(235, 235, 235);
    padding-bottom: 10px;
    padding-top: 10px;
    
}
.contact-form-area .contact-input input::placeholder,
.contact-form-area .contact-input textarea::placeholder{
    color: #9fa4af;
    font-family: 'Montserrat', sans-serif;
}
.contact-form-area .contact-input input::-webkit-input-placeholder,
.contact-form-area .contact-input textarea::-webkit-input-placeholder {
    color: #9fa4af;
    font-family: 'Montserrat', sans-serif;
}
.contact-form-area .contact-input input:-ms-input-placeholder,
.contact-form-area .contact-input textarea:-ms-input-placeholder{
    color: #9fa4af;
    font-family: 'Montserrat', sans-serif;
}

.contact-form-area .contact-input input:focus,
.contact-form-area .contact-input textarea:focus{
    border-color: rgb(255, 82, 53);
    outline: none; 
    border-bottom: 1px solid rgb(255, 82, 53); 
}
.contact-form-area .contact-input input:focus::placeholder,
.contact-form-area .contact-input textarea:focus::placeholder{
    color:  rgb(255, 82, 53);
}
.contact-form-area .contact-input textarea{
    height: 160px;
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 50px!important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}