.fixed-header header
{
	 position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    animation: 0.7s ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-animation: 0.7s ease-in-out 0s normal none 1 running fadeInDown;
    background-color: var(--white);
    background-color: var(--white);
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 3px 10px 0 rgb(0 0 0 / 20%);
    -webkit-box-shadow: 0 3px 10px 0 rgb(0 0 0 / 20%);
}
.fixed-header .mainheader {
   
    padding:10px 0;
}
@-webkit-keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -10%, 0);
        opacity: 0;
        transform: translate3d(0, -10%, 0);
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -10%, 0);
        opacity: 0;
        transform: translate3d(0, -10%, 0);
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.fixed-header{
    .button-white-border{
        border-color: var(--primary-blue);
        color:var(--primary-blue);
        & img{
            filter: brightness(0) saturate(100%) invert(44%) sepia(51%) saturate(6080%) hue-rotate(203deg) brightness(96%) contrast(111%);
        }
    }
    .head-left .supple-black-logo{
        display:flex;
        flex-wrap:wrap;
    }
    .head-left .supple-blue-logo{
        display: none;
    }
    .head-left .h-logo {
        width: 120px;
    }
    .head-right .button-big{
               padding: 16px 24px;
        font-size: 16px;
        gap: 10px;
    }
		 .button-white-border:before{
							background: rgb(14 117 255);
				  	background: linear-gradient(var(--shine-degree), transparent, rgb(14 117 255 / 9%), transparent);
		 }
}

.head-left .supple-black-logo
{
  display: none;
}
.head-left .supple-blue-logo{
    display:flex;
  flex-wrap:wrap;
}
header{
	 position:fixed;
  z-index:9999;
	width:100%;
}
.mainheader{
  padding:21px 0;
 
}
.header-wrap{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
  
}
.head-left .h-logo
{
 width:177px;
}
.banner-sec{
    position: relative;
    z-index:1;
    border-radius:0 0 60px 60px;
    padding:200px 0 80px 0;
    .blue-gradient
    {
        position:absolute;
        top:0;
        margin-top:-120px;
        left:0;
        width:100%;
        height: calc(100% + 120px);
        z-index:-1;
        border-radius:0 0 60px 60px;
        .bgimg{
            position:relative;
            border-radius:0 0 60px 60px;
        }
    }
    .r-c,.r-l,.r-r
    {
        position:absolute;
    }
    .r-c{
        left: 0;
        right: 0;
        margin: 50px auto 0;
        top: 0;
    }
    .r-l{
        bottom: 0;
        left: 0;
    }
    .r-r{
right: 0;
        top: 0;
        margin-top: 50px;
    }
}
.banner-wrap
{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;

    .banner-left{
        width:calc(100% - 480px);
        max-width:760px;
        padding-right:15px;
    }
    .banner-right{
       width:480px; 
    }
    .banner-title{
        font-size:86px;
        line-height:1.1;
        color:var(--white);
        font-family:var(--font-head-family);
        text-transform:uppercase;
        letter-spacing:1.72px;
        margin-bottom:20px;
        position:relative;
        z-index:1;
        & span{
            color:var(--theme);
        }
    }
    .banner-content
    {
        margin-bottom:30px;
        & p{
          font-size:22px;
          line-height:30px;
          color:var(--white);
          font-weight:var(--font-weight-medium);  
        }
    }
   
    .banner-rating {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        font-size:16px;
        color:var(--white);
        font-weight:var(--font-weight-medium);
        font-style:italic;
    } 
     
    .banner-award {
               clip-path: polygon(0% 0%, 100% 0, 94% 50%, 100% 100%, 0% 100%);
        background-color: var(--theme);
        font-family: var(--font-small-family);
        font-weight: var(--font-weight-bold);
        color: var(--white);
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 26px 12px 20px;
        line-height: 1;
        transform: rotate(-15deg);
        transform-origin: 40% 100%;
     
        position: relative;
        margin-left: -5px;
        font-size: 22px;
    }
    
}
.banner-mid{
    position: relative;
    & .arrow-image{
        position:absolute;
        left: 0;
        top:0;bottom:0;
        margin:auto 0 auto -75px;
    }
}


/*------- media ------*/

@media(max-width:1599.98px) {
    .banner-wrap {
        .banner-left {
            padding-left: 40px;
        }
        .banner-content{
          & p{
            font-size: 20px;
            line-height: 30px;
          }  
        }
        .banner-title{
            font-size:70px;
        }
    }
    .banner-mid {
        & .arrow-image{
            margin: auto 0 auto -50px;
            width: 40px; 
        }
    }
}

@media(max-width:1439.98px) {
    .banner-wrap {
        .banner-title {
            font-size: 55px;
        }
        .banner-content{
            & p{
                font-size:18px;
                line-height:26px;
            }
        }
    }
	.banner-sec{
		
    padding: 180px 0 80px 0;
	}
}

@media(max-width:1199.98px) {
    .banner-wrap {
        .banner-title {
            font-size:44px;
        }
        .banner-left {
            padding-left:0px;
            width:100%;
            max-width:100%;
            padding-right:0px;
            margin-bottom:30px;
        }
        .banner-right {
            width:100%;
        }
        .banner-award{
           padding: 8px 24px 8px 10px;
            font-size: 16px;
            transform: rotate(0deg);
            transform-origin: 0 0;
            margin-left: 0;
            margin-bottom: 10px;
        }
    }

    .banner-mid {
        & .arrow-image{
            display: none;
        }
    }

    .banner-sec{
        padding:140px 0 60px;
    }
    .head-left .h-logo {
        width:160px;
    }
 .head-right .button-big{
               padding: 20px 24px;
        font-size: 16px;
        gap: 10px; 
    }
}

@media(max-width:991.98px) {
    .head-right .button-big {
        padding: 16px 20px;
        font-size: 16px;
        gap: 10px;
    }
    .head-left .h-logo {
        width: 140px;
    }
    .banner-sec {
        padding:110px 0 60px;
    }
    .banner-sec {
        .blue-gradient{
                    margin-top: -98px;
            height: calc(100% + 98px);  
            border-radius: 0 0 30px 30px;
        }
    }
}

@media(max-width:767.98px) {
    .head-right .button-big {
        padding: 14px 16px;
        font-size: 14px;
        gap: 6px;
    }
    .head-left .h-logo {
        width: 120px;
    }
    .head-right{
        .btnlist{
            gap:6px;
        }
    }

    .fixed-header {
        .head-right .button-big {
          padding: 14px 16px;
        font-size: 14px;
        gap: 6px;  
        }
    }

}

@media(max-width:575.98px) {
    .banner-mid {
        & .arrow-image {
            display:none;
        }
    } 
    .banner-wrap{
        .banner-left{
            padding-left:0;
        }
        .banner-award{
                     padding: 8px 24px 8px 10px;
            font-size: 18px;
            transform: unset;
            transform-origin: unset;
            margin-left: 0;
            margin-bottom: 10px; 
        }
        .banner-title{
            font-size:34px;
        }
        .banner-content{
            & p{
                font-size:16px;
            }
        }
    }

    .form-wrap:before {
        margin-left:-5px;
        margin-bottom: -10px;
    }
    .form-wrap:after {
        margin-right: -5px;
    }
	
			.banner-sec {
				.blue-gradient {
						border-radius: 0 0 10px 10px;
				}
			}
}

@media(max-width:479.98px){
    .header-wrap{
        row-gap:10px;
    }
    
    .head-right .button-big{
        padding: 12px 12px;
        gap: 4px;
        font-size: 12px;
       & img{
        width:10px;
        height:10px;
        object-fit:contain;
       }
    }
    .mainheader{
        padding:10px 0;
    }

    .banner-sec {
        .blue-gradient {
            margin-top: -128px;
            height: calc(100% + 128px);
        }
    }
    .fixed-header {
        .head-right .button-big {
													padding:12px 12px;
													font-size:12px;
													gap:4px;
           & img{
														width: 10px;
														height: 10px;
														object-fit: contain; 
           }
        }
    }
	   .head-left {
    		width: 100px;
				}
			.head-right{
					width:calc(100% - 100px);
					.btnlist{
							gap:6px;
						justify-content:flex-end;
					}
			}
}	

@media(max-width:374.98px){
				.head-left{
        width:80px;
    }
    .head-right{
      width:calc(100% - 80px);
    }
	  
		.head-right .button-big{
			  padding: 12px 10px;
     gap: 0;
     font-size: 12px;
					& img{
							display:none;
					}
		}
	
	.fixed-header {
		.head-right .button-big{
			 padding: 12px 10px;
     gap: 0;
     font-size: 12px;
		}
	}
	    
}