@charset "utf-8";
/* -------------------- */
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Noto+Sans+Arabic:wght@100..900&display=swap');

/* -------------------- */
/* Overwriting Bootstrap */
:root,
[data-bs-theme=light] 
 {
	--bs-primary:#02CDDE;	
	--bs-primary-rgb:#02CDDE;
	--bs-primary-bg-subtle: #EDF5F8;
	--bs-primary-border-subtle:#EDF5F8;
	 
	--bs-cyan-500:#02CDDE;
	--bs-cyan-600:#23B3CE;
	--bs-cyan-400:#7BD9EB;
	--bs-cyan-200:#D0F9FC;
	--bs-cyan-100:#EDF5F8;	
	
	--bs-pink-100:#EDEFF8;	 
	--bs-pink-500:#A15BB9;
	--bs-pink-600: #AC4FC6;
	 
	--bs-orange-100:#FFEFEA;	 
	--bs-orange-500:#EC8562;
	--bs-orange-600:#CC623E;
	 
	--bs-purple-100: #F8EDF8;
	--bs-purple-300:#AB80B7;
	--bs-purple-500: #3C1053;
	 
	--bs-yellow-300:#FBCD44;
	--bs-yellow-400:#FFCD00;
	--bs-yellow-500:#FCA500;
	 
	--bs-green-500:#54AE91;
	 
	--bs-white: #fff;
	--bs-black: #050811;
	
	--bs-gray-100: #F3F4F6;
	--bs-gray-200: #D0D4DC;
	--bs-gray-300: #C4C7CC;
	--bs-gray-400: #A1A9BA;
	--bs-gray-500: #5F6A81;
	--bs-gray-600: #4E576A;
	--bs-gray-700: #404756;
	
	
	 
	--bs-font-sans-serif:"League Spartan", sans-serif;
	--bs-body-font-family: var(--bs-font-sans-serif);
  	--bs-body-font-size: 1rem;
  	--bs-body-font-weight: 400;
  	--bs-body-line-height: 1.5;
  	--bs-body-color: #212529;
  	--bs-body-color-rgb: 33, 37, 41;
  	--bs-body-bg: #fff;
  	--bs-body-bg-rgb: 255, 255, 255;
}

.navbar {
	--bs-navbar-active-color:#02CDDE;
}

.btn-outline-yellow {
    --bs-btn-color: var(--bs-yellow-500);
    --bs-btn-border-color: var(--bs-yellow-500);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--bs-yellow-500);
    --bs-btn-hover-border-color: var(--bs-yellow-500);
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--bs-yellow-500);
    --bs-btn-active-border-color: var(--bs-yellow-500);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-yellow-500);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-yellow-500);
    --bs-gradient: none;
}

.btn-yellow {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-yellow-500);
  --bs-btn-border-color: var(--bs-yellow-500);
  --bs-btn-hover-color: var(--bs-black);
  --bs-btn-hover-bg: var(--bs-yellow-500);
  --bs-btn-hover-border-color: var(--bs-yellow-500);
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: var(--bs-black);
  --bs-btn-active-bg: var(--bs-yellow-500);
  --bs-btn-active-border-color: var(--bs-yellow-500);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-black);
  --bs-btn-disabled-bg: var(--bs-yellow-500);
  --bs-btn-disabled-border-color: var(--bs-yellow-500);
}

.btn-pink {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-pink-500);
  --bs-btn-border-color: var(--bs-pink-500);
  --bs-btn-hover-color: var(--bs-black);
  --bs-btn-hover-bg: var(--bs-pink-500);
  --bs-btn-hover-border-color: var(--bs-pink-500);
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: var(--bs-black);
  --bs-btn-active-bg: var(--bs-pink-500);
  --bs-btn-active-border-color: var(--bs-pink-500);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-black);
  --bs-btn-disabled-bg: var(--bs-pink-500);
  --bs-btn-disabled-border-color: var(--bs-pink-500);
}

.btn-cyan {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-cyan-600);
  --bs-btn-border-color: var(--bs-cyan-600);
  --bs-btn-hover-color: var(--bs-black);
  --bs-btn-hover-bg: var(--bs-cyan-600);
  --bs-btn-hover-border-color: var(--bs-cyan-600);
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: var(--bs-black);
  --bs-btn-active-bg: var(--bs-cyan-600);
  --bs-btn-active-border-color: var(--bs-cyan-600);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-black);
  --bs-btn-disabled-bg: var(--bs-cyan-600);
  --bs-btn-disabled-border-color: var(--bs-cyan-600);
}

.btn-purple {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-purple-500);
  --bs-btn-border-color: var(--bs-purple-500);
  --bs-btn-hover-color: var(--bs-purple-300);
  --bs-btn-hover-bg: var(--bs-purple-500);
  --bs-btn-hover-border-color: var(--bs-purple-500);
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: var(--bs-purple-300);
  --bs-btn-active-bg: var(--bs-purple-500);
  --bs-btn-active-border-color: var(--bs-purple-500);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-purple-300);
  --bs-btn-disabled-bg: var(--bs-purple-500);
  --bs-btn-disabled-border-color: var(--bs-purple-500);
}

.btn-orange {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-orange-500);
  --bs-btn-border-color: var(--bs-orange-500);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--bs-orange-500);
  --bs-btn-hover-border-color: var(--bs-orange-500);
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--bs-orange-500);
  --bs-btn-active-border-color: var(--bs-orange-500);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--bs-orange-500);
  --bs-btn-disabled-border-color: var(--bs-orange-500);
}

.btn-green {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-green-500);
  --bs-btn-border-color: var(--bs-green-500);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--bs-green-500);
  --bs-btn-hover-border-color: var(--bs-green-500);
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--bs-green-500);
  --bs-btn-active-border-color: var(--bs-green-500);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: var(--bs-green-500);
  --bs-btn-disabled-border-color: var(--bs-green-500);
}

.carousel-dark .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 12px;
    height: 12px;
    padding: 0px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: var(--bs-gray-500);
    background-clip:none;
    border-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: var(--bs-gray-500);
    border-left-color: var(--bs-gray-500);
    border-image: initial;
    border-top-style: solid;
    border-top-color: var(--bs-gray-500);
    border-bottom-style: solid;
    border-bottom-color: var(--bs-gray-500);
    opacity: 1;
    transition: opacity 0.6s;
    border-radius: 95px;
}

.carousel-dark .carousel-indicators [data-bs-target] {
    background-color: var(--bs-white);
}

.carousel-dark .carousel-indicators .active {
	background-color: var(--bs-gray-500);
    opacity: 1;
}

.carousel-indicators {   
    margin-bottom: 1.5rem;
}
/* -------------------- */
/* Fonts */
/* -------------------- */
.league-spartan {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.noto-sans-arabic {
  font-family: "Noto Sans Arabic", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
/* -------------------- */
/*Utilities*/
/* -------------------- */
.fs-7 {
    font-size: 0.8rem !important;
}

.w-md-85 {
    width: 85%;
}

.w-md-25 {
    width: 25% ;
}

.w-md-50 {
    width: 50% ;
}

.w-md-85 {
    width: 85% ;
}

.w-md-100 {
    width: 100% ;
}
.text-gray-700
{
	color: var(--bs-gray-700);
}
.text-gray-600
{
	color: var(--bs-gray-600);
}

.text-cyan-100{
	color: var(--bs-cyan-100);
}
.text-cyan-200{
	color: var(--bs-cyan-200);
}
.text-cyan-400{
	color: var(--bs-cyan-400);
}
.text-cyan-500{
	color: var(--bs-cyan-500);
}
.text-cyan-600{
	color: var(--bs-cyan-600);
}


.text-pink-100{
	color: var(--bs-pink-100);
}
.text-pink-500{
	color: var(--bs-pink-500);
}
.text-pink-600{
	color: var(--bs-pink-600);
}


.text-purple-100{
	color: var(--bs-purple-100);
}
.text-purple-500{
	color: var(--bs-purple-500);
}

.text-yellow-300{
	color: var(--bs-yellow-300);
}
.text-yellow-400{
	color: var(--bs-yellow-400);
}
.text-yellow-500{
	color: var(--bs-yellow-500);
}

.text-green-500{
	color: var(--bs-green-500);
}

.text-orange-100{
	color: var(--bs-orange-100);
}
.text-orange-500{
	color: var(--bs-orange-500);
}
.text-orange-600{
	color: var(--bs-orange-600);
}

.text-white{
	color: var(--bs-white);
}

.text-gray-700{
	color: var(--bs-gray-700);
}

.bg-white{
	background-color: var(--bs-white);
}
.bg-gray-700{
	background-color:var(--bs-gray-700);
}
.bg-pink-100{
	background-color: var(--bs-pink-100);
}

.bg-purple-100{
	background-color: var(--bs-purple-100);
}
.bg-purple-500{
	background-color: var(--bs-purple-500);
}

.bg-cyan-100{
	background-color: var(--bs-cyan-100);
}
.bg-cyan-200{
	background-color: var(--bs-cyan-200);
}
.bg-cyan-400{
	background-color: var(--bs-cyan-400);
}
.bg-cyan-500{
	background-color: var(--bs-cyan-500);
}
.bg-cyan-600{
	background-color: var(--bs-cyan-600);
}

.bg-orange-100{
	background-color: var(--bs-orange-100);
}
.bg-orange-500{
	background-color: var(--bs-orange-500);
}

.bg-green-500{
	background-color: var(--bs-green-500);
}
.fotter-links a{
	color: var(--bs-white);
	text-decoration: none;
}

.fotter-links a:hover, .fotter-links a:visited{
	color: var(--bs-gray-300);
	text-decoration: none;
}

ul.ul-cyan {
  list-style-image: url("../img/project02/ul-cyan.svg");
}
.mt-0-7{
	margin-top: 0.7rem !important;
}

/* -------------------- */
/* Graphics and Icons */
.logo-size{
	width:200px;
}

.avatar-size{
    width: 20%;
}
/* -------------------- */
/* Backgrounds */
.bg-banner {
    background-image: url('../img/banner-w.png'); /* Adjust path as needed */	
    background-size: cover;  /* Ensures the image fully covers the div */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
    width: 100%; /* Full width */
    height: 600px; /* Adjust height as needed */    
    align-items: top;
    justify-content: top;
}

.bg-about, .bg-strip{	
    background: hsla(185, 98%, 44%, 1);
	background: linear-gradient(135deg, hsla(185, 98%, 44%, 1) 0%, hsla(208, 91%, 54%, 1) 100%);
	background: -moz-linear-gradient(135deg, hsla(185, 98%, 44%, 1) 0%, hsla(208, 91%, 54%, 1) 100%);
	background: -webkit-linear-gradient(135deg, hsla(185, 98%, 44%, 1) 0%, hsla(208, 91%, 54%, 1) 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#02CDDE", endColorstr="#1D8EF4", GradientType=1 );	
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
}

.bg-purple-gradient{	
    background: var(--bs-purple-500);
	background: linear-gradient(135deg, #3C1053 0%, #AB80B7 100%);
	background: -moz-linear-gradient(135deg, #3C1053 0%, #AB80B7 100%);
	background: -webkit-linear-gradient(135deg, #3C1053 0%, #AB80B7 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#02CDDE", endColorstr="#1D8EF4", GradientType=1 );	
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
}

.bg-purple-solid{	
    background: var(--bs-purple-500);	
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
}

.bg-cyan-gradient{	
    background: #3C1053;
	background: linear-gradient(135deg, #23B3CE 0%, #00DCC3 100%);
	background: -moz-linear-gradient(135deg, #23B3CE 0%, #00DCC3 100%);
	background: -webkit-linear-gradient(135deg, #23B3CE 0%, #00DCC3 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#02CDDE", endColorstr="#1D8EF4", GradientType=1 );	
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
}

.bg-cyan-solid{	
    background: var(--bs-cyan-600);	
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
}

.bg-orange-gradient{	
    background: var(--bs-orange-600);
	background: linear-gradient(135deg, #CC623E 0%, #EC8562 100%);
	background: -moz-linear-gradient(135deg, #CC623E 0%, #EC8562 100%);
	background: -webkit-linear-gradient(135deg, #CC623E 0%, #EC8562 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#02CDDE", endColorstr="#1D8EF4", GradientType=1 );	
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
}

.bg-pink-solid{	
    background: var(--bs-pink-500);	
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
}

.bg-pink-gradient{	
    background: var(--bs-pink-500);
	background: linear-gradient(135deg, #A15BB9 0%, #FFBBA8 100%);
	background: -moz-linear-gradient(135deg, #A15BB9 0%, #FFBBA8 100%);
	background: -webkit-linear-gradient(135deg, #A15BB9 0%, #FFBBA8 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#02CDDE", endColorstr="#1D8EF4", GradientType=1 );	
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
}

.bg-orange-solid{	
    background: var(--bs-orange-600);	
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
}

.bg-circle{    
	background-image: url('../img/Circle-bg.png'); /* Adjust path as needed */	
    background-size: contain;  /* Ensures the image fully covers the div */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
    width: 100%;    
	min-height: 400px; /* Adjust height as needed */
}

.bg-footer-circle{    
	background-image: url('../img/footer-circle-bg.png'); /* Adjust path as needed */	
    background-size: contain;  /* Ensures the image fully covers the div */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
    width: 100%;    
	min-height: 200px; /* Adjust height as needed */
}

/* -------------------- */
/* Breakpoints */
@media (max-width: 576px) { 
/* -------------------- */
/* Backgrounds */
.bg-banner {
    background-image: url('../img/banner-m.png'); /* Adjust path as needed */	
    background-size: cover;  /* Ensures the image fully covers the div */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
    width: 100%; /* Full width */
    height: 450px; /* Adjust height as needed */    
    align-items: center;
    justify-content: center;
	}
	
	.logo-size
	{width:170px;}
	
	.w-sm-25 {
		width: 25%;
	}
	
	.w-sm-50 {
		width: 50%;
	}

	.w-sm-85 {
		width: 85%;
	}
	
	.w-sm-100 {
    width: 100%;
	}

	.carousel-indicators {   
		margin-bottom: 0rem;
	}

	.avatar-size{
		width: 50%;}
	
	.background-sm-purple{
		background-color: var(--bs-purple-500);
		border-top-right-radius: var(--bs-border-radius-xl);
		border-top-left-radius: var(--bs-border-radius-xl);
	}
	
	.background-sm-cyan{
		background-color: var(--bs-cyan-400);
		border-top-right-radius: var(--bs-border-radius-xl);
		border-top-left-radius: var(--bs-border-radius-xl);
	}
	
	.background-sm-pink{
		background-color: var(--bs-pink-500);
		border-top-right-radius: var(--bs-border-radius-xl);
		border-top-left-radius: var(--bs-border-radius-xl);
	}
	
	.background-sm-orange{
		background-color: var(--bs-orange-500);
		border-top-right-radius: var(--bs-border-radius-xl);
		border-top-left-radius: var(--bs-border-radius-xl);
	}

	.bg-footer-circle, .bg-circle{    
	background-image: url('../img/circle-bg-m.png'); /* Adjust path as needed */
		padding: 1rem;
	}
	.nav-sm-bg
	{
		background-color: #fff;
		padding: 0.5rem;
		width: 150%;
		border-radius: 0rem 0rem 0.4rem 0.4rem;
		box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
	}
	.nav-sm-bg .dropdown-menu
	{ border: 0px}
}