/* Add here all your CSS customizations */

.tajawal-extralight {
  font-family: "Tajawal", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.tajawal-light {
  font-family: "Tajawal", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.tajawal-regular {
  font-family: "Tajawal", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.tajawal-medium {
  font-family: "Tajawal", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.tajawal-bold {
  font-family: "Tajawal", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.tajawal-extrabold {
  font-family: "Tajawal", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.tajawal-black {
  font-family: "Tajawal", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.customcard { background: linear-gradient(90deg, #8acb92, #066886); border-radius: 25px; padding: 25px 0 ;}
.customcard h1 span{ font-family: 'Rubik'; font-size: 16px !important; font-weight: 400; display: block;}
.customcard h1 { font-size: 4rem; font-weight: 400;}

.custom-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border-radius: 20px;
  padding: 2px; /* for animated border */
  overflow: hidden;
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease-in-out;
  backdrop-filter: blur(6px);
  animation: fadeInUp 1s ease forwards;
  
}
.custom-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  animation: rotateBorder 6s linear infinite;
  z-index: 0;
}
.custom-card .card-header { background: linear-gradient(90deg, #8acb92, #066886); border-radius:15px 15px 0 0;}
.custom-card-body {
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 18px;
  padding: 25px;
  z-index: 1;
  flex: 1; /* makes body stretch evenly */
}
.custom-card-header h4, .card-header h4{padding:6px 15px; margin-bottom: 0; color: #FFF !important; border-radius:15px 15px 0 0; }
.custom-card:hover{
  box-shadow: 0 0px 20px rgba(233, 242, 233, 0.8);
}

/* Title */
.custom-card-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #073763;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Icon Box */
.icon-box {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1EB1C2, #07314A);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.4rem;
  margin-bottom: 18px;
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

/* List */
.custom-list {
  padding-left: 18px;
  margin: 0;
}

.custom-list li {
  margin-bottom: 10px;
  line-height: 1.5;
  font-size: 1rem;
  color: #333;
}



.bg-dark { background: #122747 !important;}
.bg-danger { background: #D3333F !important;}
.bg-gray { background: #4cada9 !important;}
.bg-orange { background: #8acb92 !important;}

.text-gray { color: #77787b !important;}
.text-orange { color: #8acb92 !important;}
.text-blue, .text-dark { color: #122747 !important;}

.normal { font-weight: 400;}
.bold { font-weight: 700 !important;}
.xs { font-size: 10px !important; }
.small { font-size: 12px !important; }
.lg { font-size: 14px !important; }
.xl { font-size: 16px !important; }

.top-sub-title { font-size: 18px;}
.btn-white { background: transparent; padding: 10px 16px; color: #FFF; border: 2px solid #FFF;}
.btn-white:hover, .btn-white:focus { }
#registration{ text-shadow: 0 0 2px #999;}

label { color: #333; font-size: 16px; font-weight: 400;}

.form-control{ font-size: 16px !important; text-transform: lowercase !important; border:1px solid #dadada !important; background: transparent; color: #333 !important; text-shadow: 0 0 1px #dadada; border-radius: 6px;}

.caps{ text-transform: capitalize !important;}

.form-control:hover, .form-control:focus, select:hover, select:focus{ border:1px solid #66c !important; box-shadow: 0 0 5px #999; background: transparent;}

.form-control:valid{ background: #f9f9f9;}


::placeholder { color: #999 !important; text-shadow: none;}

.resp { width: 100% !important;}


.section{ padding-top: 150px !important; padding-bottom: 150px !important;}


.countdown {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically */
  flex-wrap: nowrap;  /* flex-wrap: wrap; allow wrapping on smaller screens */
  gap: 8px; /* spacing between items */
  color: #122747;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  min-height: 100px; /* optional: helps vertical centering */
}

.countdown div {
  width: auto;
  min-width: 50px;
  padding:30px 0px;
  border-radius: 10px; border: 1px solid rgba(76, 173, 169, 0.6);
  background:transparent;
}

.countdown span {
  display: block; padding: 20px;
  font-size: 48px;
  margin-bottom: 0;
  color: #066886;
}

.sm{ font-size: 14px !important;}

.header-logo .logo{ width: 220px !important;}

.spc img{
  background: linear-gradient(to top, #84c4a2, #317c9b);    
  border-radius: 16px; width:100%; margin-bottom: 10px;
}

@media (max-width:900px){
    .header-logo .logo{ max-width: 160px !important;}
    form .btn-4 { padding: 5px 9px !important; width: 60px !important; display: block;}
 
}


    .tabs{
      display:flex;
      gap:2px;
      margin:18px 0;
      flex-wrap:wrap;
    }
    .tab-btn{
      background:transparent;
      border:1px solid transparent;
      padding:10px 20px;
      border-radius:32px;
      cursor:pointer;
      font-weight:600;
      color:var(--text);
      transition: all .18s ease; font-size: 18px;
    }
    .tab-btn[aria-selected="true"]{
      background:linear-gradient(90deg, #84c4a2, #277991);
      color:#fff;
      box-shadow: 0 6px 18px rgba(99,102,241,0.12);
      border:1px solid rgba(255,255,255,0.06);
    }

.pacakge td{ vertical-align: middle;}

.d-md{ visibility: visible;}
.d-sm{display: none;}
@media
	 only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {
        .d-md{ display: none !important;}
        .d-sm{display: inline-block; background: #108387; font-weight: normal; margin-right: 4px; color: #FFF; padding: 0 4px; width: 84px;}
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block; 
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      padding:5px 0 5px 0; 
    }
      
    tr:nth-child(odd) {
      
    }
    
		td {
			/* Behave  like a "row" */
			border: none !important;
			position: relative; text-align: left !important;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left:0;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
        
        /*
		td:nth-of-type(1):before { content: "ID"; }
		td:nth-of-type(2):before { content: "Name"; }
		td:nth-of-type(3):before { content: "Mobile"; }
		td:nth-of-type(4):before { content: "Email"; }
		td:nth-of-type(5):before { content: "Wars of Trek?"; }
		td:nth-of-type(6):before { content: "Secret Alias"; }
		td:nth-of-type(7):before { content: "Date of Birth"; }
		td:nth-of-type(8):before { content: "Dream Vacation City"; }
		td:nth-of-type(9):before { content: "GPA"; }
		td:nth-of-type(10):before { content: "Arbitrary Data"; }
        */
	}