:root{


  --primary-color: #52B788;


  --secondary-color: #06416A;


  /* --gray-color: #555770; */


  --gray-color: #8492A7;


  --white-color: #FFFFFF;


}


@font-face {


  font-family: "LamaRounded";


  src: url("./font/Lama-Rounded/Fonts/Web/Standard/LamaRounded-Regular.woff") format("woff");


  font-style: normal;


}


*{


  padding: 0;


  margin: 0;


}


html{


  scroll-behavior: smooth;


}


html , body{


  width: 100%;


  height: 100%;


  background-color: #FFFFFF;


  /*-webkit-user-select: none;


  -webkit-touch-callout: none;


  -moz-user-select: none;


  -ms-user-select: none;


  user-select: none;*/


}


body,h1,h2,h3,h4,h5,h6,span,label,a,small,p,u,i,ul,li,div,sub,sup{


  font-family: "LamaRounded" , sans-serif !important;


}


.line-height{


  line-height: 0.8cm;


}


.arabic{


  direction: rtl;


  text-align: right;


}


.english{


  direction: ltr;


  text-align: left;


}


::selection {


  color: var(--white-color);


  background: var(--primary-color);


}


/* Start Scrollbar */


  /* width */


  ::-webkit-scrollbar {


    width: 7px;


    height: 6px;


  }


  


  /* Track */


  ::-webkit-scrollbar-track {


    background: #f1f1f1; 


    border-radius: 10px;


  }


    


  /* Handle */


  ::-webkit-scrollbar-thumb {


    background: var(--secondary-color);


    border-radius: 10px;


  }


  


  /* Handle on hover */


  ::-webkit-scrollbar-thumb:hover {


    background: var(--primary-color); 


  }


/* End Scrollbar */


.text-color-green{


  color: var(--primary-color);


}


.text-color-blue{


  color: var(--secondary-color);


}


.text-color-gray{


  color: var(--gray-color);


}


.text-justify{


  text-align: justify;


}


.text-center{


  text-align: center;


}


.navbar{


  border-bottom: 1px solid #F4F2F2 !important;


  background: #F9FBFE !important;


  padding: 10px;


}


.navbar-logo{


  width: 130px;


}


.nav-link{


  color: var(--secondary-color);


  transition: all ease .5s;


}


.nav-link:hover{


  color: var(--primary-color);


  /*font-size: 16.5px;*/


}


.nav-link.active{


  color: var(--primary-color) !important;


  /* border-bottom: 1px solid var(--secondary-color);


  width: fit-content; */


}


.green-btn{


  width: auto;


  color: var(--white-color);


  background-color: var(--primary-color);


  padding: 10px;


  border: 0;


  border-radius: 12px;


  box-shadow: 0px 10px 15px 0px rgba(200, 219, 255, 0.10);


}


.green-outline-btn{


  width: auto;


  color: var(--primary-color);


  background-color: #E8FFF4;


  padding: 10px;


  border: 0;


  border-radius: 12px;


  box-shadow: 0px 10px 15px 0px rgba(200, 219, 255, 0.10);


}


.gradiant-btn{


  width: auto;


  color: var(--white-color);


  background: var(--Gradiant-01, linear-gradient(93deg, #52B788 -17.89%, #00416B 107.06%));


  padding: 10px;


  border: 0;


  border-radius: 12px;


  box-shadow: 0px 10px 15px 0px rgba(200, 219, 255, 0.10);


  transition: all ease-in-out .5s;


  text-decoration: none;


}


.gradiant-btn:hover{


  /*padding: 10px 15px 10px 15px;*/


  padding: 15px;


}


.orange-line-left:after{


  content: "";


  display: block;


  height: 26px;


  background-image: url(../../uploads/images/orange-line.svg);


  background-repeat: no-repeat;


  background-position: left;


  background-size: 50% 50%;


}


.orange-line-center:after{


  content: "";


  display: block;


  height: 26px;


  background-image: url(../../uploads/images/orange-line.svg);


  background-repeat: no-repeat;


  background-position: center;


  background-size: 50% 50%;


}


.width-fit-content{


  width: fit-content;


}


.justify-content-center{


  justify-content: center;


}


.justify-content-left{


  justify-content: left;


}


.text-right{


  text-align: right;


}


.text-left{


  text-align: left;


}


.competition-card{


  width: 100%;


  min-height: 12cm;


  height: auto;


  border-radius: 15px;


  padding: 10px;


  background-repeat: no-repeat;


  background-size: 100% 40%;


  cursor: pointer;


  /*box-shadow: 1px 1px 6px 1px rgba(132,146,167,0.78);


  -webkit-box-shadow: 1px 1px 6px 1px rgba(132,146,167,0.78);


  -moz-box-shadow: 1px 1px 6px 1px rgba(132,146,167,0.78);*/


  box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


  -webkit-box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


  -moz-box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


}


.competition-card-title{


  position: relative;


  top: 4.0cm;


  /* right: 140px; */


  right: 55%;


  width: auto;


  background-color: var(--secondary-color);


  color: var(--white-color);


  padding: 10px 15px 10px 15px;


  border-radius: 20px;


  font-size: 12px;


}


.competition-card-text{


  position: relative;


  top: 3.5cm;


  padding: 10px;


}


footer{


  background-color: #F9FBFE;


  padding: 30px;


}


.footer-logo{


  width: 150px;


}


footer ul{


  list-style: none;


  padding-right: 0;


  padding-top: 5px;


}


footer ul li{


  padding-top: 8px;


}


footer ul li a{


  text-decoration: none;


  color: var(--secondary-color);


  transition: all ease .5s;


}


footer ul li a:hover{


  font-size: 17px;


}


.testimonial-button-div{


  /* background-color: #F9FBFE; */


  padding: 10px;


  /* border-radius: 15px; */


  text-align-last: center;


}


.testimonial-card{


  width: auto;


  height: 100%;


  border-radius: 15px;


  padding: 15px;


  margin: 2px !important;


  box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


  -webkit-box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


  -moz-box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


}


.testimonial-card-text{


    height: 11cm;


    overflow: auto;


}


.testimonial-image{


  width: 50px !important;


  height: 50px;


  border-radius: 50%;


  float: left;


  object-fit: cover;


}


.back-to-up{


  display: none;


  position: fixed;


  bottom: 20px;


  left: 20px;


  width: 50px;


  height: 50px;


  border-radius: 50%;


  /* padding: 10px; */


  background-color: var(--primary-color);


  border: unset;


  outline: unset;


}


.page-title{


  display: flex;


  place-content: center;


  align-items: center;


  width: 100%;


  height: 6cm;


  background-image: url(../images/pages-title.png);


  background-position: center;


  background-size: cover;


  background-repeat: no-repeat;


}


.statistic-section{


  display: flex;


  place-content: center;


  align-items: center;


  width: 100%;


  height: 6cm;


  background-image: url(../images/statistic-image.png);


  background-position: center;


  background-size: cover;


  background-repeat: no-repeat;


}


.start-learning-section{


  display: flex;


  place-content: center;


  align-items: center;


  width: 100%;


  height: 8cm;


  background-image: url(../images/start-learning.png);


  background-position: center;


  background-size: cover;


  background-repeat: no-repeat;


  padding: 20px;


}


::placeholder{


  text-align: right !important;


  color:#ABAFB1 !important;


}


.form-control{


  background:#F6F6FB;


}


.contact-us-form , .custom-form, .profile-div{


  width: 100%;


  border-radius: 15px;


  background: #FFF;


  box-shadow: 0px 15px 30px 0px rgba(210, 217, 224, 0.35);


  padding: 20px;


}


textarea{


  height: 120px;


}


.contact-us-form input{


  padding: 15px !important;


}


.form-control:focus{


  /* background:#F6F6FB; */


  border: 1px solid var(--primary-color);


  /* box-shadow: 0px 1px 1px var(--primary-color) inset, 0px 0px 8px var(--primary-color); */


  box-shadow: unset;


}


.form-check-input:checked {


  background-color: var(--primary-color) !important;


  border-color: var(--primary-color) !important;


}


.login-div{


  padding: 20px;


  border-radius: 20px;


  background: #F9FBFE;


}


.input-password{


  position: relative;


  bottom: 33%;


  right: 91%;


  cursor: pointer;


}


.input-password-compitition, .input-file-compitition{


  position: relative;


  bottom: 50%;


  right: 92%;


  cursor: pointer;


}


.competition-form{


  width: 100%;


  border-radius: 15px;


  background: var(--white-color);


  box-shadow: 0px 15px 30px 0px rgba(210, 217, 224, 0.35);


  padding: 25px;


}


.competition-form-title{


  width: 100%;


  background-color: var(--primary-color);


  color: var(--white-color);


  padding: 20px;


  border-radius: 15px 15px 0px 0px;


  margin: 0;


}


.form-control:disabled {


  background:#F6F6FB;


}


.create-comptition-steps{


  width: 100%;


  display: flex;


  justify-content: center;


}


.create-comptition-step-blue-number{


  display: flex;


  width: 40px;


  height: 40px;


  border-radius: 50%;


  background-color: var(--secondary-color);


  color: var(--white-color);


  padding: 20px;


  place-content: center;


  align-items: center;


}


.create-comptition-step-blue-line{


  display: flex;


  /* width: 150px; */


  width: -webkit-fill-available;


  height: 5px;


  background-color: var(--secondary-color);


  border-radius: 0px;


  align-self: center;


}


.create-comptition-step-gray-number{


  display: flex;


  width: 40px;


  height: 40px;


  border-radius: 50%;


  background-color: #EFEFEF;


  color: var(--white-color);


  padding: 20px;


  place-content: center;


  align-items: center;


}


.create-comptition-step-gray-line{


  display: flex;


  /* width: 150px; */


  width: -webkit-fill-available;


  height: 5px;


  background-color: #EFEFEF;


  border-radius: 0px;


  align-self: center;


}


.create-comptition-step-blue-text{


  color: var(--secondary-color);


}


.create-comptition-step-gray-text{


  color: #EFEFEF;


}


.iti--allow-dropdown{


  width: 100% !important;


}


.compitition-image-div{


  position: relative;


}


.background-compitition-image{


  width: 85%;


}


/*.compitition-image{


  width: 85%;


  position: absolute;


  top: 20%;


  left: 35%;


  border-radius: 15px;


}*/


.compitition-image {


    width: 100%;


    position: absolute;


    top: 20%;


    left: 25%;


    border-radius: 15px;


    object-fit: cover;


}


.compitition-list{


  list-style: none;


  color: var(--secondary-color);


  font-size: 15pt;


  padding: 0;


}


.condition{


  width: 100%;


  display: flex;


}


.condition-number{


  display: flex;


  width: 45px;


  height: 45px;


  border-radius: 10px;


  padding: 15px;


  background-color: var(--primary-color);


  color: var(--white-color);


  font-weight: bold;


  place-content: center;


  align-items: center;


}


.condition-text{


  margin: 10px;


  color: var(--secondary-color);


  font-weight: bold;


}


.project-card{


    position: relative;


    width: 100%;


    min-height: 12.5cm;


    height: auto;


    border-radius: 15px;


    padding: 0px;   


    cursor: pointer;


    /*box-shadow: 1px 1px 6px 1px rgba(132,146,167,0.78);


    -webkit-box-shadow: 1px 1px 6px 1px rgba(132,146,167,0.78);


    -moz-box-shadow: 1px 1px 6px 1px rgba(132,146,167,0.78);*/


    box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


    -webkit-box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


    -moz-box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


}


.project-card-image{


    width: 100% !important;


    height: 5.5cm;


    object-fit: cover;


    border-radius: 15px 15px 0px 0px;   


}


.project-card-text{


    padding: 10px 10px 20px 10px;


}


@keyframes shake {


  0%  { transform: translate(1px, 1px) rotate(0deg); }


  10% { transform: translate(-1px, -2px) rotate(-1deg); }


  20% { transform: translate(-3px, 0px) rotate(1deg); }


  30% { transform: translate(3px, 2px) rotate(0deg); }


  40% { transform: translate(1px, -1px) rotate(1deg); }


  50% { transform: translate(-1px, 2px) rotate(-1deg); }


  60% { transform: translate(-3px, 1px) rotate(0deg); }


  70% { transform: translate(3px, 1px) rotate(-1deg); }


  80% { transform: translate(-1px, -1px) rotate(1deg); }


  90% { transform: translate(1px, 2px) rotate(0deg); }


  100% { transform: translate(1px, -2px) rotate(-1deg); }


}


.first-project{


    position: absolute;


    top: 0;


    right: 0;


    animation: shake 1.0s;


    animation-iteration-count: infinite;


}


.jury_image{


  width: 100%;


  height: auto;


  max-height: 300px;


  border-radius: 15px;


}


.competition-numbers{


  position: relative;


  bottom: 60px;


  width: 100%;


  padding: 40px;


  border-radius: 12px;


  background: #FFF;


  box-shadow: 0px 15px 30px 0px rgba(210, 217, 224, 0.35);


}


.border-right{


  border-right: 1px solid #DEE7EE;


}


.border-left{


  border-left: 1px solid #DEE7EE;


}


.project-info-card-1{


  width: 100%;


  min-height: 100% !important;


  height: auto;


  border-radius: 15px;


  /* padding: 10px; */


  cursor: pointer;


  border: 1px solid var(--Grayscale-50, #EBEEF7);


  background-color: var(--Grayscale-White, #FFF);


  box-shadow: 0px 12px 48px 0px rgba(0, 34, 51, 0.06);


}


.project-info-card-2{


  width: 100%;


  height: auto;


  padding: 15px;


  border-radius: 15px;


  border: 1px solid var(--Grayscale-50, #EBEEF7);


  background: var(--Grayscale-White, #FFF);


  box-shadow: 0px 12px 48px 0px rgba(0, 34, 51, 0.06);


}


.overley{


    border-radius: 15px;


    background: #FFFFFF;


    transition: all ease-in-out 5s;


    padding: 0;


    margin: 0px 0px 10px 0px;


    border: 0;


}


.overley:hover{


    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #51B788 100%);


}


.jury_image:hover{


    opacity: 0.4;


}


.input-group-text{


    background: #F6F6FB !important;


}


.project-image{


    width: 100%;


    height: 30vh;


    object-fit: cover;


    border-radius:15px 15px 0px 0px;


}


.project-video{


    width: 100%;


    height: 100%;


    cursor: pointer;


}


.project-modal-content{


    width: 100%;


    height: 80vh;


    border-radius: 20px;


    background-size: 100% 100%;


    background-repeat: no-repeat;


    /*background-position: center;*/


    /*background-color: var(--white-color);*/


}


.project-modal-header{


    border: unset !important;


    padding: 10px !important;


}


/* Start Splash Page */


.splash{


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    height: 100vh;


    /*background: #e9ecef;*/


    background-color:rgba(245, 249, 255, 0.5) !important;


    -webkit-backdrop-filter: blur(100px);


    backdrop-filter: blur(100px);


    z-index: 5000;


    text-align: center;


    line-height: 90vh;


}


.splash.display-none{


    position: fixed;


    opacity: 0;


    top: 0;


    left: 0;


    width: 100%;


    height: 100vh;


    /*background-color: #e9ecef;*/


    background-color:rgba(245, 249, 255, 0.5) !important;


    -webkit-backdrop-filter: blur(100px);


    backdrop-filter: blur(100px);


    z-index: -5000;


    text-align: center;


    line-height: 90vh;


    transition: all 0.5s;


}


@keyframes fadeIn{


    to{


        opacity: 1;


    }


}


.fade-in{


    opacity: 0;


    animation: fadeIn is ease-in forwards;


}


/* End Splash Page */


.accordion-button:not(.collapsed) {


    color: var(--primary-color);


    /*background-color: var(--primary-color);*/


    background-color: #F9FBFE;


    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);


}


.accordion-button-text-green:not(.collapsed) {


    color: var(--primary-color);


    /*background-color: var(--primary-color);*/


    background-color: #F9FBFE;


    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);


}


.accordion-button {


    position: relative;


    display: flex;


    align-items: center;


    width: 100%;


    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);


    font-size: 1rem;


    color: var(--secondary-color);


    text-align: right;


    background-color: var(--bs-accordion-btn-bg);


    border: 0;


    border-radius: 0;


    overflow-anchor: none;


    transition: var(--bs-accordion-transition);


    /*font-weight: bold;*/


}


.accordion-button-text-green {


    position: relative;


    display: flex;


    align-items: center;


    width: 100%;


    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);


    font-size: 1rem;


    color: var(--primary-color);


    text-align: right;


    background-color: var(--bs-accordion-btn-bg);


    border: 0;


    border-radius: 0;


    overflow-anchor: none;


    transition: var(--bs-accordion-transition);


    /*font-weight: bold;*/


}


.accordion-button-text-green:not(.collapsed)::after {


  background-image: url(../images/arrow-down.svg);


  transform: var(--bs-accordion-btn-icon-transform);


}


.accordion-button-text-green::after {


  flex-shrink: 0;


  width: var(--bs-accordion-btn-icon-width);


  height: var(--bs-accordion-btn-icon-width);


  margin-right: auto;


  content: "";


  /* background-image: var(--bs-accordion-btn-icon); */


  background-image: url(../images/arrow-down.svg);


  background-repeat: no-repeat;


  background-size: var(--bs-accordion-btn-icon-width);


  transition: var(--bs-accordion-btn-icon-transition);


}


.accordion-button:focus {


    z-index: 3;


    border-color: var(--primary-color) !important;


    outline: 0;


    /*box-shadow: var(--bs-accordion-btn-focus-box-shadow);*/


    box-shadow: var(--primary-color) !important;


}


.user-navbar-image{


    width: 40px;


    height: 40px;


    border-radius: 50%;


    object-fit: cover;


}


.cursor-pointer{


    cursor: pointer;


}


.dropdown-menu li a:hover{


    color: var(--primary-color);


}


.dropdown-menu{


    --bs-dropdown-link-active-color: var(--primary-color) !important;


    --bs-dropdown-link-active-bg: var(--secondary-color) !important;


}


.align-self-center{


  align-self: center;


}


.light-box{


  width: 100%;


  height: auto;


  padding: 15px;


  border-radius: 15px;


}


.learning-video{


  float: right;


  /*width: 200px;


  height: 150px;*/


  width: 50%;


  margin-left: 10px;


  object-fit: cover;


  border-radius: 15px;


}


.new-video-added{


  float: right;


  width: 85px;


  height: 70px;


  margin-left: 10px;


  object-fit: cover;


  border-radius: 15px;


}


.page-link{


  color: var(--secondary-color);


}


.page-link:hover{


  color: var(--primary-color);


}


.page-link.active, .active > .page-link {


  z-index: 3;


  color: var(--white-color);


  background-color: var(--primary-color);


  border-color: var(--primary-color);


}


.pricing-item-blue{


  width: 100%;


  height: 100%;


  color: var(--secondary-color);


  background-color: var(--white-color);


  padding: 15px;


  border-radius: 15px;


  box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


  -webkit-box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


  -moz-box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78); 


}


.pricing-item-green{


  width: 100%;


  height: 100%;


  color: var(--white-color);


  background-color: var(--primary-color);


  padding: 15px;


  border-radius: 15px;


  box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


  -webkit-box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78);


  -moz-box-shadow: 0px 0px 2px 0px rgba(132,146,167,0.78); 


}


.pricing-btn-blue{


  width: auto;


  padding: 10px;


  border-radius: 15px;


  color: var(--white-color);


  background-color: var(--secondary-color);


  border: unset;


  outline: unset;


  text-align: center;


}


.pricing-btn-green{


  width: auto;


  padding: 10px;


  border-radius: 15px;


  color: var(--primary-color);


  background-color: var(--white-color);


  border: unset;


  outline: unset;


  text-align: center;


}


.planning-list{


  color: var(--gray-color);


  list-style-image: url('../images/green-check-icon.svg');


}


.next-invoice{


  background-image: url("../images/next_invoice.svg");


  background-repeat: no-repeat;


  background-position: 20px 15px;


  background-size: auto;


}


.pricing-list-blue{


  margin: 0;


  padding: 0;


  list-style: none;


  color: var(--secondary-color);


  list-style: none;


  height: 10cm;


  overflow: auto;


}


.pricing-list-green{


  margin: 0;


  padding: 0;


  list-style: none;


  color: var(--white-color);


  list-style: none;


}


.pricing-list-blue li{


  background-image: url("../images/blue-check-icon.svg");


  background-repeat: no-repeat;


  background-position: left center;


  background-size: 20px;


  padding-top: 10px;


  padding-left: 25px;


}


.pricing-list-green li{


  background-image: url("../images/white-check-icon.svg");


  background-repeat: no-repeat;


  background-position: left center;


  background-size: 20px;


  padding-top: 10px;


}


.pricing-table, .planning-table{


  width: 100%;


  white-space: nowrap;


  padding: 0px;


  border: unset;


  color: var(--secondary-color);


}


.pricing-table th{


  padding: 20px;


}


.pricing-table tr{


  height: 100px;


}


.planning-table th{


  padding: 20px;


}


.planning-table td{


  padding: 20px;


}


.planning-table tr{


  height: 40px;


}


.planning-table-div{


  height: 30vh;


  overflow: auto;


}


.planning-table-div::-webkit-scrollbar {


  width: 2px;


  height: 2px;


}


.user-profile-image{


  width: 80px;


  height: 80px;


  border-radius: 50%;


  object-fit: cover;


  float: right;


  margin-left: 10px;


}


.user-profile-info{


  margin: 15px;


}


.btn-danger{


  background-color: #FFE5E5 !important;


  color: #FF4F4F !important;


  border: unset !important;


}


.tools-card{


    width: 100%;


    height: 100%;


    border-radius: 15px;


    box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);


    -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);


    -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);


}


.tools-card-image{


    width: 100%;


    height: 5cm;


    object-fit: cover;


    border-radius: 15px 15px 0px 0px; 


}


.tools-card-text{


    padding: 20px;


}


.search-result{


    width: 100%;


    padding: 10px;


    text-align: -webkit-center;


}


.search-text{


    margin: 5px;


    padding: 0px 10px 0px 10px;


    border: 1px solid white;


    border-radius: 10px;


    color: white;


    cursor: pointer;


}


.tools-section{


    cursor: pointer;


    padding: 10px;


    border-radius: 5px;


}


.tools-section-active{


    background: #F6F6FB;


}


.tools-section:hover{


    cursor: pointer;


    padding: 10px;


    border-radius: 5px;


    background: #F6F6FB;


}