/* start global rules */
* {
    padding:0;
    margin:0;
    box-sizing:border-box;
}
html {
   scroll-behavior:smooth;
}
body {
    font-family: 'Cairo', sans-serif;  
}
ul {
    list-style-type:none;
}
a {
    text-decoration:none;
}
/* start variables */
:root {
    --section-padding:60px;
    --main-color:black;
    --main-alt-color:white;
    --main-transtion:0.5s;
}
/* end variables */
/* start component */
 .main-title {
   position: relative;
    text-align:center;
    color: #555;
    font-size:35px;
    text-transform: uppercase;
    font-weight:700;
}
 .main-title::before {
   content:"";
   position:absolute;
   height:2px;
   width:65px;
   background-color:#555;
   bottom:-20px;
}
 .main-title span {
   color:red;
}
/* end component */
/* end global rules */

/* start navbar */
nav {
    min-height:65px;
    box-shadow:3px 3px 3px rgba(0, 0, 0, 0.3);
    background-color:white;
}
nav .container .navbar-brand {
   color: #0d6efd;
   font-weight:bold;
   font-size: 25px;
}
nav .navbar-toggler:focus {
    box-shadow:none;
}
nav .container .nav-item .nav-link {
   font-size:17px;
   margin-right:20px;
   color:rgba(0, 0, 0, 0.755);
} 
@media (max-width :991px){
   nav .container .nav-item .nav-link  {
      padding:20px;
      /* background-color:red; */
      margin-top:17px;
   }
}
/* end  navbar */
/* start slider */
.carousel .carousel-inner .carousel-item {
   position: relative;
}
@media (max-width:992px){
   .carousel button {
      display:none;
    }
}
.carousel .carousel-inner .carousel-item::before { 
   content:"";
   position:absolute;
   top:0;
   left:0;
   background-color: rgba(0, 0, 0, 0.5);
   width:100%;
   height:100%;
}

.carousel .carousel-inner .carousel-item img {
   height:700px;
}
.carousel .carousel-inner {
   position:relative;
}
.carousel .carousel-inner  .carousel-content {
   position:absolute;
   left:10%;
   top:45%;
   color:#eee;
}
.carousel .carousel-inner  .carousel-content  h1 { 
   font-size: 30px;
   margin-bottom:10px;
   letter-spacing:2px;
   font-weight:bold;
   color:white;
   line-height:1.5;
   max-width:85%;
}
@media (max-width:800px){
   .carousel .carousel-inner  .carousel-content  h1 { 
      font-size:25px;
   }
}
.carousel .carousel-inner  .carousel-content  h2 { 
    color: #fff;
    font-size:35px;
    font-weight: 600;
    margin-top:0px;
    text-transform:none;
    letter-spacing:2px;
    margin-bottom:20px;
    max-width:85%;

}
@media (max-width:800px){
   .carousel .carousel-inner  .carousel-content  h2 { 
      font-size:25px;
   }

}
.carousel .carousel-inner  .carousel-content  p { 
    color: #fff;
    font-size:30px;
    font-weight: 600;
    margin-top:0px;
    text-transform:none;
    letter-spacing:2px;
    margin-bottom:20px;
    max-width:85%;
}
.carousel .carousel-inner  .carousel-content  span { 
    color: #fff;
    font-size:30px;
    font-weight:bolder;
    margin-top:0px;
    text-transform:none;
    letter-spacing:2px;
    margin-bottom:20px;
}
/* end slider */
/* start about */
.about {
   padding-top:var(--section-padding);
   padding-bottom:var(--section-padding);
}
.about p {
   text-align:center;
   margin-top:50px;
   font-size:28px;
   font-weight:bold;
   color: #555;
   letter-spacing:1px;
   line-height:1.7;
   max-width:75%;
   margin:50px auto 0;
}
.about .container {
   margin-top:100px;
}
.about .container .row .info h3 {
   text-align:center;
   color: #0d6efd;
   font-size:36px;
   font-weight:600;
   letter-spacing:1.6px;
}
@media (max-width:667px){
   .about .container .row .info h3 {
      font-size:27px;
      max-width:80%;
      margin:auto;
      line-height:1.7;
   }
}
.about .container .row .info p {
    max-width:80%;
    font-size:20px;
    font-weight:normal;
    color:rgba(0, 0, 0, 0.8);
    display:flex;
    justify-content:flex-end;
    text-align:justify;
    direction:rtl;
    line-height:1.7;
}

.about .container .row  .image {
   display:flex;
   align-items:center;
   justify-content:center;
   height:100%;
   margin-bottom:150px;
}
.about .container .row  .image img {
   width:300px;
   height:300px;
}
.about .main-parg {
   padding:40px;
   margin-top:50px;
   text-align:center;
   background-color:red;
   font-size:25px;
   color:white;
   line-height:2;
   font-weight:700;
   letter-spacing:2px;
}
/* end about */
/* start details */
.details {
   padding-top:var(--section-padding);
   padding-bottom:var(--section-padding);
}
.details .main-title {
   max-width:80%;
   margin: 0 auto 20px;
   line-height:1.7;
}
@media (max-width:992px){
   .details .main-title {
      font-size:28px;
   }
}
.details p {
   text-align:center;
   padding: 20px 0px;
   font-size:18px;
   font-weight:bold;
   color: #555;
   max-width:80%;
   margin:auto;
   line-height: 2;
}
@media (max-width:992px){
   .details p {
      font-size:17px;
      line-height:1.6;
      font-weight: normal;
   }
}
.details .container {
   margin-top:100px  ;
}
.details .container .row .info {
   margin-bottom:100px;
}
.details .container .row .info h3 {
   position: relative;
   max-width:80%;
   margin-left:60px;
   font-size:20px;
   color:black;
   letter-spacing:1px;
}
.details .container .row .info h3::before {
   content:"";
   position:absolute;
   bottom:-20px;
   width:60px;
   height:2px;
   background-color:red;
}
.details .container .row .info p {
   text-align: justify;
   direction:rtl;
   line-height:1.8;
   font-weight:normal;
   font-size:18px;
   margin-bottom:50px;
   color:black;
}
.details .container .row .images {
   display:flex;
   flex-direction:column;
   justify-content:flex-end;
   text-align:center;
   align-items:center;
}
.details .container .row .images img {
    width:280px;
    margin-bottom:100px;
}
/* end details */
/* start services */
.services {
   padding-top:var(--section-padding);
   padding-bottom:var(--section-padding);
   background-color:#eee;
}
.services .main-title::before {
   width:130px;
   bottom:-25px;
}
@media (max-width:992px){
   .services .main-title {
      font-size:25px;
      max-width:80%;
      margin:auto;
      line-height:2;
      letter-spacing:1px;
   }
}
.services p {
   margin-top:40px;
   text-align:center;
   font-size:20px;
   max-width:80%;
   margin:60px auto;
   line-height:2;
   text-align:center;
   direction:rtl;
}
@media (min-width:992px){
   .services p {
      max-width:50%;
   }
}
.services .container .row .services-box {
   background-color:white;
   box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);
   border-bottom-left-radius:5px;
   border-bottom-right-radius:5px;
   overflow:hidden;
   margin-bottom:30px;
   max-height:500px;
}

.services .container .row .services-box  .image{
   width:100%;
   max-width:100%;
}
.services .container .row .services-box .image img {
   width:100%;
   border-top-left-radius:5px;
   border-top-right-radius:5px;
   height:500px;
}
.services .container .row .services-box p {
   margin:0;
   padding:10px;
   margin:auto;
   letter-spacing:2px;
}
.services .container .row .fur-details {
   direction:rtl;
   line-height:2;
   margin:40px auto 40px;
   background-color:red;
   color:white;
   border-radius:5px;
}
.services .container .row .fur-details p { 
   /* background-color:blue; */
   text-align:right;
   font-size:25px;
   letter-spacing:2px;
   margin:0 auto 0;
   padding:15px 0;
}
.services .container   .more-details { 
   background-color:red;
   color:white;
   padding:10px;
} 
.services .container   .more-details p { 
   text-align:justify;
   font-size:22px;
   line-height:2;
   /* letter-spacing: 2px; */
}
.services .container   .more-details .links {
   text-align:center;
   padding-bottom:30px;
}
.services .container   .more-details  a{ 
    padding:10px 20px;
    background-color:#0d6efd;
    color:white;
    text-align:center;
    border-radius:3px;
    margin-right:20px;
    width:20px;
    text-decoration: underline;
}
.services .container   .more-details  a:nth-child(1) {
   background-color: #25d366;
} 

/* end services */
/* start contact */
.contact {
   padding-top:var(--section-padding);
   padding-bottom:var(--section-padding);
}
.contact p {
   font-size:30px;
   text-align:center;
   margin-top:30px;
   color:#777;
   line-height:2;
   font-weight:bold;
   text-align: center;
   max-width:60%;
   margin: auto;
}
.contact .container  {
   margin-top:100px;
}
.contact .container .row .contact-info {
   margin-bottom:80px;
}
.contact .container .row .contact-info .links {
 margin-top:40px;
 display:flex;
 flex-direction: column;
 font-size:17px;
}
.contact .container .row .contact-info .links .link {
  margin-bottom:40px;
  line-height:2;
  color:#555;
  display:flex;
  align-items:center;
}
.contact .container .row .contact-info .links .link i {
  margin-right:25px;
  font-size:20px;
}
.contact .container .row .contact-info .links .link .fa-brands.fa-whatsapp {
   font-size:30px;
   color:#25d366;
}
.contact .container .row .contact-info .links .link .fa-solid.fa-phone {
   color:#337ab7;
}
.contact .container .row .contact-info .links .link .fa.fa-map-marker-alt {
   font-size:26px;
   color:#337ab7;
}
.contact .container .row .contact-info .links .link .fa-brands.fa-whatsapp {
   font-size:30px;
   color:#25d366;
}
.contact .container .row .contact-info .links .link .fa-brands.fa-instagram {
   font-size:30px;
   color:#F56040;
}
.contact .container .row .contact-info .links .link   span{
   color: #0d6efd;
}
.contact .container .row .contact-form  {
   direction:rtl;
}
.contact .container .row .contact-form  form input{
   padding:5px;
   margin-bottom:15px;
   border-radius:3px;
   outline:none;
   border:1px solid #555;
   width:100%;
   padding:10px;
}
.contact .container .row .contact-form  form textarea {
   height:200px;
   width:100%;
   outline:none;
   border:1px solid #555;;
   resize:none;
   padding:10px;
}
.contact .container .row .contact-form  form   button{
   color:red;
   padding: 15px 50px;
   border:none;
   border-radius:3px;
   margin-top:10px;
   width:100%;
}
.contact .container .row .contact-form  form   button:hover {
   background-color:red;
   color:white;
}
/* end contact */

/* start footer */
.footer {
   padding:40px 0;
   text-align:center;
   font-size:20px;
   background-color: rgba(0 , 0 , 0 , 0.04);
}
.footer a {
   color: red;
}
/* end footer */
 /* start contact-link */
  .main-link {
   position:fixed;
   right:25px;
   width:60px;
   height:60px;
   border-radius:50%;
   background-color: #25d366;
   display:flex;
   align-items:center;
   justify-content:center;
   box-shadow: 3px 3px 3px #999;
 } 
 .main-link.first { 
    bottom:20px;
    font-size:20px;
    color:#fff;
 }
 .main-link.last { 
    bottom:88px;
    font-size:28px;
    color:#fff;
 }
.main-link.first:hover , .main-link.last:hover{
  color: #337ab7;
} 
 /* end contact-link */