*{

    box-sizing: border-box;

    padding: 0;

    margin: 0;

    font-family: 'IBM Plex Sans Arabic', sans-serif;

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

    transition: all 0.3s ease;



}



:root{

    --main-color : #411503 ;

    --second-color:#f1f1f1;

    --color3: #666 ;

    --color4: #4a1f0e ;

    --color5: #ffc71e ;



}







/* all my class */

.clr{

    background-color: var(--color4);

    border: none ;

    font-weight: 500;

    font-size: 22px;

    padding: 8px 20px;

    border: 1.5px solid var(--color4);

}



.clr:hover{

    color: var(--main-color);

    background-color: transparent;

    border: 1.5px solid var(--color4) ;

}



.noStyleFocus:focus{

    background-color: var(--main-color);

    box-shadow: none !important;

    border: none;

    color: white;

    outline: none;

}







/* all link  */

a{

    text-decoration: none;

}







/* all h tag */

h1,h2,h3,h4,h5{

    font-weight: 700;

}





/* all inputs */

input:focus{

    border-color: var(--main-color) !important;

    box-shadow:0 0 0 0.25rem rgb(65 21 3 / 9%) !important;

}

select:focus{

    border-color: var(--main-color) !important;

    box-shadow:0 0 0 0.25rem rgb(65 21 3 / 9%) !important;

}

textarea:focus{

    border-color: var(--main-color) !important;

    box-shadow:0 0 0 0.25rem rgb(65 21 3 / 9%) !important;

}



/* headerr  */





.home-page .header{

height: 780px;

position: relative;

}



h1 , h2{

    font-weight: 700 ;

}





/* .header .transiton{

    position: absolute;

    background-image: url(../files/header/slider04.jpg);

    top: 0;

    z-index: 10000;

    width: 100%;

    height: 100%;

    display: none;

    transition: all 0.5s linear;

}   

@keyframes slid {

    0%{

        display: none;

    }

    50%{

        display: blck;

    }

    100%{

        display: none;

    }

    

} */











/* nav */

.navbar-toggle {

    border: 1px solid #fff;

        position: relative;

        float: right;

        padding: 9px 10px;

        margin-top: 8px;

        margin-right: 15px;

        margin-bottom: 8px;

        background-color: transparent;

        border: 1px solid transparent;

        border-radius: 4px;

        background-image: none;

}

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0,0,0,0);

    border: 0;

}

.navbar-toggle .icon-bar {

    background-color: #fff;

}



.navbar-toggle .icon-bar {

    display: block;

    width: 22px;

    height: 2px;

    border-radius: 1px;

}

.navbar-toggle .icon-bar+.icon-bar {

margin-top: 4px;

}





.slider{

/* background-image: url("../files/header/slider03.webp"); */

background-repeat: no-repeat;

background-size: cover;

height: 783px;

position: relative;

transition: all 3s !important;

animation: slider 0.8s ease;



}





.slider01 .slider{

background-image: url("../files/header/slider01.jpg");

position: relative;





}

.slider02 .slider{

background-image: url("../files/header/slider02.jpg");



}

.slider03 .slider{

background-image: url("../files/header/slider03.jpg");

}





@keyframes slider {

    

    0%{

    opacity: 0;



    }

    100%{

        opacity: 1;

    }

    }









.slider::after{

content: '';

background-color : black;

position: absolute;

top: 0 ;

left: 0;

width: 100%;

height: 100%;

opacity: 60%;

}

.slider .container{

    position: relative;

    z-index: 100;

}

.slider .caption{

    position: relative;

    padding: 243px 0px;

    /* display: flex; */

    flex-direction: column;

    text-align: center;

}







.slider .caption h1{

    font-size: 55px;

    font-weight: 700;

    text-transform: uppercase;

    color: white;

    line-height: 60px;  

    animation: slider-h 0.8s linear;

}



.slider .caption p{

    font-size: 16px;

    color: white;

    text-transform: uppercase;

    font-weight: 300;

    padding-bottom: 18px;

    animation: slider-p 0.8s linear;

}





.slider .caption .button-slider{

position: relative;

animation: slider-a 0.8s linear;

color: white;

}

.slider .caption a{

    font-size: 20px;

    background-color: transparent;

    border: 1px solid rgba(192, 192, 192, 0.705);

    color: white ;

    text-transform: uppercase;

    padding: 10px 18px;

    border-radius: 5px;

    position: relative;

    /* transition:all  0.3s  ease; */

    

}

.slider .caption a:hover{

    padding: 10px 30px;

    

}







@keyframes slider-h {

    

    0%{

    opacity: 0;

    -webkit-transform: translateX(-2000px);

    -ms-transform: translateX(-2000px);

    transform: translateX(-2000px);

    }

    100%{

        opacity: 1;

        -webkit-transform: translateX(0);

    }

    }



    @keyframes slider-p {

        

    0%{

    opacity: 0;

    -webkit-transform: translateX(2000px);

    -ms-transform: translateX(2000px);

    transform: translateX(2000px);

    }

    100%{

        opacity: 1;

        -webkit-transform: translateX(0);

        transform: translateX(0);

    }

    }

    @keyframes slider-a {

        

    0%{

    opacity: 0;

    -webkit-transform: translateY(2000px);

    -ms-transform: translateY(2000px);

    transform: translateY(2000px);

    }

    100%{

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0);

    }

    }















.header button{

background: none;

outline: none;

border: none;

}

.header .right{

font-size: 30px;

position: absolute;

top: 50%;

right: 30px;

color: white;

z-index: 1000;



}



.header .left {

font-size: 30px;

position: absolute;

top: 50%;

left: 30px;

color: white;

z-index: 1000;

}





/* navbar */



.nav {

    background-color: var(--main-color);

    width: 100%;

    top: 0;

    z-index: 5000 !important;

    /* padding: 8px !important; */

}   

.nav .navbar{

    padding: 8px 0 !important;

}   



.nav .container .navbar .navbar-nav .nav-item .nav-link, .navbar-brand{

    color: white;

    font-size: 20px;

}   

.nav .container .navbar .navbar-nav .nav-item .nav-link:hover{

    color: var(--color5);

    font-size: 20px;

}   

.nav .container .navbar .navbar-brand{

position: relative;

width: 20%;

margin-right: 0;

}   

.nav .container .navbar .navbar-brand img{

width: 70%;

}   









.nav .navbar .nav-item .sub-menu {

    display: none;

    padding: 0;

    position: absolute;

    background-color: #fff;

    min-width: 225px;

    box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);

    z-index: 1;

}

.nav .navbar .nav-services:hover .sub-menu , .nav .navbar  .nav-locations:hover .sub-menu ,  .nav .navbar  .nav-products:hover .sub-menu  {

    display: block  ;

    }

    

/* sub menu  */

.nav .navbar .nav-locations .menu-item {

  position: relative;

}

.nav .navbar .nav-locations .menu-item .sub-menu{

    left: 100%;

    display: none;

    top: 0;

}



.nav .navbar .nav-locations .menu-item:hover .sub-menu{

    display: block;

}



    

.nav .navbar .nav-item .sub-menu li{

    list-style: none;

}

.nav .navbar .nav-item .sub-menu li a{

    color: #000;

    padding: 7px 15px;

    text-decoration: none;

    display: block;

    text-transform: capitalize;

    font-size: 14px;

    font-weight: 400;

}

.nav .navbar .nav-item .sub-menu li a:hover{

    background: #ddd!important;

}















/* contact header */



.contact-header{

    background-color: var(--second-color);

    padding-top: 50px ;

    padding-bottom: 50px ;

}







.contact-header .container form input,  .contact-header .container form select{

    height: 50px;

}



.contact-header .container form .sendBtn  {

   padding-left: 30px;

   padding-right: 30px;

   height: 50px;

   background-color: var(--main-color);

   border: none;

   outline: none;

}

.contact-header .container form .sendBtn:focus  {

 

   border: none;

   outline: none;

   box-shadow: none;

}





/* services  */



.services{



    padding-top: 50px ;

    padding-bottom: 50px ;



}



.services .container p {

    color: var(--color3);



}

.services .container a ,  .services .container b{

    color: black;

}





@media (min-width: 750px ){





.service-icon:hover{

    transform: translateY(-10px);

}

}











/* about-us */



.about-us{

    background-image: url('../files/header/slider05.jpg');

    background-size: cover ;

    position: relative;

    background-attachment: fixed;

}



.about-us::after{

    content: '';

background-color : black;

position: absolute;

top: 0 ;

left: 0;

width: 100%;

height: 100%;

opacity: 40%;

}

.about-us .container{

    padding: 60px 0;

    position: relative;

    z-index: 10;

}



.about-us .container h2 {

    color: white; 

}

.about-us .container p {

    color: white; 



}



.about-us .container .row .aboutUS-img {

    position: absolute;

    bottom: 0;

    right:  0%;

}



.about-us .container .row .aboutUS-img img{

    width: 100%;

    height: 473px;

}





/* products */



.products{

    position: relative;

    padding: 60px 0;

    text-align: center;

}



.products .container .caption{

    text-align: center ;

}



/* popup */



.products #product-popup {

    top: 25%;

    position: fixed;

    left:50%;

    background-color: white;

    transform: translateX(-50%);

    z-index: 10000;

    padding: 25px;

    width: 70%;

    max-height: 80%;

    display: none;

}



.products #product-popup .caption{

    display: flex;

}

.products #product-popup .images{

max-width: 100%;



}

.products #product-popup .images .categoryImg{

    display: flex;



}

.products #product-popup .images a img{

max-width: 100%;

}





.products #product-popup .caption .content{

    text-align: start;

    padding-left: 25px;

}

.products #product-popup .caption .content .details {

    padding-top: 15px;



}

.products #product-popup .caption .content .details a{

    background-color: var(--main-color);

    color: white;

    padding: 10px 20px;

    border-radius: 0 24px ;

}



.products #product-popup .caption .content .details a{

    background-color: var(--main-color);

    color: white;

    padding: 10px 20px;

    border-radius: 0 24px ;

}













.products .container .row {

gap : 35px;

text-align: center;

justify-content: center;



}  



.products .container .card {

    padding: 10px 10px 50px;

position: relative;

background-color: var(--color4);

text-align: center;

width: 18%;

}





@media (min-width: 750px ){





    .products .container .card:hover   {

        transform: translateY(-5px);

        box-shadow: 1px 1px 9px 1px #00000091;

        }

    }

    









.products .container .card .img{

position: relative;

border-radius: 25px;

width: 100%;

}



.products .container .card .img img{

border-radius: 4px;

}



.products .container .card .img a{

    position: absolute;

    bottom: 0%;

    left: 50%;

    transform: translatex(-50%)translateY(50%);

    background-color: white;

    padding: 5px 10px;

    border-radius: 90px;

    color: var(--main-color);

    font-weight: 600;

    font-size: 10px;

}

.products .container .card .img a i{

    padding-right: 4px;

}

.products .container .card .card-body{

    padding-bottom: 0px;



}

.products .container .card .card-body h5 {

    padding-top: 10px;

    padding-bottom: 10px;



}

.products .container .card .card-body h5 a{

    font-size: 30px;

    font-weight: 600;

    color: white ;

   

}

.blog .container .card .card-body .btn{

    color: white;

    background-color: var(--color4);

   

}



.products .container .card .card-body >a{

    position: absolute;

    left: 50%;

    bottom: 15px;

    width: 70%;

    transform: translateX(-50%);

    background-color: white ;

}





















/* review */





.review{

    background-image: url("../files/header/slider06.jpg");

    padding: 60px 0;

    background-size: cover;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

}





.review .container {

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}

.review .container .slider-two{

    width: 70%;

    text-align: center;

    overflow: hidden;

    position: relative;

}





.review .container .slider-two h3{

    color:white  ;

    font-weight: 600;

}

.review .container .slider-two .caption{

/* display  :flex; */

flex-direction: column;

text-align: center;

color: white;

width: 100%;

display: none;

 animation: op   2.3s  ease; 



}

.right-view {

    animation: rightf  1.5s linear;



}

.left-view {

    animation: leftf  1.5s linear;



}





@keyframes rightf {

    0%{

        transform: translateX(100%);

    }

    100%{

        transform: translateX(0%);

    }

}

@keyframes leftf {

    0%{

        transform: translateX(0%);

    }

    100%{

        transform: translateX(-100%);

    }

}



@keyframes op {

    0%{

       opacity: 0;

    }

    100%{

        opacity: 1;

    }

}



.review .container .slider-two .active {

display: flex;

/* animation: left  0.5s linear !important; */

 /* animation: leftf  1.5s linear;  */



}

.review .container .slider-two .caption i {

    font-size: 25px;

background-color: var(--color4);

padding: 12px;

border-radius: 50px;

}



.review .container .slider-two .reviewRow {

/* display: flex; */

flex-wrap: nowrap;



}





















.review .container  .arrow button{

    background: none;

    color: white;

    outline: none;

    box-shadow: none;

    border: none;

}

.review .container  .arrow .review-right{

    position: absolute;

    top: 50%;

    right: 2%;

    font-size: 30px;

}

.review .container  .arrow .review-left {

    position: absolute;

    top: 50%;

    left: 2%;

    font-size: 30px;

}









/* youtube */

.youtube{

    padding: 60px 0 ;

}



.youtube .container .row .laptopB {

    position: relative;

    background-image: url("../files/images/laptop.png");

    background-size: 100%;

    background-repeat: no-repeat;

    height: 277px;



 

}

/* .youtube .container .row .laptop img{

    width: 100%;

} */

.youtube .container .row .iframe{

    top: 4px;

    position: absolute;

    left: 11%;

    z-index: -1;

    height: 200px;

    width: 78%;

    overflow: hidden;

    z-index: 900  !important;

}



/* blog */

.blog{

    text-align: center;

    padding-bottom:50px;

}





.blog .container .row  {

    gap: 15px;

}

.blog .container .row .card {

    position: relative;;

    text-align: start;

    padding: 10px;

    width: 32%;

    padding: 0;

}



.blog .container .row .card h5 {

    color: var(--main-color);

    font-size: 30px;

}

.blog .container .row .card .date {

    font-size: 13px;

}







/* contact us*/



.contact-us {

    padding: 60px 0;

    text-align: center;

    background-image: url("../files/header/slider07.jpg");

    position: relative;

    /* background-attachment: fixed; */

}



.contact-us::before {

    content: '';

background-color : black;

position: absolute;

top: 0 ;

left: 0;

width: 100%;

height: 100%;

opacity:50%;



}

.contact-us .container {

    position: relative;

    z-index: 1000;

}





.contact-us .container .row{

    justify-content: center;

    align-items: center;

    color: white;

}

.contact-us .container .row input , .contact-us .container .row select , .contact-us .container .row textarea {

    background-color: transparent;

    color: white;

}





.contact-us input:focus{

    border-color: white !important ;

    box-shadow:0 0 8px 0rem rgba(255, 255, 255, 0.438) !important;

    color: white;

}



.contact-us input::placeholder{

    color: white !important;

}   

.contact-us textarea::placeholder{

    color: white !important;

}   



.contact-us select:focus{

    border-color: white !important ;

 

    box-shadow:0 0 8px 0rem rgba(255, 255, 255, 0.438) !important

}



.contact-us textarea:focus{

    color: white;



    border-color: white !important ;

    box-shadow:0 0 8px 0rem rgba(255, 255, 255, 0.438) !important

}

/* ::placeholder{

    color: white !important;

} */





.contact-us .container .row form .send-form {

    width: 100%;

    background-color: var(--main-color);

    border: none;

}

.contact-us .container .row form .send-form:focus{

    background-color: var(--main-color);

    border: none;

    box-shadow: none;

}



.contact-us .container .row .contact-info{

    text-align: start;

    padding-left: 50px;

}



/* location */

.location{

    padding: 0;

    margin-bottom: 0;

}



/* footer */

footer .footer-top{

background-color: var(--color4);

padding: 20px 0 10px !important;

}



footer {

    background-color: var(--main-color);

    color: white

}



footer .footer-bottom {

    padding: 30px 0

}

footer .social-icons {

    text-align: center;

}

footer .social-icons .contact-footer {

    display: flex;

    justify-content: center;

    padding:  15px 0 

}





footer .social-icons .contact-footer li {

    list-style: none;

    padding: 0 20px   ;

}



footer .social-icons .contact-footer li  a{

    color : white ; 

    font-size: 30px;

    

}











.carousel-inner{

    display: none;

}

.header .active{

    display: block !important;

    position: relative;

    transition: all 3s  !important;

}



.navbar-fixed-top{

    position: fixed;

    top: 0;

}







/* translate */



.translate{

    position: relative;

}



#gt_float_wrapper{

    position: absolute !important;

     bottom: 0 !important;

    left: 0 !important;

    z-index: 999999;   

    width: 140px;

    top: -22px;

    left: -116px!important;

}





.side-contact {

    position: relative;

    z-index: 5000;

}

.side-contact .phone{

    background-image: url(../files/images/number.png);

    background-repeat: no-repeat;

    background-size: 291px auto;

    padding: 5px 20px 10px 60px;

    font-size: 20px;

    margin: 0 !important;

    font-weight: 600;

    position: fixed;

    top: 28%;

    right: -245px;

    width: 284px;

    transition:all 0.9s ;



}

.side-contact .email{

    background-image: url(../files/images/email.png);

    background-repeat: no-repeat;

    background-size: 291px auto;

    padding: 5px 20px 10px 60px;

    font-size: 20px;

    margin: 0 !important;

    font-weight: 600;

    position: fixed;

    top: 34.5%;

    right: -245px;

    width: 284px;

    transition:all 0.9s

}



.side-contact .phone:hover{

    right: 0    ;



}

.side-contact .email:hover{

    right: 0    ;

}

.left-contact .whatsapp img{

    width: 45px;

    position: fixed;

    left: 20px;

    bottom: 22px;

    z-index: 50000;

    animation: icon  3s infinite ease;

}

.left-contact .skype img{

    width: 45px;

    position: fixed;

    left: 20px;

    bottom: 73px;

    z-index: 50000;

    /* animation: icon  2s 1s infinite linear; */

    display: none;





}





@keyframes icon {

0%{

    transform: scale(1);

}    

50%{

    transform: scale(1.18);

}

100%{

    transform: scale(1);

}

}





.side-contact img{

    width: 100%;

}





/* 

------------------------------------------------------------------------------------------------------------------------------------

about us

------------------------------------------------------------------------------------------------------------------------------------ 

*/



.contactAbout{

    padding-top: 180px !important; 

}

/* header about */



.navAboutUs {

position: fixed;}





.headerAbout {

    background-image: url(../files/header/slider05.jpg);

    background-size: cover;

    padding: 50px 0;

    position: relative;

}

.headerAbout::before{

    content: "";

    background-color: black;

    width: 100% ;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    opacity: 60%;

    

}

.headerAbout .container   {

    color: white;

    position: relative;

    z-index: 500 ;

}





/* content about */





.contentAbout{

    padding: 40px ;

}

.contentAbout img{

    max-width: 100% ;

    height: auto;

}





/* side bar */



/* search */

.contentAbout aside {

    background-color: var(--second-color);

}



.contentAbout aside  h2 {

    background-color: var(--main-color);

    color: white;

    padding: 10px;

    font-size: 22px;

    text-align: center;

    position: relative;

    margin-bottom: 25px;

}

.contentAbout aside  h2::before {

    content: "";

    display: block;

    width: 0;

    height: 0;

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-top: 7px solid var(--main-color);

    position: absolute;

    bottom: -7px;

   

}



.contentAbout aside section {

padding-top: 15px;

padding-bottom: 15px;

}

.contentAbout aside .search {

padding-top: 0;

}

.contentAbout aside .search form {

    text-align: center;

    padding: 0 15px;

}



.contentAbout aside .search form [type=text] {

    padding: 5px 8px;

    border: 1px solid #ccc;

    width: 70%;



}

.contentAbout aside .search form [type=text]:focus-visible ,.contentAbout aside .search form [type=button] {

    border: 1px solid var(--main-color);

    outline: none;

    box-shadow: none !important;



}

.contentAbout aside .search form [type=button] {

    background: var(--main-color);

    color: #FFF;

    font-weight: 400;

    text-align: center;

    width: 28%;

    padding: 5px 0;

    border: none;

    border: 1px solid var(--main-color);



}

.contentAbout aside .search form [type=button]:hover {

    border: 1px solid var(--main-color);

    outline: none;

    box-shadow: none !important;

    background-color: transparent;

    color: var(--main-color);

}





/* product category  */



.contentAbout aside .productCategory ul {

    padding: 0 15px;

}

.contentAbout aside .productCategory ul li{

    font-size: 14px;

    font-weight: 500;

    line-height: 24px;

    color: var(--main-color);

    list-style: none;

    padding: 5px 0;

    border-bottom: 1px solid var(--main-color);

    list-style: none;

    

}

.contentAbout aside .productCategory ul li a{

    

    color: var(--main-color);

}



/* top rate products */



.tobRateProducts {

    padding-bottom: 0 !important;

    margin-bottom: 0;

}

.contentAbout .tobRateProducts ul {

    padding: 0 15px;

}

.contentAbout .tobRateProducts ul li{

    font-size: 14px;

    font-weight: 500;

    line-height: 24px;

    color: var(--main-color);

    list-style: none;

    padding: 5px 0;

    /* border-bottom: 1px solid var(--main-color); */

    list-style: none;

}

.contentAbout .tobRateProducts ul li a{

     color: var(--main-color);

     font-weight: 800;

}











/* 



-----------------------------------------------------------------------------------------------------------------------------------------

wood products 

----------------------------------------------------------------------------------------------------------------------------------------- */









.content-wood-products{

    padding: 40px ;

   

}

.products-section{

    text-align: center;

    justify-content: center;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.content-wood-products .btn-toolbar button{

    background-color: transparent;

    border:1px solid var(--main-color) ;

    color: var(--main-color);

}

.content-wood-products .btn-toolbar button:hover{

    background-color: var(--color4);

    border:1px solid var(--color4) ;

    color: white;

}

.content-wood-products .btn-toolbar .active{

    background-color: var(--main-color);

    border:1px solid var(--main-color) ;

    color: white;

}

.content-wood-products .btn-toolbar button:focus{

    box-shadow: none;

}



/* .content-wood-products img{

    max-width: 100% ;

    height: auto;

} */



.content-wood-products .container .row .products-section .filter  {

    width: 100%;



}

.content-wood-products .container .row .products-section .filter .box {

    background-color: var(--main-color);

    padding: 15px;

    border-radius: 10px;

    

}

.content-wood-products .container .row .products-section .filter .box .row  {

    justify-content: space-between;

    align-items: center;

}



.content-wood-products .container .row .products-section .filter .box .row .results-settings p {

    font-size: 1.2rem;

    color: white;

    margin: 0;

}



.content-wood-products .container .row .products-section .filter .box .row .results-settings p span{

    padding: 0.375rem  0.75rem ;

    margin: 0 8px;

    font-size: 1rem;

    font-weight: 500;



    color: #212529;

    background-color: #fff;

    border: 1px solid #ced4da;

    border-radius: 0.25rem;



}

.content-wood-products .container .row .products-section .products , .product-details  .products {

    gap: 10px

}

.content-wood-products .container .row .products-section .products .card , .product-details  .products .card{

    padding: 0;

    width: 24%;

    text-align: center;

    position: relative;

    padding-bottom: 36px;

}

.content-wood-products .container .row .products-section .products .card a , .product-details  .products .card a{

    background-color: var(--main-color);

    border: var(--main-color);

    position: absolute;

    bottom: 15px;

    left: 50%;

    transform: translateX(-50%);

    width: 70%;





}







/* ---------------------------------------------------------------------------

blog page 

--------------------------------------------------------------------------- */



.blog-page .blog-section .container .blog-card {

    gap:10px;

    justify-content: center;

}

.blog-page .blog-section .container .blog-card .card{

    position: relative;

    text-align: start;

    padding: 10px;

    width: 47%;

    padding: 0;

}

.blog-page .blog-section .container .blog-card .card a h5{

    color: var(--main-color) ;

    font-size: 30px;



}

.blog-page .blog-section .container .blog-card .card a h5{

    color: var(--main-color) ;

    font-size: 30px;



}

.blog-page .blog-section .container .blog-card .card .description{

    color: var(--color3)



}

.blog-page .blog-section .container .blog-card .card .date{

    font-size: 13px;

    margin: 0 0 6px;

    color: var(--color3)

    

}

.blog-page .blog-section .container .blog-card .card .btn{

    background-color: var(--main-color);

    color: white ;

    

}

.blog-page .blog-section .container .blog-card .card .btn:focus{



    box-shadow: none;

}























/* ---------------------------------------------------------------------------

FAQs 

---------------------------------------------------------------------------- */



.faqs-section .container .row .accordion-button:not(.collapsed){

    background-color: var(--main-color);

    color: white;

}

.faqs-section .container .row .accordion-button:not(.collapsed)::after{

    background-image: url('../files/images/arrow.png');

    background-color: var(--main-color);

    color: white;



}

    .faqs-section .container .row .accordion-button:focus{

        box-shadow: none;

    }







    .form-group select:focus{

        color: black !important;

    }



















/* 

    -----------------------------------------------------------------------------------------------------

    locations 

    ----------------------------------------------------------------------------------------------------- */



header{

    background: url('../files/images/location-background.png') no-repeat center/cover;

    padding: 20px 0;

    min-height: 609px;

;

}

header .container{

    padding-left: 0;



}

.main-header{

    background: url('../files/images/wood-background.jpg') repeat-x left;

    background-size: cover;

    border-radius: 15px;

    position: relative;

    padding-left: 0px !important;

}

.logo{

    background: #FFF;

    padding: 8px;

    border-radius: 15px 0 0 15px;

    text-align: center;

}

.contact-bar {

    margin: 26px 0;

    padding: 0 0 0 10px;

    display: flex;

    gap: 25px;

    background-color: url('../files/header/slider05.jpg');

}





.contact-bar li {

    font-size: 16px;

    line-height: 33px;

    font-weight: 500;

    color: #ffe1d4;

    list-style: none;

    text-shadow: 2px 2px 1px #000;

}

.contact-bar li a{

    font-size: 16px;

    color: #fff;

}



.slider-contact-form{

    background: #e7e6e6;

    background: -moz-linear-gradient(top,#e7e6e6 0%,#e7e6e6 91%,#444444 100%);

    background: -webkit-linear-gradient(top,#e7e6e6 0%,#e7e6e6 91%,#444444 100%);

    background: linear-gradient(to bottom,#e7e6e6 0%,#e7e6e6 91%,#444444 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7e6e6',endColorstr='#444444',GradientType=0);

    margin: 50px 80px 0 100px;

    padding: 10px 20px;

    border-radius: 5px 5px 0 0;

    position: relative;

    z-index: 9;

}

.slider-contact-form h3{

    font-size: 18.8px;

    line-height: 25px;

    font-weight: 600;

    text-transform: uppercase;

    text-align: center;

}





element.style {

}

.slider-contact-form input {

    background: url(../files/images/wood-background.jpg) repeat-x left;

    background-size: cover;

    padding: 8px 20px;

    font-size: 16px;

    line-height: 26px;

    font-weight: 500;

    color: #ffe1d4;

    border: none;

    border-radius: 5px;

    margin-bottom: 10px;

    width: 100%;

}



.slider-contact-form textarea {

    background: url(../files/images/wood-background.jpg) repeat-x left;

    background-size: cover;

    padding: 8px 20px;

    font-size: 16px;

    line-height: 26px;

    font-weight: 500;

    color: #ffe1d4;

    border: none;

    border-radius: 5px;

    margin-bottom: 10px;

    width: 100%;

    height: 64px;

}



.slider-contact-form span{

    font-size: 25px;

    line-height: 25px;

    display: block;

    color: #703d25;

}

.slider-contact-form hr{

    width: 80%;

    height: 4px;

    background: #5a301a;

    margin: 15px auto;

    border-radius: 10px;

}

button, input, optgroup, select, textarea {

    margin: 0;

    font-family: inherit;

    font-size: inherit;

    line-height: inherit;

}

.wpcf7 .screen-reader-response{

    position: absolute;

    overflow: hidden;

    clip: rect(1px,1px,1px,1px);

    clip-path: inset(50%);

    height: 1px;

    width: 1px;

    margin: -1px;

    padding: 0;

    border: 0;

    word-wrap: normal!important;

}

.slider-content {

    margin-top: 100px;

}

.slider-content h1 {

    font-size: 68px;

    line-height: 80px;

    color: #000;

    text-transform: uppercase;

    margin-bottom: 20px;

}

.clip-text_six {

    background-image: url(../files/images/wood-background.jpg);

}

.clip-text {

    position: relative;

    display: inline-block;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.slider-content p {

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

    font-size: 18px;

    line-height: 26px;

    font-weight: 600;

    color: #000;

    text-shadow: 1px 1px 1px #fff;

}

































/* about-sec */

.about-sec {

    padding: 30px 0;

}



.heading-h2 {

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

    font-size: 26px;

    line-height: 70px;

    color: #000;

    font-weight: 600;

    text-transform: uppercase;

    margin-bottom: 30px;

    text-align: center;

    letter-spacing: 1px;

}

.heading-h2 span {

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

    font-size: 36px;

    line-height: 50px;

    color: #000;

    margin-bottom: 15px;

    display: block;

}

.heading-p {

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

    font-size: 16px;

    line-height: 22px;

    font-weight: 400;

    color: #000;

    text-align: center;

}

.heading-p {

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

    font-size: 16px;

    line-height: 22px;

    font-weight: 400;

    color: #000;

    text-align: center;

}



/* order section  */



.order-sec {

    background: url('../files/header/slider06.jpg');

    padding: 30px 0;

}

.order-sec h3 {

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

    font-size: 20px;

    line-height: 25px;

    color: #fff;

    font-weight: 500;

    text-transform: uppercase;

    text-align: center;

    letter-spacing: 4px;

}

.order-sec a {

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

    font-size: 25px;

    line-height: 25px;

    font-weight: 300;

    text-align: center;

    color: #fddfd2;

    margin: 20px auto 0;

    padding: 15px 0;

    border: 1px solid #696969;

    text-transform: uppercase;

    border-radius: 5px;

    display: block;

    width: 38%;

}





/* subpliment section  */

.sumpliment-sec {

    background: url(../files/images/wood-background-3.jpg) no-repeat center/cover;

    padding: 30px 0 100px 0;

    position: relative;

}

.wood-head {

    background: url(../files/images/wood-background.jpg) repeat left;

    background-size: cover;

    border-radius: 10px 10px 0 0;

    padding: 55px 30px 30px 30px;

    position: relative;

    margin-top: 30px;

}

.wood-head .col-sm-3 {

    position: relative;

    text-align: center;

}

/* .wood-head:before {

    content: url(../files/images/main-header-shadow.webp);

    margin: 0 auto;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    text-align: center;

} */

.wood-head img {

    margin-bottom: 10px;

}

.wood-head h3 {

    font-size: 15px;

    line-height: 24px;

    text-align: left;

    font-weight: 500;

    color: #fff;

    text-transform: uppercase;

    margin-bottom: 10px;

}

.wood-head p {

    font-size: 16px;

    line-height: 22px;

    text-align: left;

    font-weight: 300;

    color: #fff;

    margin-bottom: 10px;

    text-align: center;

}

.rgt-shadow:after {

    position: absolute;

    content: url(../files/images/wood-box-shadow.webp);

    display: block;

    top: -30px;

    right: -15px;

    opacity: .4;

}



.wood-box {

    position: relative;



}

.wood-box .wood-head .rgt-shadow h3{

    text-align: center;

    font-weight: 600;



}





.wood-box-bottom {

    background: url(../files/images/wood-background.jpg) repeat-x left;

    background-size: cover;

    border-radius: 0 0 10px 10px;

}

.black-bg {

    background: rgba(0,0,0,.4);

    padding: 25px 0;

}

.wood-box-bottom h3 {

    font-size: 18px;

    line-height: 20px;

    font-weight: 600;

    text-align: center;

    letter-spacing: 2px;

    color: #d3ae82;

    text-transform: uppercase;

}

.wood-box-bottom a {

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

    font-size: 24px;

    line-height: 25px;

    font-weight: 600;

    text-align: center;

    color: #371608;

    margin: 20px auto 0;

    padding: 12px 0;

    text-shadow: 1px 1px 1px #fff;

    box-shadow: inset 0 -1px 1px #fff;

    text-transform: uppercase;

    border-radius: 5px;

    display: block;

    background: url(../files/images/wood-background-2.jpg) no-repeat center;

    width: 18%;

}

/* .wood-box:after {

    content: url("../files/images/main-header-shadow.webp");

    max-width: 100%;

    display: block;

    width: 100%;

    text-align: center;

    position: absolute;

    left: -55px;

    bottom: -39px;

} */



.types-sec {

    background: url(../files/images/wood-background-2.jpg) no-repeat center/cover;

    padding: 50px 0;

}



.wood-type-box {

    background: #FFF;

    outline: 10px solid rgba(255,255,255,.3);

    padding: 30px;

    border-radius: 5px;

    -moz-outline-radius: 15px 15px 0 0;

    -moz-outline-radius: 15px;

    margin-top: 30px;

}





.wood-type-box img {

    margin-top: 40px;

}

.wood-type-box h3 {

    font-size: 18px;

    line-height: 22px;

    font-weight: 600;

    text-align: center;

    color: #5f3018;

    margin: 8px 0;

    text-transform: uppercase;

}

.wood-type-box p {

    font-size: 15px;

    line-height: 18px;

    font-weight: 400;

    text-align: center;

    color: #000;

}

@media (min-width: 576px){

.col-sm-4 {

    -ms-flex: 0 0 33.333333%;

    flex: 0 0 33.333333%;

    max-width: 33.333333%;

}

}

.morebtn a {

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

    font-size: 24px;

    line-height: 25px;

    font-weight: 600;

    text-align: center;

    color: #371608;

    margin: 20px auto 0;

    padding: 12px 0;

    text-shadow: 1px 1px 1px #fff;

    box-shadow: inset 0 -1px 1px #fff;

    text-transform: uppercase;

    border-radius: 5px;

    display: block;

    background: url(../../../themes/CameroonTimber/images-new/btn-bg.webp) no-repeat center;

    width: 18%;

}









.contact-bar-2 {

    background: url(../files/images/wood-background.jpg) repeat center;

    background-size: cover;

    padding: 35px 0;

}

.contact-bar-2 h2 {

    font-size: 30px;

    line-height: 40px;

    font-weight: 700;

    text-align: center;

    color: #fff;

    margin-bottom: 10px;

}

.contact-bar-2 p {

    font-size: 17px;

    line-height: 24px;

    font-weight: 400;

    text-align: center;

    color: #fff;

    margin: 0;

}







/* footer  */

.footer-first {

    background: url(../files/images/wood-background-4.jpg) no-repeat center/cover;

    padding: 55px 0;

}

.footer-first h2 {

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

    font-size: 36px;

    line-height: 40px;

    font-weight: 500;

    text-align: center;

    color: #fff;

    margin-bottom: 10px;

}

.footer-first p {

    font-size: 16px;

    line-height: 24px;

    font-weight: 400;

    text-align: center;

    color: #fff;

    margin-top: 0;

    margin-bottom: 50px;

}

.footer-left {

    background: #FFF;

    padding: 25px 30px;

    border-radius: 5px;

}

.footer-left h3 {

    font-size: 24px;

    line-height: 30px;

    font-weight: 500;

    text-align: center;

    color: #000;

    margin-bottom: 20px;

    text-transform: uppercase;

}



.wpcf7 .screen-reader-response {

    position: absolute;

    overflow: hidden;

    clip: rect(1px,1px,1px,1px);

    clip-path: inset(50%);

    height: 1px;

    width: 1px;

    margin: -1px;

    padding: 0;

    border: 0;

    word-wrap: normal!important;

}



.footer-left input.submit {

    background: url(../files/images/wood-background-3.jpg) repeat-x center;

    text-transform: uppercase;

    font-size: 22px;

    color: #fff;

    font-weight: 800;

    cursor: pointer;

    padding: 10px 20px;

    text-align: center;

    margin: 10px auto 0;

    display: block;

    width: 40%;

}



.wpcf7-spinner {

    visibility: hidden;

    display: inline-block;

    background-color: #23282d;

    opacity: .75;

    width: 24px;

    height: 24px;

    border: none;

    border-radius: 100%;

    padding: 0;

    margin: 0 24px;

    position: relative;

}

.wpcf7-spinner::before {

    content: '';

    position: absolute;

    background-color: #fbfbfc;

    top: 4px;

    left: 4px;

    width: 6px;

    height: 6px;

    border: none;

    border-radius: 100%;

    transform-origin: 8px 8px;

    animation-name: spin;

    animation-duration: 1000ms;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}



.footer-left select {

    background: url(../files/images/wood-background.jpg) repeat-x left;

    padding: 8px 20px;

    font-size: 16px;

    line-height: 26px;

    font-weight: 500;

    color: #ffe1d4;

    border: none;

    border-radius: 5px;

    margin-bottom: 10px;

    width: 100%;

}

.footer-left input {

    background: url(../files/images/wood-background.jpg) repeat-x left;

    padding: 8px 20px;

    font-size: 16px;

    line-height: 26px;

    font-weight: 500;

    color: #ffe1d4;

    border: none;

    border-radius: 5px;

    margin-bottom: 10px;

    width: 100%;

}

.footer-left textarea {

    background: url(../files/images/wood-background.jpg) repeat left;

    padding: 8px 20px;

    font-size: 16px;

    line-height: 26px;

    font-weight: 500;

    border: none;

    border-radius: 5px;

    margin-bottom: 10px;

    width: 100%;

    height: 145px;

    color: #ffe1d4;

}



.footer-left input.submit {

    background: url(../files/images/wood-background.jpg) repeat-x center;

    text-transform: uppercase;

    font-size: 22px;

    color: #fff;

    font-weight: 800;

    cursor: pointer;

    padding: 10px 20px;

    text-align: center;

    margin: 10px auto 0;

    display: block;

    width: 40%;

}







.footer-right h3 {

    font-size: 22px;

    line-height: 30px;

    font-weight: 500;

    text-align: left;

    color: #deb88a;

    margin-bottom: 10px;

}



.footer-right h3 span {

    color: #fff;

}







.footer-right ul.footer-wchoose {

    padding: 15px 0 20px 0;

    display: flex;

}

.footer-right ul.footer-wchoose li {

    display: inline-block;

    width: 23.3%;

    font-size: 15px;

    line-height: 20px;

    color: #ffe1d4;

    padding-right: 20px;

}

.footer-right ul.footer-wchoose li img {

    display: block;

    margin-bottom: 15px;

}

.footer-right h3 {

    font-size: 22px;

    line-height: 30px;

    font-weight: 500;

    text-align: left;

    color: #deb88a;

    margin-bottom: 10px;

}

.footer-right ul.footer-contact li {

    list-style: none;

    font-size: 15px;

    line-height: 24px;

    font-weight: 400;

    text-align: left;

    color: #ffe1d4;

    margin-top: 0;

    margin-bottom: 5px;

}

.footer-right ul.footer-contact li a {

    color: #fff;

}



.footer-right ul.footer-contact li img {

    margin-right: 10px;

}



.footer-right .payment img {

    width: 60%;

}



.footer-left p {

    margin: 0;

}









.footer-secend {

    background: url(../files/images/wood-background.jpg) repeat left top;

    background-size: cover;

    padding: 50px 0;

    text-align: center;

}

.footer-secend .footer-logo img {

    width: 32%;

}



.footer-secend ul {

    margin-top: 0;

    margin-bottom: 15px;

    padding: 0;

    display: flex;

    justify-content: center;

    padding: 15px 0;

}



.footer-secend ul li {

    display: inline-block;

    text-align: left;

    list-style: none;

    margin-right: 5px;

    list-style: none;

    padding: 0 20px;

}

.footer-secend ul li  a{

    color: white;

    font-size: 30px;

}





a:focus, a, a:hover{

    outline: none;

    text-decoration: none;

}



img {

    vertical-align: middle;

    border-style: none;

}

.footer-secend p {

    font-size: 14px;

    text-align: center;

    color: #ffe1d4;

    margin: 0;

}





.footer-three {

    background: url(../files/images/wood-background-2.jpg) repeat left;

    padding: 25px 0;

}



@media (min-width: 576px){

.col-sm-12 {

    -ms-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

}

.footer-three p {

    font-size: 13px;

    line-height: 20px;

    text-align: center;

    color: #562b18;

    /* text-shadow: 0 0 1px #fff; */

    margin: 0;

}

}







/*

---------------------------------------------------------------------------------------------------------------------------------

blog details  

----------------------------------------------------------------------------------------------------------------------------------

*/







.btnBlog{

    border-color:  var(--color4);

    color: var(--color4);

    margin: 5px;

}

.btnBlog:hover{

    border-color:  var(--color4);

    color: var(--color4);

    margin: 5px;

    background-color: transparent;

}



















/*

---------------------------------------------------------------------------------------------------------------------------------

product details  

----------------------------------------------------------------------------------------------------------------------------------

*/



.product-details .product-section .section-one{}

.product-details .product-section .section-one .images .view-img{

    overflow: hidden;

    width: 100%;

    height: 263px;

    text-align: center;

    border: 1px solid var(--main-color);

    border-radius: 15px;

}

.product-details .product-section .section-one .images .view-img img{

    height: 100%;

}

.product-details .product-section .section-one .images .images-slide{

    display: flex;

    margin-top: 10px;

    padding : 10px 0 ; 

    gap:5px ;

    justify-content: center;

    width: 100%;

    border: 1px solid var(--main-color);



    border-radius: 15px;

}

.product-details .product-section .section-one .images .images-slide{

    display: flex;

    padding : 10px 0 ; 

}



.product-details .product-section .section-one .images .images-slide .img-template{

    width: 67px;

    height: 67px;

    overflow: hidden;

}

.product-details .product-section .section-one .images .images-slide .img-template img{

    width: 100%;

    height: auto;

}



.product-details .product-section .section-two {

   background-color: #f7f7f7;

   padding: 35px ;

   margin-top: 70px;

   position: relative;

   border-top: 2.5px solid var(--main-color);

}

.product-details .product-section .section-two .tag {

    background-color: var(--main-color);

    padding: 10px 20px;

    color: white;

    position: absolute;

    top: 0;

    left: 0;

    

    text-align: center;

    transform: translateY(-100%)translateX(50%);

    width: 50%;

}

.product-details .product-section .section-two .tag p{

    margin: 0;

}

.product-details .product-section .section-two .sendBtn{

    padding-left: 30px;

    padding-right: 30px;

    height: 50px;

    background-color: var(--main-color) !important;

    border: none;

    outline: none;

}

.product-details .product-section .section-two .sendBtn:focus{

    border: none;

    outline: none;

    box-shadow: none !important;

}





.images-slide img {

opacity: 0.6 ;

}



.images-slide .active {

opacity: 1 !important;

}



.wood-type-box h3 a{

    color: var(--main-color) ;

    font-weight: 700;

}

.wood-type-box col-sm-4{



    text-align: center;

}

.card-location{

    display: flex;

    flex-direction: column;

    align-items: center;

}





/* ----------------------------------------------

*/



#payment-footer{

    width: 210px;

    max-width: 100%;

    padding-top: 10px;

}



.aboutUsStyle  .col-sm-9 a{

color: var(--main-color);

}


/* استبدل علم العربية بعلم السعودية في القائمة */
.gtranslate_wrapper .glink[data-gt-lang="ar"] img {
  content: url("https://flagcdn.com/w40/sa.png") !important;
}

/* استبدال أي علم عربي افتراضي لو الأداة رجّعت ar.png */
.gtranslate_wrapper img[src*="/flags/"][src$="/ar.png"] {
  content: url("https://flagcdn.com/w40/sa.png") !important;
}

/* أضمن أن الموديل فوق كل حاجة (أحيانًا مفيد) */
.mfp-bg, .mfp-wrap { z-index: 999999 !important; }



.partners-box {
  position: relative;
  margin: 0 auto;
  max-width: 600px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 50px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.companies-wrapper {
  width: 100%;
  text-align: center;
}

.company-item {
  display: none;
  text-decoration: none;
  color: #000;
  transition: opacity 0.4s ease;
}

.company-item.active {
  display: block;
  opacity: 1;
}

.company-item h4 {
  font-weight: 700;
  margin-bottom: 8px;
}

.company-item p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Buttons */
.nav-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: 0.2s;
}

.nav-btn i {
  font-size: 20px;
  color: #888;
}

.nav-btn:hover { background: rgba(0,0,0,0.05); }

.nav-btn.prev { left: 0; border-radius: 12px 0 0 12px; }
.nav-btn.next { right: 0; border-radius: 0 12px 12px 0; }