* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    scroll-behavior: smooth;
    list-style: none;
  }
  @font-face {
    font-family: "font1";
    src: url(fonts/MADE\ TOMMY\ Light_PERSONAL\ USE.otf);
  }
  @font-face {
    font-family: "font2";
    src: url(fonts/monumentextended-regular.otf);
  }
  body {
    width: 100%;
  }

header {
    position: fixed;
    top: 0;
    z-index: 111;
    background-color: #ffffff;
    width: 100%;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #b1b1b167;
  }
  header .logo {
    position: relative;
    width: 55px;
    height: 55px;
  }
  header .menu {
    font-size: 30px;
    color: #011e4a;
    display: none;
  }
  .logo img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .links {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 150px;
    padding: 0 20px;
  }
  .links .nav {
    position: relative;
    width: 600px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav a {
    color: #011e4a;
    font-size: 15px;
    font-family: "font1";
    text-transform: capitalize;
    letter-spacing: 1px;
  }
  .links .inscri {
    width: 130px;
    height: 45px;
    background-color: #011e4a;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inscri a {
    color: #fff;
    font-size: 15px;
    font-family: "font1";
    text-transform: capitalize;
    letter-spacing: 2px;
  }
  .section{
    position:relative;
    width:100%;
    height:100vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .container{
    width: 80%;
    height:90%;
    display:flex;
    align-items: center;
    margin-bottom: 10px;
    box-shadow: 1px 4px 35px 3px rgba(0, 0, 0, 0.124);
  }
  .container .left-image{
    position: relative;
    width:45%;
    height:100%;
    padding: 0 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:20px;
  }
  .form .logo{
    position: absolute;
    top:10px;
    left:25px;
    width:80px;
    height: 80px;
    
  }.logo img{
    width:100%;
    height:100%;object-fit: cover;
  }
  .left-image .main-img{
    position: absolute;
    left:0;bottom:0;
    width:340px;height:100%;
  }
  .main-img img{
    width:100%;
    height:100%;object-fit: cover;
  }
  .form{
    position: relative;
    width:55%;
    height:100%;
    padding: 0 30px;
    background-color: #021430;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .form .text-discrp{
    width:90%;
    height:100px;
    align-items: flex-start;
    justify-content: center;
    gap:14px;
    margin-top: 15px;
    margin-bottom: 10px;
    display: none;
  }
  .text-discrp h2{
    font-size: 16px;
    color:#ffa401;
    font-family: 'font1';letter-spacing: 1px;text-transform: capitalize;
    margin-bottom: 10px;
  }

  .text-discrp p{
    font-size: 14px;
    font-family: font1;text-align:start;
    width:90%;letter-spacing: 1px;color:#FFFFFF;
  }

  .form form{
    margin-top: 85px;
  }
  .form .text{
    width:370px;
    height:45px;border:1px solid #DDDDDD;border-radius: 10px;outline: none;
    padding-left: 10px;font-family: 'font1';font-size: 15px;margin-bottom: 12px;
    background-color: #fff;
  }
  .form .sub{
    width:370px;
    height:45px;
    border: none;
    background-color: #ffa401;
    margin-top: 15px;
    border-radius: 10px;
    color:#fff;font-size: 16px;letter-spacing: 1px;text-transform: uppercase;
  }


  :root{
	--fs-400: 16px;
	--color-text: #000000;
	--color-accent: #000000;
  --color-border: #DDDDDD;
	--gap-700: 48px;
	--gap-400: 16px;
	--gap-300: 12px;
	--gap-200: 8px;
	--transform-arrow-down: rotate(-180deg);
	--trans: all 250ms ease-in-out;
  --br-100: 10px;
}



/***************************/
/***** CUSTOM SELECT *******/
/***************************/
.select,
.select-visa{
	--width:370px;
	--height:50px;
	--icon-w:40px;
	position: relative;
	width:var(--width);
	height: var(--height);
	padding-right: var(--icon-w);
	cursor: pointer;
}

.select-visa{
  margin-top: -15px;
}
.select{
  margin-top: 15px;
}

.select input,
.select-visa input,
.select .option,
.select-visa .option-visa{
	display:block;
	font-family: 'font1';
	font-size: var(--fs-400, 16px);
	color: var(--color-text, #000000);
}

.select input::-webkit-input-placeholder,
.select-visa input::-webkit-input-placeholder {
	color: var(--color-text, #000000);
}
.select input:-ms-input-placeholder,
.select-visa input:-ms-input-placeholder{
	color: var(--color-text, #000000);
}
.select input::placeholder,
.select-visa input::placeholder {
	color: var(--color-text, #000000);
}
.select input,
.select-visa input{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: var(--gap-400, 16px);
	padding-right: var(--icon-w);
	color: var(--color-text, #000000);
	text-overflow: ellipsis;
	cursor: pointer;
	border: 1px solid;
	border-color: var(--color-border, #DDDDDD);
	border-radius: var(--br-100, 10px);
}

/* -- Select Icon */
.select .select-icon,
.select-visa .select-icon{
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
	right:var(--gap-400, 16px);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--trans);
	pointer-events: none;
}
.select.open .select-icon,
.select-visa.open .select-icon{
	transform: var(--transform-arrow-down);
}

/* -- Select Options */
.select .options,
.select-visa .options{
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	max-height: 520px;
	padding-block: var(--gap-500, 24px);
	padding-top: calc(var(--height) + 5px);
	background-color: #FFFFFF;
	border-radius: var(--br-100, 10px);
	border: 1px solid;
	border-color: var(--color-border, #DDDDDD);
	overflow:hidden;
	overflow-y:auto;
	opacity: 0;
	transition: var(--trans);
	pointer-events: none;
}
.select.open .options,
.select-visa.open .options{
	opacity: 1;
	pointer-events: all;
}

.select .option,
.select-visa .option-visa{
	padding-block: 5px;
	padding-inline: var(--gap-400, 16px);
}
.select .option:hover,
.select .option:focus,
.select-visa .option-visa:hover,
.select-visa .option-visa:focus{
	background-color: rgba(0,0,0,0.05);
}

.select .options,
.select-visa .options{
	z-index: 1;
}
.select,
.select input,
.select .option,
.select .select-icon,
.select-visa,
.select-visa input,
.select-visa .option-visa,
.select-visa .select-icon{
	z-index: 2;
}

  
@media (max-width: 530px) {
  header{
    height:60px;
  }
  
    header .menu {
      z-index: 111111;
      display: block;
    }
    .links {
      z-index: 111;
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      visibility: hidden;
      opacity: 0;
      height: 100vh;
      background-color: #dce2eeb8;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: 0.4s ease;
    }
    .nav {
      flex-direction: column;
     text-align: left;
      width:60%;
      justify-content: center;
      width: 100%;
    }
    .nav a {
      margin-top: 20px;
      font-weight: 700;
      letter-spacing: 1px; font-size:16px;
    }
    .links .inscri {
      width: 125px;
      height: 35px;
      margin-top:-20px;
    }
    .inscri a {
      font-size: 13px;
    }
    .container{
        width: 100%;
        height:90%;
        margin-bottom: 10px;
      }
      .container .left-image{
        display: none;
      }
      .form .logo{
        position: absolute;
        top:18px;
        left:38%;
        width:70px;
        height: 70px;
        
      }.form .logo img{
        width:100%;
        height:100%;object-fit: cover;
      }
      
      .form{
        position: relative;
        width:100%;
        height:100%;
        padding: 0 30px;
        background-color: #021430;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:20px;
        border-radius: 20px;
      }
      .form .text-discrp{
        display: block;
        margin-top: 60px;
      }
      .form form{
        position: relative;
        width:100%;
        margin-top: 5px;
      }
      .form .text{
        position: relative;
        width:100%;
        height:40px;
        font-size: 14px;margin-bottom: 10px;
      }
      .form .sub{
        width:100%;
        height:40px;
        border: none;
        background-color: #ffa401;
        margin-top: 13px;
        font-size: 15px;
      }
      .select,
      .select-visa{
        --width:100%;
        --height:45px;
        --icon-w:45px;
        width:var(--width);
        height: var(--height);
        padding-right: var(--icon-w);
        margin-bottom:16px;
        
     
    }
}
@media (max-width: 375px){
  .container{
    width: 100%;
    height:97%;
    margin-bottom: 10px;
  }
  .form .text-discrp{
    display: block;
    margin-top: 65px;
    height:98px;
  }
  .form .logo{
   display: none;
    
  }
}