body {
     direction: rtl;
 }

 @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');


 :root {
     --main-color: #2D93B9;
 }

 * {
     font-family: 'Almarai', sans-serif !important;
     margin: 0;
     padding: 0;
     text-transform: capitalize;
     text-decoration: none !important;
     outline: none !important;
     list-style: none !important;
     font-weight: 400;
     transition: all 0.2s linear;
     box-sizing: border-box;
 }

 *::selection {
     background: var(--colorHover);

 }


 a {
     /* color: #ffff; */
     text-decoration: none;
 }

 a:hover {
     color: var(--main-color);
 }

 .actives {
     color: var(--main-color) !important;
 }

 .active {
     color: var(--main-color) !important;
 }

 body {
     /* overflow: hidden; */
     /* position: relative; */
     background-color: #3C3C3C;
     color: #EDEFEF;
     overflow-x: hidden;
 }


 .top_button_page {
     position: fixed;
     bottom: 2rem;
     left: 1.5rem;
     border: 50%;
     border-color: var(--main-color);
     border-width: 1px;
     border-style: solid;
     background: #3C3C3C;
     border-style: solid;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     cursor: pointer;
     transition: all 1s ease;
 }


 .top_button_page i {
     font-size: 2rem;
     padding: 5px;
 }


 .top_button_page:hover {
     background-color: var(--main-color);
 }

 .whatsapp_button_page {
     position: fixed;
     bottom: 2rem;
     right: 1.5rem;
     border: 50%;
     border-color: var(--main-color);
     border-width: 1px;
     border-style: solid;
     background: #25D366;
     border-style: solid;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     cursor: pointer;
     transition: all 1s ease;

 }

 .whatsapp_button_page a {
     cursor: pointer;
 }

 .whatsapp_button_page i {
     font-size: 2rem;
     padding: 5px;
     color: #fff;

 }


 /* Start Nav Bar */


 .header-active {
     width: 100%;
     z-index: 2000;
     position: fixed;
     background: #3C3C3C;


 }

 /* .header-active .custom-nav {
  width: 100% !important;

} */

 @media (min-width: 991px) {
     /* .nav_custom_scroll {
    position: fixed;
  } */

     .custom-nav {
         /* margin:1.5rem auto !important; */
         width: 100% !important;
         z-index: 2000;


     }

     .custom-nav .navbar-nav {
         width: 70% !important;
         display: flex;
         align-items: center;
         justify-content: space-between;
         height: 43px;
         border-color: #707070;
         border-width: 1px;
         border-style: solid;
         background: #494949;
         border-style: solid;
         border-top-right-radius: 10px;
         border-top-left-radius: 1px;
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 1px;
     }




     .custom-nav .navbar-nav .nav-item a {
         /* padding: 10px 25px; */
         font-size: 16px;
         font-weight: bold;
         font-style: normal;
         color: #fff;
         transition: all ease-in-out 1s;

     }

     .custom-nav .language .btn:hover,
     .custom-nav .navbar-nav .nav-item a:hover {
         color: var(--main-color);
     }

     .custom-nav .language .btn {
         color: #fff;
         text-transform: uppercase;
     }


     .custom-nav .language .dropdown .dropdown-menu {
         min-width: 4rem;
         justify-content: center;
         border-color: #707070;
         border-style: solid;
         border-top-right-radius: 10px;
         border-top-left-radius: 1px;
         border-bottom-left-radius: 10px;
         border-bottom-right-radius: 1px;
     }

     .dropdown-item {
         text-transform: uppercase;

     }

     .custom-nav .lang .dropdown .dropdown-menu li {
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;


     }




     /* End Nav Bar */
 }

 /* Home Section */

 .home {
     position: relative;
     width: 100%;
 }

 .home .image-body {
     width: 100% !important;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     margin: auto;
     /* overflow: hidden; */
 }

 .home .image-body img {
     width: 100%;

 }

 @media (min-width: 992px) {

     .home .box {
         position: absolute;
         top: 36%;
         right: 40%;
         transform: translate(+50%, -50%);

     }

     .home .box h1 {
         font-family: 'Almarai';
         font-size: 47px;
         font-weight: bold;
         text-transform: uppercase;

     }

     .home .box h2 {
         margin-top: 25px;
         margin-bottom: 20px;
         white-space: nowrap;
         overflow: hidden;

         font-size: 28px;
         color: rgba(255, 255, 255, .70);
         text-transform: uppercase;
         font-size: 23px;
         animation: animated-text 4s steps(29, end) 1s infinite normal both;
     }


     .home .box h2 span {
         color: var(--main-color);
         text-transform: uppercase;

     }

     .home .box p {
         width: 60%;
         line-height: 2;
     }

     /* text animation */

     @keyframes animated-text {
         from {
             width: 0;
         }

         to {
             width: 575px;
         }
     }




 }


 .center {
     width: 100%;
 }

 .center .btn {
     border-color: #707070;
     border-style: solid;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: 1s ease-in-out;
     color: #fff;
     font-size: 18px;
 }


 .center .btn:hover {
     transition: 1s ease-in-out;
     background: var(--main-color);
     border: none;
 }

 /* image body */





 /* about */


 .about {
     width: 100%;
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     padding-top: 9rem;
 }

 .about .box {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
 }

 .about .box .accordion-custom {
     width: 80%;
     padding: 5px;
     margin: auto;
     text-align: start;

 }



 .about .box .accordion-custom .accordion-item h1 {
     font-size: 22px;
     font-weight: bold;
     text-transform: uppercase;

 }


 .about .box .accordion-custom .accordion-item h1 span {
     color: var(--main-color);
 }

 .about .box .accordion-custom .accordion-item .accordion-body {
     line-height: 1.9;
 }

 .company-profile-btn {
     margin: 3rem auto;
 }


 .company-profile-btn a {
     text-align: center;
     width: fit-content;
     border: 1px solid #2D93B9;
     padding: 7px 15px;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: all 1s ease-in;
     font-size: 18px;
     text-transform: capitalize;
     color: #fff
 }

 .company-profile-btn a:hover {
     transform: scale(0.95);
     color: rgb(45, 147, 185);
     border-color: #ccc;
     background-color: #ccc;

 }



 .about .about-image {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     margin: auto;
     overflow: hidden;
 }

 .about .about-image img {
     width: 100%;
 }

 /* services */


 .services {
     width: 100%;
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     padding-top: 9rem;

 }


 .services .box {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
 }


 .services .box h1 {
     font-size: 33px;
     font-weight: bold;
     text-transform: uppercase;

 }

 .services .box h1 span {
     font-weight: bold;
     text-transform: uppercase;
     color: var(--main-color);

 }


 .services .box .accordion-custom {
     width: 80%;
     padding: 5px;
     margin: auto;
     text-align: start;
 }



 .services .box .accordion-custom .accordion-item h1 {
     font-size: 22px;
     text-transform: uppercase;
 }


 .services .box .accordion-custom .accordion-item .accordion-body {
     line-height: 1.9;
 }

 .services .services-image {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     flex-direction: column;
     text-align: center;
     margin: auto;
     overflow: hidden;
 }

 .services .services-image img {
     width: 100%;
 }



 .portfolio {
     width: 100%;
     padding-top: 9rem;

 }

 .portfolio .title {
     width: 100%;
     margin: 5rem 0 auto;
     text-align: center;
 }

 .portfolio .title h1 {
     font-size: 50px;
     font-weight: bold;
     text-align: center;
     position: relative;
     margin-bottom: 60px;
 }

 .portfolio .title h1:after {
     content: '';
     position: absolute;
     width: 100px;
     height: 4px;
     background-color: var(--main-color);
     bottom: -20px;
     right: 0;
     left: 0;
     margin: 0 auto;
 }






 .portfolio .carousel-item {
     width: 100%;
     margin: 0 auto;
     margin-bottom: 10px;
 }

 .portfolio .carousel-item .box {
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     padding: 5px;
 }

 .portfolio .carousel-item .box img {
     width: 100%;
 }

 .portfolio .carousel-item .box .contact {
     width: 100%;
     display: flex;
     align-items: start;
     justify-content: center;
     flex-direction: column;
     margin: auto;
     margin-top: 3rem;
 }

 .portfolio .carousel-item .box .contact h1 {
     font-size: 40px !important;
     font-weight: bold;
     color: #fff;
     margin: 15px auto;
 }

 .portfolio .carousel-item .box .contact p {
     line-height: 2;
     font-size: 19px;
     padding: 20px;
     color: var(--main-color);
     width: 80%;
     margin: auto;
 }



 .portfolio .carousel-item .box .contact .btn {
     text-align: center;
     width: fit-content;
     border: 1px solid #2D93B9;
     padding: 7px 15px;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: all 1s ease-in;
     font-size: 18px;
     text-transform: capitalize;
     color: #fff;
     margin: 10px auto;

 }

 .portfolio .carousel-item .box .contact .btn:hover {
     transform: scale(0.95);
     color: rgb(45, 147, 185);
     border-color: #ccc;
     background-color: #ccc;

 }


 .box-video {
     position: relative;
     width: 100%;
     border: #adb5bd 1px solid;
     margin: 20px 0 auto;
     cursor: pointer !important;
     transition: all 1s ease-in-out;
     background-color: #fff;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
 }

 .box-video::after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     /* Adjust the opacity as needed */
     pointer-events: none;
     opacity: 1;
     transition: opacity 0.3s ease-in-out;
 }

 .box-video:hover {
     border: var(--main-color) 2px solid;

 }

 .box-video:hover::after {
     opacity: 0;


 }

 .box-video iframe {
     width: 100%;
     height: 100%;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     padding: 5px;
     transition: all 1s ease-in-out;

 }





 .btn-video {
     width: 100%;
     margin: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 1s ease-in;

 }

 .btn-video a {
     text-align: center;
     width: fit-content;
     border: 1px solid #2D93B9;
     padding: 7px 15px;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: all 1s ease-in;
     font-size: 18px;
     text-transform: capitalize;
     color: #fff;
     margin: 10px auto;
 }


 .btn-video a:hover {
     transform: scale(0.95);
     color: rgb(45, 147, 185);
     border-color: #ccc;
     background-color: #ccc;
 }

 .portfolio .box-web {
     position: relative;
     width: 90%;
     margin: 10px auto;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
 }

 .portfolio .box-web::after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     /* Adjust the opacity as needed */
     pointer-events: none;
     opacity: 1;
     transition: opacity 0.3s ease-in-out;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
 }

 .portfolio .box-web:hover::after {
     opacity: 0;

 }

 .portfolio .box-web img {
     width: 100%;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: all 1s ease-in-out;
 }

 .portfolio .box-web img:hover {
     transform: scale(0.95) rotateZ(10deg) translate(+50px, 5px);
 }

 /*  portfolio */

 /*Start Contact us*/


 .contact_us {
     width: 100%;
     padding-top: 9rem;

 }

 .contact_us .title {
     width: 100%;
     margin: 5rem 0 auto;
     text-align: center;
 }

 .contact_us .title h1 {
     font-size: 50px;
     font-weight: bold;
     text-align: center;
     position: relative;
     margin-bottom: 60px;
 }

 .contact_us .title h1:after {
     content: '';
     position: absolute;
     width: 100px;
     height: 4px;
     background-color: var(--main-color);
     bottom: -20px;
     right: 0;
     left: 0;
     margin: 0 auto;
 }

 .contact_us .contact-form-info {
     display: flex;
     align-items: start;
     justify-content: center;
 }

 .contact_us .form {
     width: 100%;
     margin: 2rem auto;

     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     /* border: 1px solid #2D93B9; */

 }

 .contact_us .form form {
     padding: 15px;
 }

 .contact_us .form form span {
     color: red;
 }

 .contact_us .form form .custom-input {
     width: 100%;
     padding: 10px;
     border: none;
     /* border-radius:10px; */
     margin-bottom: 10px;
     background: none;
     color: #fff;
     border-bottom: 1px solid #fff;
 }

 .contact_us .form form textarea {
     height: 200px;
 }


 .contact_us .form form .btn {
     display: block;
     text-align: center;
     width: fit-content;
     border: 1px solid #2D93B9;
     padding: 7px 15px;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: all 1s ease-in;
     font-size: 18px;
     text-transform: capitalize;
     color: #fff;
     margin: 15px auto;

 }

 .contact_us .form form .btn:hover {
     background-color: var(--main-color);
     border-color: #fff;
     color: #fff;
 }



 .contact_us .icon-box {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: row;
     width: 100%;
     margin: auto;
 }


 .contact_us .icon-box .info-box {
     /* background-color: #EDEFEF; */
     color: var(--main-color);
     margin: 1rem;
     padding: 5px;
     width: 80%;
     height: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     /* border: 1px solid #2D93B9; */
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     cursor: pointer;
     transition: all 1s ease;
 }

 .contact_us .icon-box .info-box:hover {
     /* transform: scale(0.95) rotateZ(10deg) translate(+50px, 5px); */
     background-color: var(--main-color);
     border: 2px solid #fff;

 }

 .contact_us .icon-box .info-box:hover i {
     color: #fff;
 }

 .contact_us .icon-box .info-box i {
     font-size: 3.5rem;
     padding: 5px;
 }

 .contact_us .icon-box .info-box span {
     color: #fff;
 }






 /* testing preloader */
 .preloader {
     z-index: 1000;
     background-color: var(--main-color);
     width: 100vw;
     height: 100vh;
     position: absolute;
 }

 .btn-welcome {
     width: 130px;
     height: 130px;
     border-radius: 50%;
     position: absolute;
     top: 50%;
     right: 50%;
     transform: translate(+50%, -50%);
 }

 .opening {
     font-size: 24px;
     color: var(--main-color);
 }

 .social {
     width: 100%;
     position: relative;
 }

 .social .social-icon {
     width: fit-content;
     position: fixed;
     top: 30%;
     /* right: 0; */
     left: 0;
     margin: auto;
     padding: 5px;
     text-align: center;
     transition: all 1s ease-in-out;

     display: flex;
     align-items: center;
     justify-content: center;
 }

 .social .social-icon .dropdown .btn-icon {
     border: none;
     background-color: #3C3C3C;
     padding: 5px;
 }

 .social .social-icon .dropdown .btn-icon i {
     font-size: 2rem !important;
     color: var(--main-color);
     rotate: 180deg;

 }

 .social .social-icon .dropdown .dropdown-menu {
     text-align: center;
     min-width: 4rem;
     background: none;
     border: none;
 }

 .social .social-icon .dropdown .dropdown-menu li a {
     font-size: 25px;
     color: #fff !important;
 }

 .social .social-icon .dropdown .dropdown-menu li a:hover i {
     color: var(--main-color);
 }







 /* loyalty_program */
 .loyalty_program {
     width: 100%;
     padding-top: 9rem;

 }

 .loyalty_program .loyalty_content {
     display: flex;
     align-items: center;
     justify-content: center;

 }

 .loyalty_program .title {
     width: 100%;
     margin: 5rem 0 auto;
     text-align: center;
 }

 .loyalty_program .title h1 {
     font-size: 50px;
     font-weight: bold;
     text-align: center;
     position: relative;
     margin-bottom: 60px;
 }

 .loyalty_program .title h1:after {
     content: '';
     position: absolute;
     width: 100px;
     height: 4px;
     background-color: var(--main-color);
     bottom: -20px;
     right: 0;
     left: 0;
     margin: 0 auto;
 }


 .loyalty_program .box-image {
     position: relative;
     width: 100% !important;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 5px;
 }



 .loyalty_program .box-image img {
     width: 100%;
 }





 .loyalty_program .box-content h2 {
     font-size: 40px !important;
     font-weight: bold;
     color: #fff;
     margin: 10px auto;
 }

 .loyalty_program .box-content p {
     line-height: 2;
     font-size: 19px;
     padding: 10px;
     color: var(--main-color);
     width: 100%;
     margin: auto;
 }


 .loyalty_program .loyalty_content .btn-box a {
     text-align: center;
     width: fit-content;
     border: 1px solid #2D93B9;
     padding: 7px 15px;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: all 1s ease-in;
     font-size: 18px;
     text-transform: capitalize;
     color: #fff;
     margin: 10px auto;

 }

 .loyalty_program .loyalty_content .btn-box a:hover {
     transform: scale(0.95);
     color: rgb(45, 147, 185);
     border-color: #ccc;
     background-color: #ccc;
 }





 .loyalty_program .loyalty_content .box-form {
     width: 100%;

 }

 .loyalty_program .loyalty_content .box-form form {
     padding: 10px;
     margin-top: 10px;
 }

 .loyalty_program .loyalty_content .box-form form .col-form-label {
     color: #fff;
     font-size: 18px;
 }

 .loyalty_program .loyalty_content .box-form form span {
     color: red;
 }

 .loyalty_program .loyalty_content .box-form form .custom-input {
     width: 100%;
     padding: 10px;
     border: none;
     /* border-radius:10px; */
     margin-bottom: 10px;
     background: none;
     color: #fff;
     border-bottom: 1px solid #fff;
 }

 .loyalty_program .loyalty_content .box-form form .btn {
     display: block;
     text-align: center;
     width: fit-content;
     border: 1px solid #2D93B9;
     padding: 7px 15px;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: all 1s ease-in;
     font-size: 18px;
     text-transform: capitalize;
     color: #fff;
     margin: 15px auto;

 }

 .loyalty_program .loyalty_content .box-form form .btn:hover {
     transform: scale(.95);
     color: rgb(245, 245, 245);
     background-color: var(--main-color);
 }

 /* Brand */
 .logo-slider .item a img {
     width: 100%;

 }


 .boxing {

     margin-top: 100px;

 }

 .brand h1 {
     font-size: 50px;
     font-weight: bold;
     text-align: center;
     position: relative;
     margin-bottom: 60px;
 }

 .brand h1:after {
     content: '';
     position: absolute;
     width: 100px;
     height: 4px;
     background-color: var(--main-color);
     bottom: -20px;
     right: 0;
     left: 0;
     margin: 0 auto;
 }


 .logo-slider {
     width: 90%;
     margin: auto;
 }

 .logo-slider .item {
     border-color: #3C3C3C;
     border-style: solid;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;

 }

 .logo-slider .slick-slide {
     margin: 15px;
 }

 .slick-dots li.slick-active button:before {
     color: var(--main-color);
 }

 .slick-dots li button:before {
     font-size: 12px;
 }

 .slick-next:before,
 .slick-prev:before {
     color: var(--main-color);
     font-size: 24px;
 }

 /* */
 .item:hover {
     display: block;
     transition: all ease 0.3s;
     transform: scale(1.1) translateY(-4px);
     /* box-shadow: 0 4px 5px var(--main-color);s */
     /* border: 1px solid var(--main-color); */

 }



 .content a {
     -webkit-transition: .3s all ease;
     -o-transition: .3s all ease;
     transition: .3s all ease;
 }

 .content p {
     color: #999999;
     font-weight: 300;
 }

 /* a,
a:hover {
  text-decoration: none !important;
} */

 .content {
     padding: 0;
 }

 /* s */

 .owl-1 .owl-nav {
     width: 100%;
     position: absolute;
     top: 50%;
 }

 .owl-1 .owl-nav .owl-next,
 .owl-1 .owl-nav .owl-prev {
     border: 1px solid red;
     z-index: 92;
     position: absolute;
     top: 50%;
 }

 .owl-1 .owl-nav .owl-next:active,
 .owl-1 .owl-nav .owl-next:focus,
 .owl-1 .owl-nav .owl-prev:active,
 .owl-1 .owl-nav .owl-prev:focus {
     outline: none;
 }

 .owl-1 .owl-nav .owl-next span,
 .owl-1 .owl-nav .owl-prev span {
     color: #fff;
 }

 .owl-1 .owl-nav .owl-next span:before,
 .owl-1 .owl-nav .owl-prev span:before {
     font-size: 40px !important;
 }

 .owl-1 .owl-nav .owl-next {
     border: 4px solid blue;
     left: 20px;
 }

 .owl-1 .owl-nav .owl-prev {
     right: 20px;
 }

 .owl-1 .owl-dots {
     position: absolute;
     bottom: 40px;
     right: 50%;
     -webkit-transform: translateX(+50%);
     -ms-transform: translateX(+50%);
     transform: translateX(+50%);
 }

 .owl-1 .owl-dots .owl-dot {
     background: none;
     display: inline-block;
 }

 .owl-1 .owl-dots .owl-dot>span {
     display: inline-block;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.5);
     margin: 4px;
 }

 .owl-1 .owl-dots .owl-dot.active>span {
     background: white;
 }

 .owl-1 .owl-dots .owl-dot:active,
 .owl-1 .owl-dots .owl-dot:focus {
     outline: none;
 }

 .media-29101 .img {
     -webkit-box-flex: 0;
     -ms-flex: 0 0 50%;
     flex: 0 0 50%;
 }

 .media-29101 .text {
     padding: 50px;
 }

 @media (max-width: 991.98px) {
     .media-29101 .text {
         padding: 20px;
         width: 100%;
     }
 }

 .media-29101 .text .category {
     color: #adb5bd;
     text-transform: uppercase;
     font-size: 12px;
     font-weight: bold;
     letter-spacing: .2rem;
 }

 .media-29101 .text h2 {
     font-family: "Playfair Display", times, serif;
     font-size: 2rem;
     line-height: 1.3;
     margin-bottom: 30px;
 }

 .media-29101 .text h2 a {
     color: #000;
 }

 .carousel-nav {
     width: 100%;
     border-bottom: 1px solid #ccc;
     margin-bottom: 40px;
 }

 .carousel-nav a {
     color: #fff;
     padding: 20px;
     text-align: center;
     display: inline-block;
     -webkit-transition: .3s all ease;
     -o-transition: .3s all ease;
     transition: .3s all ease;
     font-size: 20px;
 }

 .carousel-nav a:hover {
     color: var(--main-color);
     text-decoration: none !important;
 }


 .carousel-nav a.active {
     color: #000;
 }

 .carousel-nav a.active:before {
     content: "";
     bottom: -1px;
     right: 0;
     left: 0;
     position: absolute;
     border-bottom: 1px solid var(--main-color);
 }

 /* footer */

 footer {
     width: 100%;
     text-align: center;
     margin-top: 3rem;
     margin-left: 0;
     margin-bottom: 0;
     margin-right: auto;
 }

 footer .content {
     width: 100%;
     padding: 5px;
     margin-top: 10px;
 }

 footer .content .icon {
     width: 95%;
 }

 footer .content .icon ul {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: row;
 }

 footer .content .icon ul li a {
     margin: 5px;
     padding: 5px;
     color: #fff;
     font-size: 20px;
     transition: all 1s ease;
 }

 footer .content .icon ul li a:hover {
     color: var(--main-color);
 }

 /* Start Blogs In Home Page */
 .blogs {
     width: 100%;
     padding-top: 2rem;

 }


 .blogs .title {
     margin: 5rem 0 auto;
     width: 100%;
     text-align: center;
 }

 .blogs .title h1 {
     font-size: 50px;
     font-weight: bold;
     text-align: center;
     position: relative;
     margin-bottom: 60px;
 }

 .blogs .title h1:after {
     content: '';
     position: absolute;
     width: 100px;
     height: 4px;
     background-color: var(--main-color);
     bottom: -20px;
     right: 0;
     left: 0;
     margin: 0 auto;
 }


 .blogs .container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     max-width: 1200px;
     margin-block: 2rem;
     gap: 2rem;
 }

 .blogs img {
     max-width: 100%;
     display: block;
     object-fit: cover;
 }

 .blogs .card {
     margin: auto;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: clamp(20rem, calc(20rem + 2vw), 22rem);
     overflow: hidden;
     box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
     /* border-radius:1em; */
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: all 1s ease-in-out;
     background: #ECE9E6;
     background: linear-gradient(to left, #FFFFFF, #ECE9E6);

 }

 .blogs .card:hover {
     transform: scale(0.98) rotateX(8deg);
 }



 .blogs .card__body {
     padding: 1rem;
     display: flex;
     flex-direction: column;
     gap: .5rem;
 }




 .blogs .card__body a h4 {
     color: #2D93B9;
     font-size: 1.5rem;
     text-transform: capitalize;
 }

 /* End  Blogs In Home Page */


 /* Start  Blogs  Pages */
 .main-blog {
     width: 100%;

 }


 .main-blog .title {
     margin: 5rem 0 auto;
     width: 100%;
     text-align: center;
     margin-bottom: 30px;
 }

 .main-blog .title h1 {
     font-size: 50px;
     font-weight: bold;
     text-align: center;
     position: relative;
 }

 .main-blog .title p {
     font-size: 18px;
     text-align: center;
     position: relative;
     margin-bottom: 60px;
     width: 80%;
     margin: auto;
 }

 .main-blog .title h1:after {
     content: '';
     position: absolute;
     width: 100px;
     height: 4px;
     background-color: var(--main-color);
     bottom: -6px;
     right: 0;
     left: 0;
     margin: 0 auto;
 }



 .box-blog {
     position: relative;

     width: 65%;
     margin: auto;
     background-color: #ccc;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     overflow: hidden;
     box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
     /* border-radius:1em; */
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: all 1s ease-in-out;
     margin-bottom: 3rem;

     cursor: pointer;
     transition: all 1s ease-in-out;
 }



 .box-blog img {
     width: 100%;
     display: block;
     object-fit: cover;
 }


 .box-blog .content-blog {
     position: absolute;
     bottom: -160px;
     right: 0;
     width: 100%;
     background: #302e2e9d;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     cursor: pointer;
 }

 .box-blog:hover .content-blog {
     bottom: -30px;

 }

 .box-blog .content-blog .date {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 5px;


 }

 .box-blog .content-blog .date .date-part-one {
     color: var(--main-color);
     font-size: 60px;
     font-weight: 600;
     letter-spacing: 8px;
     margin-bottom: 10px;
 }

 .box-blog .content-blog .date .date-part-two {
     color: #fff;
     font-size: 18px;
     font-weight: 200;
 }


 .box-blog .content-blog .content {
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
     flex-direction: column;
     padding: 5px;
     margin: 10px;
 }

 .box-blog .content-blog .content .content-title {
     color: #fff;
     font-size: 22px;
     margin-bottom: 6px;
 }

 .box-blog .content-blog .content hr {
     width: 100%;
     background-color: #fff;
     color: #ffffff;
     font-weight: bold;
     border: 1px solid #fff;
 }

 .box-blog .content-blog .content .content-text {
     width: 100%;
     color: #fff;
     font-size: 17px;
     font-weight: 200;
 }

 .box-blog .content-blog .content .blog-link {
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
     padding: 5px;
     margin: 10px;
     width: 100%;
 }

 .box-blog .content-blog .content .blog-link ul {
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
     /* margin:10px; */
     width: 100%;
 }

 .box-blog .content-blog .content .blog-link ul li {
     flex: .5;
 }

 .box-blog .content-blog .content .blog-link ul li a {
     color: #fff;
     font-size: 18px;
     font-weight: 200;
 }

 .box-blog .content-blog .content .blog-link ul li a:hover {
     color: var(--main-color);
 }

 .box-blog .content-blog .content .blog-link .read-more {
     /* background-color: #3C3C3C; */
     display: block;
     width: fit-content;
     text-align: center;
     padding: 5px 35px;
     border: 1px solid #fff;
     box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
     /* border-radius:1em; */
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: all 1s ease-in-out;
     color: #fff;
 }

 .box-blog .content-blog .content .blog-link .read-more:hover {
     color: var(--main-color);
     transform: scale(1.1);
 }



 /* Single Blog page */

 .single-blog {
     width: 100%;
     padding: 10px;
 }

 .single-box-blog {
     /* background-color: #25D366; */
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 10px;
     flex-direction: column;
     width: 70%;
     margin: auto;
     border-top-right-radius: 10px;
     border-top-left-radius: 1px;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 1px;
     transition: all 1s ease-in-out;
     margin-bottom: 10px;
 }

 .single-box-blog a img {
     width: 100%;
     display: block;
     object-fit: cover;
     margin-bottom: 1.5rem;
 }

 .single-box-blog .content-text,
 .single-box-blog .content-title {
     color: #fff;
 }

 /* Start Blogs  Pages */
 /* box-pagination */

 .box-pagination {

     width: 65% !important;
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     overflow: hidden;


 }