@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: Calibri, Verdana, Helvetica, 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
}

.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  : 9%;
}

.point {
    cursor: pointer;
}

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

.tiny_font {
    font-size: 15px
}

.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
}

/*main-class*/
:root {
    --main--color  : #255c8b;
    --second--color: #fff;
    --third--color : #000;
}

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

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

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

.yellow_color {
    color: var(--yellow--color);
}

.blue_color {
    color: var(--blue--color);
}

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

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

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

.main_bt {
    color           : var(--main--color);
    background-color: var(--second--color);
    border          : 1px solid var(--main--color);
}

.main_bt:hover {
    color           : var(--second--color);
    background-color: var(--main--color);
    border          : 1px solid var(--main--color);

}

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

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

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

.con_bt:hover {
    background-color: var(--third--color);
    color           : var(--second--color);
}

.third_bt {
    color           : var(--third--color);
    background-color: #838383;
}

.third_bt:hover {
    color           : var(--third--color);
    background-color: #000;
}

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

.main_link:hover {
    color: var(--second--color);
}

.second_link {
    color: #22c4ff;
}

.second_link:hover {
    color: #FFF;
}


.light_color {
    color: #AAA;
}

.main_border {
    border: 2px solid var(--main--color)
}

.our_opacity {
    opacity: 0.6;
}

.my_round {
    border-radius: 30px;
}

/*start main_slider*/
.carousel-indicators {
    bottom: -60px;
}

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

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

/* start vision */
.vision {
    background-image       : url("../img/Group\ 298.png");
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
}

/* start messsage */
.goals .in_in_goal,
.message .in_message {
    background-image       : url("../img/Mask\ Group\ 13.png");
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
}

/* start value */
.in_values {
    border    : 2px solid var(--main--color);
    cursor    : pointer;
    text-align: center;
    padding   : 20px 0px;
}

.in_values h5 {
    color     : var(--main--color);
    margin-top: 15px;
}

.in_values:hover {
    background-color  : rgba(0, 0, 0, 0.2);
    -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;
}

.in_values:hover h5 {
    color             : var(--second--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;
}

/* start goal */
.goals .in_goals ul li:before {
    content      : "";
    width        : 0;
    height       : 0;
    border-width : 6px;
    border-style : solid;
    border-color : var(--main--color);
    position     : absolute;
    right        : -20px;
    top          : 5px;
    border-radius: 50%;
}


/* start The organization's goals */
.breadcrumb-item+.breadcrumb-item::before {
    float    : right;
    padding  : 0 0.5rem;
    font-size: 22px;
}

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

.right_border {
    border-right: 1px solid var(--main--color);
}