:root{
    --maincolor:white;
    --secondcolor:#990000;
    /* --secondcolor:white; */
    --thirdcolor:#8a8a8a;
    --fourthcolor:black;
    --fifthcolor:#990011ff;
    /* --fifthcolor:white; */
    --sixthcolor:#aaa;
    --seventhcolor:#7b0004;
    --eighthcolor:#db2f4e;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Almarai', sans-serif;
}
@keyframes about {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}
body , .card{
    background-color: var(--maincolor);
    color:var(--secondcolor);
        font-family: 'Cairo', sans-serif;
}
.navbar{
    background-color: var(--maincolor);
    color:var(--secondcolor);
    position:sticky;
    top:0px;
    z-index:999;
    border-bottom:var(--sixthcolor) solid 3px;
}
.nav-link, .dropdown-item{
    color:var(--secondcolor)
}
.dropdown-item:hover{
    background-color: var(--maincolor);
    color:var(--fifthcolor)
}
.nav-link:hover, .nav-link:focus{
    color:var(--fifthcolor);
}
.navbar-toggler{
    color:var(--fifthcolor);
}
.navbar-toggler:focus{
    box-shadow: none;
}
.dropdown-menu{
    background-color: var(--maincolor);
}
.carousels , .carousel-item{
    height:500px;
}
.carouselptn , .carousel-itemptn{
    height:200px;
}
.carousel-itemptn img{
    margin: auto!important;
}
.a{
    text-decoration: none;
}
.pname{
    background-color: var(--fifthcolor);
    height:50px;
    font-size:32px;
    text-decoration: none;
    color: var(--maincolor);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.moreprds{
    color:var(--secondcolor);
    text-decoration: none;
    transition:500ms;
}
.moreprds:hover{
    color:var(--seventhcolor);
}
.pnamep{
    background-color: var(--fifthcolor);
    height:50px;
    font-size:32px;
    text-decoration: none;
    color: var(--maincolor);
    border-radius: 20px;
}
.cards{
    margin:50px auto;
}
.main-title{
    margin:20px auto 0px 30px;
}
.card{
    background-color: var(--sixthcolor);
    transition-duration:500ms;
}
.card:hover{
    width:19rem;
}
.card-img-top{
    margin-top:5px;
}
.lastname{
    margin-left:8%!important;
}
.message{
    /* resize:none; */
    /* overflow:hidden; */
    height:50px;
}
.form-item{
    background-color:var(--maincolor);
    border-color:var(--fifthcolor);
    color:var(--fourthcolor);
    box-shadow:none;
}
.form{
    color:var(--fourthcolor);
}
.form-item:focus{
    outline:none;
}
.form-item::placeholder{
    color:var(--fourthcolor);
    opacity:50%;
}
.submit{
    background-color:var(--secondcolor);
    border:none;
    transition-duration:500ms;
}
.submit:hover{
    background-color:var(--fifthcolor);
}
.empt::placeholder{
    color:var(--secondcolor);
}
.submit:hover{
    background-color: var(--fifthcolor);
}
.contact-img{
    margin-top:30px;
    width:90%;
    height:200px;
}
.contact-img{
    display:inline;
}
.footer{
    margin-top: 50px;
    background-color: var(--sixthcolor);
    border-top:1px var(--secondcolor) solid;
}
.footerpic{
    margin-top:25px;
    margin-bottom:15px;
}
.brands a{
    color:var(--secondcolor);
}
.brands a:hover{
    color:var(--fifthcolor);
}
.contact-email{
    background-color: var(--secondcolor);
    color:var(--maincolor);
    text-decoration: none;
}
.contact-email:hover{
    background-color: var(--fifthcolor);
}
.contact-email:focus{
    outline:none;
    box-shadow:none;
}
/* About Page */
.about{
    background-color: var(--sixthcolor);
    /* height:1100px; */
    margin-top:50px;
    border:solid var(--fifthcolor) 15px;
    border-radius: 15px;
}
.bold{
}
.disabled{
    color:var(--fifthcolor);
    text-decoration: none;
}
.main-title{
    font-family: 'Aboreto', cursive;
    font-weight: bolder;
}
.rvw-title{
    background-color: var(--fifthcolor);
    color:var(--maincolor);
    font-weight: bold;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    text-align: left;
}
.rvw{
    background-color: var(--sixthcolor);
    color:var(--fifthcolor);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 2rem;
    text-align: left;
}
.rvwc{
    border-radius: 0px;
    background-color: var(--sixthcolor);
    color:var(--fifthcolor);
    font-size: 2rem;
    text-align: left;
}
.star{
    color:var(--eighthcolor);
}
.rvwmid{
    border-radius: 0;
}
.abt-title{
    font-family: 'Aboreto', cursive;
    margin:20px auto 0px 0px;
}
.mob{
    display:none;
}
.pc{
    display:block;
}
.sepa{
    height:2px;
    background-color: var(--fifthcolor);
}
.main-sepa{
    height:4px;
    background-color: var(--secondcolor);
}
p{
    color:var(--fourthcolor)
}
.desc{
    font-size: 24px;
    margin-top:50px;
}
.banner img{
    margin-left:50px;
}
.edges{
    border-radius:25px;
}
.about{
    height:100%;
}
.abti{
    background-color: var(--fifthcolor);
    animation-name: about;
    animation-duration: 4s;
}
.abt-icon{
    color:var(--maincolor);
    font-size:170px;
    padding-top:5px;
    padding-bottom:10px;
}
.abti p{
    color:var(--sixthcolor);
}
.galtit{
    text-align:left;
    font-size:32px;
}
.carousel-control-next-icon , .carousel-control-prev-icon{
    height: 20px;
    width: 20px;
    background-size: 100%, 100%;
    background-color: var(--secondcolor);
    border-radius: 50%;
    border: 1px solid var(--fifthcolor);
}
.dashcard{
    border:1px solid var(--secondcolor);
    padding:5px;
    font-size:2rem;
    border-radius:10px;
    font-family: 'Aboreto', cursive;
}
.abtindt{
    color:antiquewhite;
}
.abtindc{
    color: white;
    animation-name: about;
    animation-duration: 4s;
}
.dashcard button{
    text-decoration: none;
    color:var(--secondcolor);
    background-color:var(--main);
    border:none;
    transition-duration:500ms;
}
.dashcard a{
    text-decoration: none;
    color:var(--secondcolor);
    background-color:var(--main);
    border:none;
    transition-duration:500ms;
}
.dashcard a:hover{
    color:var(--seventhcolor);
}
.dashcard button:hover{
    color:var(--seventhcolor);
}
.astable{
    border:var(--secondcolor) 2px solid;
    color:var(--fourthcolor);
    font-size:20px;
    padding:auto;
}
.modal-content{
    background-color: var(--maincolor);
}
.modal-header{
    border-color: var(--secondcolor);
}
.modal-footer{
    border-color: var(--secondcolor);
}
.msg{
    border-top:var(--fifthcolor) solid 3px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.slideimg{
    border: var(--secondcolor) solid 1px;
    border-radius:5px;
}
.carousel-caption{
    color:var(--fifthcolor)
}
.carouselsmob{
    height:350px!important;
}
.galcard{
    background-color: var(--maincolor);
    color:var(--secondcolor);
    border:none;
}
.values{
    color:black;
    font-size:2rem;
}
.ablist li{
    color:black;
    margin-left:100px;
    text-align: left;
}
.protitle{
    background-color: var(--fifthcolor);
    border-radius: 10px;
    color:white;
    margin:20px auto 0 0;
}
/* Phone */
@media (max-width: 317px){
       .lastname{
        margin-left:15px;
    }
}
@media(min-width:318px) and (max-width:352){
        .lastname{
            margin-left:20px;
        }
}
@media(max-width:243px){
    .lastname{
        margin-left:20px;
    }
}
@media(max-width:279px){
    .lastname{
        margin-left:7%!important;
    }
}
@media(min-width:425px){
    .lastname{
        margin-left:10%!important;
    }
}
@media(min-width:991px){
    .lastname{
        margin-left:80px!important;
    }
}
@media (max-width: 320px){
    *{
        margin:0;
    }
    /* .about{ */
        /* height:1000px; */
    /* } */
    .prod-body{
        text-align:center;
    }
    .mob{
        display:block;
    }
    .pc{
        display:none;
    }
    .Aimg{
        width:250px;
        height:225px;
    }
}
@media (min-width: 321px) and (max-width: 374px){
    .Aimg{
        width:300px;
        height:275px;
    }
}

@media (max-width:575px){
    .slidemob{
        width:100% !important;
    }
    .prod-body{
        text-align:center;
    }
}
@media (min-width:353px) and (max-width: 424px){
    .lastname{
        margin-left:38px;
    }
}
@media (min-width: 321px) and (max-width: 424px){
    *{
        margin:0;
    }
    .about{
        height:1500px;
    }
    .Aimg{
        width:300px;
        height:275px;
    }
    /* .mob{ */
        /* display:block; */
    /* } */
    /* .pc{ */
        /* display:none; */
    /* } */
}
@media (min-width: 425px) and (max-width: 575px){
    *{
        margin:0;
    }
    .lastname{
        margin-left:46px;
    }
    .about{
        height:1500px;
    }
    .Aimg{
        width:300px;
        height:275px;
    }
    /* .mob{ */
        /* display:block; */
    /* } */
    /* .pc{ */
        /* display:none; */
    /* } */
}
@media (min-width:576px) and (max-width: 1023px){
    .footer, .carousel{
        margin:0;
    }
    .lastname{
        margin-left:60px!important;
    }
    .about{
        height:1000px;
    }
    .gragdor{
        margin-top: 5rem!important;
        padding-right: 2rem!important;
    }
    .Aimg{
        width:325px;
        height:300px;
    }
}
@media (min-width:769px){
    .w-md-50{
        width: 50%!important;
    }
    .pt-md-5{
        padding: 3rem!important;
    }
    .Aimg{
        width:300px;
        height:275px;
    }
}
@media (min-width:769px) and (max-width:1024px){
    .abt{
        font-size:12px;
    }
}
@media (min-width:1024px) and (max-width: 1339px){
    *{
        margin:0;
    }
    .lastname{
        margin-left:75px;
    }
    .lptop{
        width: 60% !important;
    }
    .about{
        height:1000px;
    }
}
@media(max-width:1340px){
    .footer{
        margin-right:0;
    }
}

@media(min-width:1240px){
    .w-md-30{
        width:30% !important;
    }
}