@font-face {
    font-family: 'TelenorEvolutionMedium';
    src: url('../fonts/TelenorEvolution-Medium.otf') format('opentype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'TelenorEvolutionBold';
    src: url('../fonts/TelenorEvolution-Bold.otf') format('opentype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: 'TelenorEvolutionLight';
    src: url('../fonts/TelenorEvolution-Light.otf') format('opentype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'TelenorEvolutionNormal';
    src: url('../fonts/TelenorEvolution-Normal.otf') format('opentype');
    font-weight: 400; /* Normal */
    font-style: normal;
}

@font-face {
    font-family: 'TelenorEvolutionExtraBoldSlanted';
    src: url('../fonts/TelenorEvolution-ExtraBoldSlanted.otf') format('opentype');
    font-weight: 800; /* Extra Bold */
    font-style: italic;
}

  @font-face {
          font-family: 'Solaiman';
           src: url('../fonts/Solaiman.ttf') format('opentype');       
          font-weight: 400; /* Normal */
          font-style: normal;
      }


    body {
        background: linear-gradient(to bottom, #003366, #007bff);
        color: white;
        font-family: 'Solaiman', Arial, sans-serif;
        min-height: 100vh;
        margin: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
        .form-container {
            max-width: 400px;
            margin: auto;
            padding: 20px;
            margin-top: 50px;
            
        }
        .form-control {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
        }
        .form-control::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        .form-control:focus {
            background: rgba(255, 255, 255, 0.3);
            color: white;
        }

        .btn-custom {
           background: rgba(5, 63, 109, 1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            width: 100%;
        }
        .btn-custom:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        .logo{
           
            width:100px;
            height: auto;

        }
        .bus-image {
            display: block;
            margin: 20px auto 0;
        }

        .custom-select option {
            background-color: white;
            color: gray;
        }
        
        /* Style hover for options (this works differently across browsers) */
        .custom-select option:hover {
            background-color: gray;
            color:white;
        }

        .btnmar{
            margin-top: 50px;
        }
        .mg{
            margin-top: 20px;
            margin-left: 10px;
        }
        footer {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: auto;
        }

        .bus-image {
            max-width: 100%;
            height: auto;
            width: auto;
        }

        /* Media queries for specific device sizes */
        @media (max-width: 768px) {
            .bus-image {
                max-width: 90%;
            }
        }

        @media (min-width: 1024px) {
            .bus-image {
                max-width: 70%;
            }
        }

        .mg2{
            margin-top: -43px;
        }
        .custom-size {
            font-size: 1.5em;
        }
        .mg4{
            margin-top: 20px;
        }

        /* Styles for the Terms and Conditions Modal */
        #termsModal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;

          
        }

        .modal-content {
         
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            background: linear-gradient(to bottom, #003366, #007bff);
           
        }


        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close {
            color: #aaa;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        .container1 {
            flex: 1;
            text-align: center;
            
            margin-bottom:30px;
        }
/*Start Step0*/
.main-content img {
    max-width: 100%;
    height: auto;
    margin-top: 50px;
    margin-left:-30px;
}

.ticket-button {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px 20px;
    border: 2px solid white;
    border-radius: 25px;
    color: white;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
}

.ticket-button:hover {
    background-color: white;
    color: #003366;
}
        .text-content{
            margin-top: 30px;
            margin-bottom: 30px;
            padding: 15px 15px;
            font-size:14px;
            border: 2px solid white;
            border-radius: 25px;
            color: white;
            text-decoration: none;
            display: inline-block;
            transition: background-color 0.3s, color 0.3s;
          }