* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Cairo', sans-serif;
}

* a {
    text-decoration: none;
    color: #0c0809;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #fff;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #c6262f;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #d4d54b;
  }

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.form-control:focus,.form-control:active {
    outline: none;
    box-shadow: none;
}

  .toast-header, .toast-container {
    z-index: 999999;
}

.response-message .toast {
    background-color: #fff !important;
}

.response-message .check-logo {
    color: green;
}

.response-message .error-logo {
    color: red;
}

.response-message .title {
    color: #E9A500;
}

.preloader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background-color: #fff;
    z-index: 99;
}

.preloader img {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 2s;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
  }

  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
.top-section {
    z-index: 5;
}

.home-section .owl-carousel .item {
    width: 100%;
    min-height: 80vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

.home-section .owl-carousel .item .overlay {
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    position: absolute;
    top: 0;
}

.home-section .owl-carousel .item .overlay .text {
    color: #fff;
}
.home-section .owl-carousel .item .overlay .text h3 {
    color: #d4d54b;
    font-weight: 700;
}

.products-section h2 , .contact-us-section h2, .work-history-section h2 {
    font-weight: 700;
    color: #0c0809;
    position: relative;
}

.products-section h2::before , .contact-us-section h2::before , .work-history-section h2::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 35%;
    right: 39%;
    background-color: #c6262f;
    border-radius: 50%;
}

.products-section h2::after , .contact-us-section h2::after , .work-history-section h2::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 35%;
    left: 39%;
    background-color: #c6262f;
    border-radius: 50%;
}

.products-section .product img {
    border-radius: 10px;
}
.products-section .product {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    width: 300px;
    height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* height: auto; */
}



.products-section .product .overlay {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 110%;
    background-color: rgb(0 0 0 / 50%);
    transition: all 2s;
}

.products-section .product:hover .overlay {
    top: 0%;
}

.products-section .product img {
    transition: all 1s;
}
.products-section .product:hover img {
    transform: scale(1.1);
}


.products-section .product .overlay h4 {
    color: #fff;
    font-weight: 700;
}

.products-section .product .overlay h6 {
    color: #d4d54b;
}

.products-section .product .overlay .btn {
    font-weight: 700;
    color: #fff;
    background-color: #c6262f;
}


#btn-back-to-top {
    background-color: #c6262f;
    color: #fff;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 2;
    border: 2px solid #d4d54b;
}



.rectangle {
    width: 100%;
    height: 40px;
    background-color: #c6262f;
}

.rectangle .phone {
    transition: all 0.4s;
    animation: shake 1500ms;
}

.rectangle .phone:hover {
    padding-left: 20px;
}

.rectangle .phone:hover i {
    animation: spin 2s infinite linear
}

.rectangle .mail {
    transition: all 0.4s;
}

.rectangle .mail:hover {
    padding-right: 20px;
}

.rectangle .phone a , .phone i , .rectangle .mail a , .mail i {
    color: #fff;
    padding: 0 5px;
}

.navbar {
    box-shadow: 0 8px 13px -7px rgb(0 0 0 / 25%);
    z-index: 2;
}

.navbar .nav-link {
    font-weight: 700;
    color: #0c0809;
    transition: all 0.4s ease-in-out;
}

.navbar .nav-link.active , .navbar .nav-link:hover {
    color: #d4d54b;
}

.navbar .dropdown-menu {
    border-radius: 0;
}

.navbar .nav-link.dropdown-toggle::after {
    margin: 0 10px !important;
}

.navbar .dropdown-menu .dropdown-item:hover {
    color: #d4d54b;
}

.navbar .dropdown-menu .dropdown-item:active {
    background-color: var(--bs-tertiary-bg);
}

.contact-us-section .method {
    padding: 20px 30px;
    color: #fff;
    border-radius: 40px;
}

.contact-us-section .method i {
    font-size: 28px;
}

.contact-us-section .method.whatsapp {
    transition: all 0.5s;
    background-color: #25D366;
}

.contact-us-section .method.whatsapp:hover {
    background-color: #d4d54b;
}

.contact-us-section .method.facebook {
    transition: all 0.5s;
    background-color: #4267B2;
}

.contact-us-section .method.facebook:hover {
    background-color: #d4d54b;
}
.contact-us-section .method.email {
    transition: all 0.5s;
    background-color: gray;
}

.contact-us-section .method.email:hover {
    background-color: #d4d54b;
}

.contact-us-section form .btn {
    margin: 10px 0;
    color: #fff;
    background-color: #c6262f;
}


.contact-us-section .location .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px dotted #c6262f;
    background-color: #d4d54b;
}


.footer-section {
    background-color: #142a41;
    /* background-color: #a41f26; */
}

.footer-section .other-links p , .footer-section .reach-out-methods p {
    color: #d4d54b;
}

.footer-section li {
    list-style: none;
}

.footer-section a {
    text-decoration: none;
    color: #fff;
    transition: all 0.3s;
}

.footer-section .other-links a span {
    color: #d4d54b;
}


.footer-section .other-links a:hover {
    color: #d4d54b;
    padding: 0 20px 0 0;
}

.footer-section .other-links a.special:hover {
    padding: 0;
}

.product-section .owl-carousel {
    position: relative;
    height: auto;
}
.product-section .owl-carousel .item {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    margin: auto;
}

#owl-1 .item {
    width: 400px;
    height: 400px;
}

.product-section .owl-carousel .item {
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-section .owl-carousel .item img {
    height: 100%;
}

.product-section .owl-carousel .owl-nav .owl-prev {
    position: absolute;
    bottom: 70%;
    font-size: 50px;
    right: 100%;
    color: #d4d54b;
}

.product-section .owl-carousel .owl-nav .owl-next {
    position: absolute;
    bottom: 70%;
    font-size: 50px;
    left: 100%;
    color: #d4d54b;
}

@media all and (min-width: 991px) and (max-width: 1399px) {
    .navbar .nav-item {
        font-size: 13px;
    }
}


@media all and (max-width: 1399px) {
    .products-section h2::before , .contact-us-section h2::before ,.work-history-section h2::before {
        right: 35%;
    }

    .products-section h2::after , .contact-us-section h2::after , .work-history-section h2::after {
        left: 35%;
    }

    .contact-us-section .method {
        padding: 15px 20px;
    }
}


@media all and (max-width: 991px) {
    .rectangle .phone .phone-number, .mail .email {
        display: none;
    }

    .rectangle .phone i, .mail i {
        font-size: 22px;
    }
    .products-section h2::before , .contact-us-section h2::before , .work-history-section h2::before {
        right: 30%;
    }

    .products-section h2::after , .contact-us-section h2::after ,.work-history-section h2::after {
        left: 30%;
    }

    .contact-us-section .method {
        padding: 15px 20px;
    }

    .contact-us-section .method h5 {
        font-size: 18px;
    }
     .contact-us-section .method i {
        font-size: 22px;
    }

    .product-section .owl-carousel .owl-nav .owl-prev {
        bottom: 50%;
        font-size: 50px;
        right: 100%;
    }

    .product-section .owl-carousel .owl-nav .owl-next {
        bottom: 50%;
        font-size: 50px;
        left: 100%;
    }
}


@media all and (max-width: 767.20px) {
    .products-section h2::before , .contact-us-section h2::before , .work-history-section h2::before {
        right: 26%;
    }

    .products-section h2::after , .contact-us-section h2::after ,.work-history-section h2::after {
        left: 26%;
    }

    .contact-us-section .method {
        padding: 15px 20px;
    }
}


@media all and (max-width: 575px) {
    .home-section .owl-carousel .item {
        min-height: 65vh;
      }
    .rectangle .phone , .mail {
        font-size: 15px;
    }
    .navbar .nav-link {
        font-size: 15px;
    }

    .products-section h2 , .contact-us-section h2 , .work-history-section h2 {
        font-size: 22px;
    }

    .products-section h2::before , .contact-us-section h2::before , .work-history-section h2::before {
        right: 22%;
    }

    .products-section h2::after , .contact-us-section h2::after , .work-history-section h2::after {
        left: 22%;
    }

    .product-section .owl-carousel .owl-nav .owl-prev {
        bottom: 50%;
        font-size: 40px;
        right: 90%;
    }

    .product-section .owl-carousel .owl-nav .owl-next {
        bottom: 50%;
        font-size: 40px;
        left: 90%;
    }

    .products-section .product {
        width: 250px;
        height: 250px;
    }

    .product-section .owl-carousel .item {
        width: 250px;
        height: 250px;
        margin: auto;
    }

    #owl-1 .item {
        width: 250px;
        height: 250px;
        margin: auto;
    }

    .products-section .product h4 , h1 {
        font-size: 20px;
    }

    .products-section p.h4 , .product-section p.h4 {
        font-size: 18px;
    }

    .products-section .product h6 {
        font-size: 16px;
    }

    .products-section .product a {
        font-size: 14px;
    }

    .product-section h4 {
        font-size: 17px;
    }

    .product-section .btn {
        margin: auto;
    }

    .contact-us-section .method h5 {
        font-size: 16px;
    }

    .contact-us-section h3 {
        font-size: 22px;
    }

    .contact-us-section .left-side strong {
        font-size: 14px;
    }
    .footer-section .logo img {
        width: 75%;
    }

    .footer-section a , p , .h5 {
        font-size: 15px;
    }
}