@charset "UTF-8";

/* CSS Document */

/*------------------------------------------------------------------

Template Name:      Focal Point Design
Version:            1.0.0
Created Date:       4/02/2023
Author:             Mohamed Elshadid 

------------------------------------------------------------------ */

/* Setting */
:root
{
    --mainColor: #45aae0;
    --white: #fafafa;
    --black: #383838;
}

@font-face {
    font-family: Ithra-Light;
    src: url(../fonts/Ithra_Light/Ithra-Light.ttf);
}
@font-face {
    font-family: Ithra-Bold;
    src: url(../fonts/Ithra_Bold/Ithra-Bold.ttf);
}

.Ithra-Light{
    font-family: Ithra-Light !important;
}
.Ithra-Bold{
    font-family: Ithra-Bold !important;
}

*
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
body{
    background-color: var(--white);
}
.container-fluid{
    width: 90% !important;
}

/* Header */
.img{
    width: 100%;
    /* margin: 60px; */
}
.img img,.logo img,.logo2 img{
    width: 100%;
    height: 100%;
}
.logo{
    width: 180px;
    margin: auto;
}
.logo2{
    width: 130px;
    margin: auto;
}
/* End Navbar */
.feature_img{
    width: 120px;
    display: block;
    margin: auto;
    padding: 10px;
    border-radius: 50%;
    margin-bottom: 30px;
    text-align: center;
    height:125px;
}
.feature_img img{
    width: 100%;
}
.featureBox{
    width: 90%;
    word-break: break-word;
    position: relative;
}

.footer{
    margin-top: 50px;
    padding: 10px;
    margin-bottom: 50px;
    box-shadow: 0px 2px 4px 1px #ccc;
    border-radius: 0 0 20px 20px;
}
h3,h5{
    color: var(--mainColor);
}
.text_feat{
    font-size: 50px;
    margin: 0;
    display: inline-block;
    color: var(--mainColor);
}
.text_feat:before {
    display: block;
    content: "";
    width: 29px;
    height: 29px;
    position: relative;
    top: 33px;
    left: -9px;
    border-top: 2px solid var(--mainColor);
    border-left: 2px solid var(--mainColor);
}
.text_feat:after {
    display: block;
    content: "";
    width: 33px;
    height: 28px;
    position: relative;
    bottom: 43px;
    right: -145px;
    border-bottom: 2px solid var(--mainColor);
    border-right: 2px solid var(--mainColor);
}
.main:nth-child(1) .featureBox:before{
    border-left:none;
}
.featureBox:before {
    content: "";
    height: 69%;
    width: 1px;
    position: absolute;
    left: -25px;;
    top: 66px;
    border-left: 2px solid var(--mainColor);
}
.read_more,
.read_more:hover,
.read_more:active,
.read_more:focus{
    background-color: var(--mainColor) !important;
    width: 120px;
    border-radius: 15px;
    color: var(--white) !important;
    padding: 8px;
}
.read_more:hover{
    background-color: var(--white) !important;
    color: var(--mainColor) !important;
    border: 1px solid var(--mainColor);
}
/*-----------------------------
  Back to top with progress indicator
-----------------------------*/
.prgoress_indicator {
    position: fixed;
    right: 50px;
    bottom: 50px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgb(225 223 223);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transform: translateY(15px) !important;
    -moz-transform: translateY(15px) !important;
    -o-transform: translateY(15px) !important;
    -ms-transform: translateY(15px) !important;
    transform: translateY(15px) !important;
    -webkit-transition: all 200ms linear !important;
    -moz-transition: all 200ms linear !important;
    -o-transition: all 200ms linear !important;
    -ms-transition: all 200ms linear !important;
    transition: all 200ms linear !important;
  }
  .prgoress_indicator.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0) !important;
    -moz-transform: translateY(0) !important;
    -o-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    transform: translateY(0) !important;
  }
  .prgoress_indicator::after {
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    content: "\f062";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: var(--mainColor);
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 200ms linear !important;
    -moz-transition: all 200ms linear !important;
    -o-transition: all 200ms linear !important;
    -ms-transition: all 200ms linear !important;
    transition: all 200ms linear !important;
  }
  .prgoress_indicator::before {
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    content: "\f062";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    opacity: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 2;
    -webkit-transition: all 200ms linear !important;
    -moz-transition: all 200ms linear !important;
    -o-transition: all 200ms linear !important;
    -ms-transition: all 200ms linear !important;
    transition: all 200ms linear !important;
  }
  .prgoress_indicator:hover::after {
    color: var(--mainColor);
  }
  .prgoress_indicator:hover:before {
    opacity: 1;
  }
  .prgoress_indicator svg path {
    fill: none;
  }
  .prgoress_indicator svg.progress-circle path {
    stroke: var(--mainColor);
    stroke-width: 4;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear !important;
    -moz-transition: all 200ms linear !important;
    -o-transition: all 200ms linear !important;
    -ms-transition: all 200ms linear !important;
    transition: all 200ms linear !important;
  }