@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');


 body {
      margin: 0;
      font-family: 'Tajawal', 'Inter', 'Helvetica', sans-serif;
      background: url('images/ADCMC\ Muroona\ 2026\ Abstract\ KV\ new.jpg') center/cover no-repeat fixed;
      position: relative;
      min-height: 100vh;
      color: #333333;
    }
    
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.65);
        z-index: 1;
        pointer-events: none;
    }
    
    h1, h2, h3, h4, h5 {
      color: white;
      letter-spacing: 0.5px;
    }
    .registration-form {
      
      margin: auto;
      ackground-color: #ffffff;
      border-radius: 10px;
      ox-shadow: 0 0 10px rgba(47, 47, 47, 0.1);
    }
    
     .custom-header {
            //background-color: #fff; /* Change the background color as needed */
            font-family: "Tajawal", sans-serif;
            
            
        }
     
     .astrik{color:red!important;}

     .logo-wrapper {
       /* background: rgba(255, 255, 255, 0.3); */
       /* backdrop-filter: blur(8px); */
       border-radius: 12px;
       padding: 20px 28px;
       display: inline-block;
       margin-bottom: 20px;
     }

     .custom_banner {
            max-width: 580px;
            margin: auto;
            font-family: "Tajawal", sans-serif;
            padding: 0 20px;
            border-radius: 16px;
            position: relative;
            z-index: 2;
            color: white;
            /* background: rgba(255, 255, 255, 0.92); */
            /* backdrop-filter: blur(12px); */
            /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); */
            animation: fadeUp 0.6s ease;
     }
     
     @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
     }
    
    .form-group label{ 
        color: #45474A;
        font-weight: 500;
        text-transform:uppercase; 
        font-family: "Tajawal", sans-serif;
        font-size: 13px;
        letter-spacing: 0.3px;
    }
    
    .form-control{
            font-family: "Tajawal", sans-serif;
            display: block;
            width: 100%;
            height: calc(1.5em + .75rem + 12px);
            padding: 14px;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.5;
            color: #45474A;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ccc;
            border-radius: 10px;
            transition: all 0.2s ease-in-out;
    }
    
    .form-control:focus {
            border-color: #6A6E5F;
            outline: none;
            box-shadow: 0 0 0 3px rgba(106, 110, 95, 0.15);
            background-color: #fff;
    }
    
    .input-group>.form-control{boder-radius:10px;}
    
    .input-group {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%;
    }
    
    .input-group-prepend {
        margin-right: -1px;
        display: flex;
    }
    
    .input-group-prepend .form-control {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        width: 100px;
        min-width: 100px;
        flex: 0 0 auto;
    }
    
    .input-group > .form-control:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    .btn-primary{
        font-family: "Tajawal", sans-serif;
        width: 100%;
        padding: 14px;
        background-color: #1D335C;
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 1.2px;
    }
    .btn-primary:hover{ 
        background-color: #152847;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(29, 51, 92, 0.3);
    }
    
    .rotated-image {
        transform: rotate(270deg);
        position: absolute;
        top: 105px;
        right: 115px;
        transform-origin: top right;
        height:110px;
        
      }

      .participant h5{color:#fff; font-size:20px; border:1px solid #173b57; padding:10px; }


      .label-group .arabic-label{ font-family: "Noto Kufi Arabic", sans-serif; font-optical-sizing: bold;}

      /* Mobile specific adjustments */
      @media screen and (max-width: 768px) {
        html, body {
          width: 100vw !important;
          overflow-x: hidden !important;
        }
        
        * {
          -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
        }
        
        .container,
        .container-fluid {
          width: 100vw !important;
          max-width: 100vw !important;
          padding: 15px 15px 0 15px !important;
          margin: 0 !important;
        }
        
        .row {
          margin-left: 0 !important;
          margin-right: 0 !important;
          width: 100% !important;
        }
        
        .col-md-12 {
          padding-left: 0 !important;
          padding-right: 0 !important;
          width: 100% !important;
        }
        
        .custom_banner {
          max-width: 100vw !important;
          width: 100% !important;
          padding: 0 5vw !important;
          margin: 0 !important;
          box-sizing: border-box !important;
        }
        
        body {
          background-attachment: scroll !important;
          -webkit-background-size: cover !important;
          background-size: cover !important;
        }
        
        /* Force top ADCMC logo to 100% on mobile */
        .container-fluid img[src*="Vector Smart Object"],
        .container img[src*="output-smallpngtools"],
        .custom-header img,
        img.top-adcmc-logo,
        .custom_banner img.top-adcmc-logo,
        .custom_banner a img.top-adcmc-logo,
        .custom_banner img[src*="output-smallpngtools"],
        .custom_banner img[src*="Vector Smart Object"],
        .custom_banner a img[src*="output-smallpngtools"],
        .custom_banner a img[src*="Vector Smart Object"],
        a img[src*="Vector Smart Object"],
        a img[src*="output-smallpngtools"] {
          max-width: 100% !important;
          width: 100% !important;
          height: auto !important;
          display: block !important;
          margin-left: auto !important;
          margin-right: auto !important;
        }
        
        /* Force logo smaller on mobile */
        img.adcmc-logo,
        .custom_banner img[src*="logo (2)"],
        img[alt="Logo"] {
          max-width: 100% !important;
          width: 100% !important;
          margin: 30px auto 20px auto !important;
          display: block !important;
        }
        
        .form-group {
          width: 100% !important;
          margin-bottom: 15px !important;
          padding: 0 !important;
          box-sizing: border-box !important;
        }
        
        .form-control,
        input.form-control,
        select.form-control {
          width: 100% !important;
          max-width: 100% !important;
          min-width: 100% !important;
          -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
          display: block !important;
        }
        
        .input-group {
          width: 100% !important;
          max-width: 100% !important;
          display: flex !important;
          flex-wrap: nowrap !important;
          box-sizing: border-box !important;
        }
        
        .input-group-prepend {
          flex: 0 0 auto !important;
          max-width: 100px !important;
        }
        
        .input-group-prepend .form-control {
          width: 100px !important;
          min-width: 100px !important;
          max-width: 100px !important;
        }
        
        .input-group > input.form-control:not(:first-child),
        .input-group > .form-control:last-child {
          flex: 1 1 auto !important;
          width: auto !important;
          min-width: 0 !important;
        }
      }
      
      @media screen and (max-width: 480px) {
        .custom_banner {
          padding: 0 0 !important;
        }

        
        
        img.adcmc-logo,
        .custom_banner img[src*="logo (2)"],
        img[alt="Logo"] {
            align-items: center;
          max-width: 100% !important;
          width: 100% !important;
        }
      }