@import "style.css";

@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;300;400;500;600;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       : 'Lexend Deca', sans-serif;
}

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



.point {
    cursor: pointer;
}

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

.tiny_font {
    font-size: 14px
}

.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  : #18619b;
    --second--color: #fff;
    --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);
}

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

.main_link:hover {
    color: #000;
}

.my_opacity {
    opacity: 0.5;
}

.main_letter {
    letter-spacing: 1.9px;
}

/*start main_slider*/
/* .main_slid .slide{
    height: 86vh !important;
}
.main_slid .slide .carousel-inner{
    height: 86vh !important;
} */

.carousel-indicators {
    background-color: var(--main--color);
    padding         : 15px;
    margin          : auto !important;
    width           : 100%;
    bottom          : -8px;
}

.main_slid .in_slide {
    position: absolute;
    width   : 100%;
    height  : 100%;
    top     : 0px;
    left    : 0px;
}

.main_slid .in_slide h2 {
    color         : var(--second--color);
    text-transform: uppercase;
    line-height   : 1.6;
    letter-spacing: 1.9px;
    font-weight   : 400 !important;
}


.main_slid .arrow_main {
    width          : 40px;
    height         : 70px;
    display        : flex;
    justify-content: center;
    align-items    : center;
    border         : 2px solid var(--second--color);
}

.main_slid .carousel-control-next:focus,
.main_slid .carousel-control-next:hover,
.main_slid .carousel-control-prev:focus,
.main_slid .carousel-control-prev:hover,
.carousel-control-next,
.main_slid .carousel-control-prev {
    width: 40%;
}

.carousel-indicators [data-bs-target] {
    width        : 8px;
    height       : 8px;
    border-radius: 50%;
    border       : 1px solid #FFF;
    opacity      : 1;
    background   : transparent;
}

.carousel-indicators .active {
    width        : 25px;
    height       : 8px;
    border-radius: 30px;
    border       : 1px solid #FFF;
    background   : #FFF;
}

/* start provide */
.link_i {
    display        : block;
    position       : relative;
    font-size      : 16px;
    color          : var(--main--color);
    text-decoration: none;
    cursor         : pointer;
}

.link__3:before {
    content         : "";
    width           : 0;
    height          : 2px;
    background-color: var(--main--color);
    position        : absolute;
    top             : 100%;
    left            : 0;
    transition      : width 0.4s ease-in-out;
}

.link__3:after {
    content    : "→";
    position   : relative;
    display    : inline-block;
    margin-left: 4px;
    transform  : rotate(-45deg);
    transition : margin 0.4s ease-in-out, transform 0.4s ease-in-out, color 0.4s ease-in-out;
}

.link__3:hover:before {
    width  : 100%;
    z-index: -1;
}

.link__3:hover:after {
    color      : var(--main--color);
    margin-left: 15px;
    transform  : rotate(0deg);
}

/* start about */
.about .text_about {
    background-color: var(--second--color);
    padding         : 30px 30px;
    text-align      : center;
}

.offset {
    box-shadow: 0.4em 0.4em 0 0 var(--main--color), inset 0.3em 0.3em 0 0 var(--main--color);
}

.offset:hover,
.offset:focus {
    box-shadow: 0 0 0 0 var(--main--color), inset 6em 3.5em 0 0 var(--main--color);
}

.offset {
    background : none;
    border     : 2px solid;
    font       : inherit;
    line-height: 1;
    margin     : 0.5em;
    padding    : 1em 2em;
    color      : var(--main--color);
    font-weight: 500;
    font-size  : 18px;
    transition : 0.4s;
}

.offset:hover,
.offset:focus {
    border-color: var(--main--color);
    color       : var(--second--color);
}

/* start divisions */
.in_divisions {
    transition   : all 0.3s ease-in-out;
    border       : 1px solid transparent;
    border-radius: 10px;
    overflow     : hidden;
    cursor       : pointer;
    margin       : 30px 0px;
}

.in_divisions:hover {
    border    : 1px solid var(--main--color);
    box-shadow: 0px 0 25px 2px #8b8b8b;
}

.in_divisions:hover img {
    transform : rotate(5deg) scale(1.2);
    transition: all 0.3s ease-in-out;
}

.in_divisions .img_divisions {
    overflow  : hidden;
    transition: all 0.3s ease-in-out;
}

.in_divisions .text_divisions h5,
.in_divisions .img_divisions img {
    transition: all 0.3s ease-in-out;
}

.in_divisions:hover h5 {
    color: var(--main--color);
}

.emcan:hover{
    color: red !important;
}

/* start contact */
.in_contact {
    background-image       : url('../img/Group.html\ 135.png');
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
}


form .offset {
    box-shadow: 0.4em 0.4em 0 0 var(--main--color), inset 0.3em 0.3em 0 0 var(--main--color);
}

form .offset:hover,
form .offset:focus {
    box-shadow: 0 0 0 0 var(--main--color), inset 6em 3.5em 0 0 var(--main--color);
}

form .offset {
    background : none;
    border     : 2px solid;
    font       : inherit;
    line-height: 0.5;
    margin     : 0.5em;
    padding    : 0.5em 2em;
    color      : var(--main--color);
    font-weight: 500;
    font-size  : 16px;
    transition : 0.4s;
}

form .offset:hover,
form .offset:focus {
    border-color: var(--main--color);
    color       : var(--second--color);
}

.imgHover:hover {
    opacity   : 0.7;
    transition: all 0.5s;
}


@-webkit-keyframes AnimationName {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-moz-keyframes AnimationName {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes AnimationName {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.m-backtotop {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
    position          : fixed;
    bottom            : -50px;
    right             : 30px;
    width             : 50px;
    height            : 50px;
    background        : #222;
    border-radius     : 25px;
    text-align        : center;
    border            : 2px solid #fff;
    box-shadow        : 0 2px 3px rgba(0, 0, 0, 0.1);
    opacity           : 0;
    overflow          : hidden;
    color             : #fff;
}

.m-backtotop.active {
    bottom : 15px;
    opacity: 1;
}

.m-backtotop>div {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.m-backtotop>div.arrow {
    position : absolute;
    top      : 50%;
    left     : 50%;
    transform: translateY(-50%) translateX(-50%);
    opacity  : 1;
}

.m-backtotop>div.text {
    font-size     : 5px;
    font-size     : 0.5rem;
    line-height   : 10px;
    text-transform: uppercase;
    font-weight   : 900;
    font-family   : "Open Sans", sans-serif;
    position      : absolute;
    left          : 50%;
    top           : 50%;
    transform     : translateY(50%) translateX(-50%);
    opacity       : 0;
    margin-top    : 1px;
}

.m-backtotop:hover {
    transform : scale(1.1);
    bottom    : 20px;
    cursor    : pointer;
    background: black;
    box-shadow: 0 10px 5px rgba(0, 0, 0, 0.1);
}

.m-backtotop:hover>div.arrow {
    transform: translateY(-150%) translateX(-50%);
    opacity  : 0;
}

.m-backtotop:hover>div.text {
    transform: translateY(-50%) translateX(-50%);
    opacity  : 1;
}

/* start provide page */
.bread {
    background-image       : url('../img/Group.html\ 129.png');
    -webkit-background-size: cover;
    -moz-background-size   : cover;
    -o-background-size     : cover;
    background-size        : cover;
    padding                : 5px;
}

.bread .wrapper {
    width: 100%;
    background: transparent;
    margin: 3% auto;
    padding: 1.5em;
    /* box-shadow: 0px 1px 3px #ddd; */
  }

  .bread ul {
    list-style-type: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    direction: ltr !important; /*this is new*/
  }

  .bread li {
    padding: 0;
    margin: 0;
  }
  .bread li a {
    color: var(--main--color);
    text-decoration: none;
    padding: 10px 0 10px 55px;
    background: #ffffffe8;
    position: relative;
    display: flex;
    font-size: 20px;
  }
  .bread li a:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 45px solid #ffffffba;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2;
  }
  .bread li a:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 30px solid transparent;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 6px;
    left: 100%;
    z-index: 1;
  }
  .bread li:first-child a {
    padding-left: 15px;
  }
  .bread li.active a {
    color: var(--main--color);
    background: #cfdeffa9;
  }
  .bread li.active a:after {
    border-left-color: #cfdeffa9;
  }

  /* /////////////////////////////// */
  .position_what{
    bottom: 15%;
    margin: auto;
  }

  .client_img{
    border: 1px solid var(--second--color);
    cursor: pointer;
    box-shadow: 0 10px 5px rgba(0, 0, 0, 0.1);
    margin: 10px;
  }