/* 1. CSS VARIABLES */
:root {
  --primary-color: #019fcb;
  --secondary-color: #184790;
  --accent-color: #fdbc11;
  --black-color: #000;
  --white-color: #fff;
   --lighter-gray-color: #f0f8ff;
  --light-gray-color: #666;
  --darken-gray-color:#212529;
  --dark-gray-color: #333;
  --lighter-gray-50: #f8f9fe;
  --lighter-gray-75: #ededed;
   --lighter-gray-100: #f5f5f5;
   --lighter-gray-125: #eaeaea;
  --lighter-gray-150: #f3f3f3;
  --lighter-gray-200: #727272;
  --lighter-gray-225: #5b5b5b;
  --lighter-gray-250: #646464;
  --lighter-gray-300: #555;
  --dark-gray-300: #303030;
  /*  */
  --theme-blue-color:#02256d;
  --blue-100:#0d6efd;
  --blue-200:#1a468f;
  --blue-300:#0056b3;
  
  --radius-sm: 4px;
  --radius-md: 8px; 
  --radius-lg: 25px;
  --transition: 0.3s ease-in-out;
  --shadow-sm: 0 3px 5px 0 rgb(0 0 0 / 10%);
  font-family: 'Poppins', sans-serif;
  font-family: 'Proxima Nova Rg', sans-serif;
  font-family: Arial, sans-serif;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
/* 2. UTILITY CLASSES */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-light { background-color: var(--light-bg); }
.bg-dark { background-color: var(--dark-bg); }
/* .bg-white { background-color: var(--white); } */
.clr-secondary{ color: var(--secondary-color);}
.color-gray { color: var(--gray); }
.color-dark { color: var(--text-color); }
.shadow-sm { box-shadow: var(--shadow-sm); }

/* 4. COMPONENT CLASSES */

/* Section Heading */
.section-heading { 
  text-align: center;
  font-size: var(--fs-40);
  color: var(--primary-color);
  padding-bottom: 20px;
  font-weight: 700;
  font-family: var(--font-secondary);
}
.cards{  color: var( --darken-gray-color);}
/* Error Message */
.error-message {
  font-size: 0.875rem;
  color: red;
  margin-top: 5px;
}
/* Translate */
#goog-gt-tt,
iframe.skiptranslate {
  display: none !important;
  visibility: hidden !important;
}
div#google_translate_element div {
font-size: 0;
}
div#google_translate_element select {
font-size: 14px;
}
#google_translate_flags button{ width: 35px; height: 35px; font-size: 0; padding: 6px; background-color: var(--primary-color); border: none;}
   .navbar-toggler{ margin-left: 10px;}
   #google_translate_flags .dropdown-menu .dropdown-item:active,   #google_translate_flags  .dropdown-item:hover{ background-color: var(--white-color); color: #212529;}
#google_translate_flags #selectedFlag img, #google_translate_flags ul.dropdown-menu, #google_translate_flags .dropdown-menu .dropdown-item img{width: 24px; 
     max-width: inherit;}
#google_translate_flags .dropdown-menu {border-color: #f3f3f3;
        right: 0 !important; left: inherit !important; width: 230px; top: 100% !important;
        font-size: 0.875rem;
        color: #333335; transform: none !important; 
    }
/* ========genral-css====== */
*,
::after,
::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #02256d;
        margin: 0;
        font-weight: 600;
        font-family: var(--heading-font);
        line-height: 1.2;
    }
 /* .regi-btns{position: fixed;
        top: 20%;
        right: 31px;
        z-index: 99;
        transform-origin: top right;
        transform: rotate(270deg);} */
     /* html[lang]:not([lang=""]) .regi-btns>.regi-first-button {
  display: none;
} */

body h1, body h2, body h3, body h4, body h5, body h6{font-weight: 600;}
.container, .container-fluid{ padding: 0 12px;}
p{font-size: 15px;
    font-family: var(--font-primary);
}
/* =====header====== */
#navbarSupportedContent ul li a.active {
    color: var(--black-color)
}
iframe.skiptranslate {
display: none;
visibility: hidden;
}
.dropdown-item.active {
background-color: #007bff !important;
color: var(--white-color) !important; 
}
.btnbox.regi-btns a:nth-child(3) {
  display: none !important;
}

.regi-btns{
  right: 40px !important; 
}


/******************* testing issue css start ********************/

/******************* testing issue css start ********************/

/*  */
.form-check-inline .form-check-label {
    font-weight: 500
}

@media (min-width:780px) {
    .wrapper {
        width: 600px;
        display: grid;
        grid-template-columns: repeat(2, [col] calc(100%/2));
        grid-auto-rows: 120px;
        margin: 30px auto 40px
    }
    .video_box .wrapper{
        width: 100% !important;
        display: block !important;
        margin: auto !important;
    }
}
.dAlertMod .alert i{ font-size: 77px !important;}

/* =====video-sec====== */
  .events-sec img{ max-width: inherit;}
/* ==========our-news-sec===== */
  .our-news-sec .cards:hover {
    transform: translateY(-10px);
  }
#cropBtn, #cancelBtn{    margin-top: 10px;
    padding: 5px 15px;
    border: none;
    background: #007bff; 
    color: #fff;
    border-radius: 5px;
    cursor: pointer;}
/* ======================================aome page=================== */
.about-page p{   font-family: "Roboto", sans-serif;}
/* =======================Director_sec================================================== */
    #Director_sec .members_slider .img_overlaybox .breadcrumb-item+.breadcrumb-item::before {
        float: left;
        padding-right: 0.5rem;
        color: var(--white-color); 
        content: var(--bs-breadcrumb-divider, "/");
    }

@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 540px !important;
    }
}
    @media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 720px !important;
    }
}
    @media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px !important;
    }
}
    @media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px !important;
    }
}
    @media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
       max-width: 1320px !important;
    }
}

/* max-width */
@media (max-width: 575px) {
  .button{padding: 5px 15px;
    font-size: 13px;} 
}
@media (max-width: 480px) {
  .form-control[type=file]:not(:disabled):not([readonly]) {
    font-size: 12px;
}
.button{ padding: 4px 10px;
  font-size: 10px;}
  .dAlertMod .alert i {
    font-size: 84px; 
  }
  .dAlertMod .alert {
    padding: 22px;
    padding-left: 87px;
  } 
}
@media (max-width: 400px) {
  footer .space-x-6> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }
}

/* ----------------member-page----------------- */
     .member-card:hover {
            --tw-scale-x: 1.02;
            --tw-scale-y: 1.02;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            --tw-shadow-color: var(--shadow-card-hover);
            --tw-shadow: var(--tw-shadow-colored);
        }

        .group:hover .group-hover\:ring-accent\  {
            --tw-ring-color: hsl(var(--accent) / .4);
        }

        .group:hover .mamber-img {
            --tw-scale-x: 1.1;
            --tw-scale-y: 1.1;
            transform: translate(var(--tw-translate-x)0, var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }

        .member-card:hover .img-border img {
            --tw-scale-x: 1.1;
            --tw-scale-y: 1.1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }

        .member-card:hover .img-border {
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) rgb(255 237 165);
            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        }

        .theme-blue {
            background: #184790 !important;
        }

        .theme-text-blue {
            color: #184790; 
        }

        .img-border {
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) rgb(184 211 255 / 50%);
            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        }
input, textarea, select {
  font-size: 16px !important;        /* Safari reads this as safe, prevents zoom */
  -webkit-text-size-adjust: 100%;
  transform-origin: left top;
}






input::placeholder,
textarea::placeholder {
    font-size: 16px !important;

  transform-origin: left top;      /* Align placeholder properly */
  opacity: 0.5;                     /* Optional: lighter color */
  color: #999;                      /* Placeholder color */
  pointer-events: none;             /* Safari fix for selection */
}

@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select,  input:focus,
  textarea:focus,
  select:focus {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
}


body{ height: 100dvh !important; min-height: 100dvh !important;}
/* select{  height: 44px !important; 
  line-height: 1.5 !important;
  padding: 0 10px;
  -webkit-appearance: none !important; 
  -moz-appearance: none !important;
  appearance: none !important;} */

@media(max-width:480px){
    .card.custom-card .card-body.sign-in-popup{ padding: 20px !important;}
}
