@import "style.css";

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


/*default class*/
body {
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
    -o-box-sizing     : border-box;
    box-sizing        : border-box;
    font-family       : 'Tajawal', sans-serif;
    direction         : rtl;
}

.transition-me {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.index_over {
    z-index: 1000
}

.form-select:focus {
    border-color: none;
}

button:focus:not(:focus-visible),
button,
select,
input,
textarea {
    outline: none;

}

.rounded {
    border-radius: 5px !important
    
}
.border-2{
        border-radius: 15px;
    border-color: #bfa023 !important;
}
.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover,
.carousel-control-next,
.carousel-control-prev {
    opacity: 1;
    width  : 8%;
}

.point {
    cursor: pointer;
}

.row {
    margin-right: 0px;
    margin-left : 0px;
}

.tiny_font {
    font-size: 16px
}

.back_me {
    background: transparent
}

fieldset {
    display     : block;
    border-width: 2px !important;
    border-style: groove !important;
    border-color: transparent !important;
    border-image: initial !important;
}

fieldset>legend {
    margin-left: 30px
}

legend {
    float: none;
    width: auto
}

.container,
.navbar>.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    padding: 0px 50px;
}

/*main-class*/
:root {
    --main--color  : #bd9a12;
    --second--color: #216b7c;
    --third--color : #000;
}

.main_color {
    color: var(--main--color);
}

.second_color {
    color: var(--second--color);
}

.third_color {
    color: var(--third--color);
}

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

.second_bg {
    background: var(--second--color);
}

.third_bg {
    background: var(--third--color);
}

.title {
    text-align: center;
}

.main_bt {
    color           : #FFF;
    background-color: var(--second--color);
    border-radius   : 10px;
}

.main_bt:hover {
    color           : #FFF;
    background-color: var(--main--color);
}

.second_bt {
    color           : #FFF;
    background-color: var(--main--color);
}

.second_bt:hover {
    color           : #FFF;
    background-color: var(--third--color);
}

.main_border {
    border: 1px solid var(--second--color);
}

/*start about*/
.in_boat {
    background             : url('../img/Mask\ Group\ 24.png');
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
    width                  : 100%;
    height                 : 100%;
}

/* start news */

.news .carousel-control-next:focus,
.news .carousel-control-next:hover,
.news .carousel-control-prev:focus,
.news .carousel-control-prev:hover,
.news .carousel-control-next,
.news .carousel-control-prev {
    opacity: 1;
    width  : 6%;
}

.in_news {
    background-color: #cdb54fab;
    padding         : 10px;
    position        : absolute;
    bottom          : 10px;
    right           : 10px;
    width           : 100%;
    height          : 22%;
    color           : #FFF;
}

.on_news:hover .in_news {
    height            : 45%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

/* start newsletter */
.newsletter {
    background             : url('../img/Group\ 306.png');
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
}

/* start donations */
.in_projects,
.in_donations.shadow.p-3 {
    border-radius: 15px ;
    border-color:#bfa023 !important;
}

/* start archive */
.archives .carousel-indicators {
    bottom: -40px;
}

.archives .carousel-indicators [data-bs-target] {
    height       : 10px;
    width        : 10px;
    border-radius: 50%;
    border       : 1px solid var(--second--color);
    opacity      : 1;
}

.archives .carousel-indicators .active {
    background-color: var(--second--color);
}

/* start request */
.bread {
   // background             : url('../img/Group\ 307@2x.png');
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
}

.bread .breadcrumb-item a {
    text-decoration: none;
    color          : var(--third--color);
    font-size      : 28px;
    font-weight    : bold;
}

.bread li.breadcrumb-item.active {
    color      : var(--third--color);
    font-size  : 28px;
    font-weight: bold;
}

.bread .breadcrumb-item a::after {
    float        : left;
    padding-right: 0.7rem;
    padding-left : 0.7rem;
    content      : var(--bs-breadcrumb-divider, "/");
    font-size    : 28px;
    font-weight  : bold;
    color        : var(--third--color);
}

.bread .breadcrumb-item+.breadcrumb-item::before {
    content: none;
}

.breadcrumb {
    direction: rtl;
}

.left_border {
    border-left: 1px solid var(--second--color);
}

.current-inside.p-4.shadow.text-center {
    display: none
}
.translations .m-3.p-3.shadow.rounded:hover,
.project .m-3.p-3.shadow.rounded:hover,
.in_archives:hover,
.in_donations.shadow.p-3:hover,
.in_projects.my-3.p-3.shadow:hover {
    cursor            : pointer;
    background-color  : #a1eeff3a;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}
.translations .m-3.p-3.shadow.rounded:hover h4,
.project .m-3.p-3.shadow.rounded:hover h4,
.in_archives:hover h4,
.in_donations.shadow.p-3:hover h4,
.in_projects.my-3.p-3.shadow:hover h5 {
    color             : var(--main--color);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.on_news.position-relative.rounded.overflow-hidden {
    cursor: pointer;
}

   .img-card img {
    transition: all 0.8s ease;
}
 .img-card img:hover {
    transform: scale(1.1);
    transform-origin: 50% 50%;
    cursor: pointer;
}
.in_news {

        bottom: -75%;
}
.in_news p{

       opacity: 0;
}
.on_news:hover .in_news {
        bottom: -15%;

}
.on_news:hover .in_news p{
opacity: 1;

}

.bread .breadcrumb-item a::after {
    color: white;
}
.breadcrumb-item a{
    color:white !important;
}
.breadcrumb-item.active{
        color:white !important;

}
    .h4, h4 {
        font-size:22px;
    }
    
    div:has(.img-card) p{
  height:68px ;
  overflow-y: auto;
  font-size:15px;
}
.icon-absolute{
    top: 22px; right: 15px;
}


::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.link_footerhas(p) {
    color: #216b7c !important;
}
  @media only screen and (max-width: 700px)  {
      p{
          font-size:16px !important;
      }
            p span{
          font-size:16px !important;
      }
      
      .icon-absolute{
    top: 10px; 
}
.input-group input{
    width:100% !important;
}
.input-group textarea{
        width:100% !important;

}
.navbar-brand img{
    max-width:100%;
}
      
}