@use '../../root' as *;
@use '../../utilities' as *;


/*------------------------------------
		 Header Top Section
----------------------------------*/
.header-top-section {
  &.style1 {
    padding: 14px 0;
    position: relative;
    z-index: 999;
    background: $smoke;
    box-shadow: 0px 2px 10px 2px rgba(243, 96, 76, 0.04);

    .header-top-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .contact-list {
        list-style-type: none;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        gap: 25px;

        li {
          a {
            display: flex;
            align-items: center;
            gap: 6px;
            p {
              color: $title-color;
              font-family: $body-font;
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: 20px; 
            }
          }
        }
      }
    }

    @include breakpoint (max-xl) {
      display: none;
    }
  }
}


/*------------------------------------
		3.2 Header Style 2
----------------------------------*/

.header-style-2{
	padding: 0 0;
	.header-wrap{
		margin-top: 0;
		margin-top: 25px;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		background: rgba(15, 15, 15, 0.50);
		backdrop-filter: blur(15px);
		padding: 0 100px;

		@include breakpoint(max-xl){
			padding: 13px 30px;
			margin-top: 10px;
		}
	}	
}
.line{
	position: absolute;
	width: 1px;
    height: 99%;
	background: rgba(255, 255, 255, 0.15);
	@include breakpoint(max-xxl){
		display: none;
	}
	&-1{
		top: 50px;
		left: 100px;
	}
	&-2{
		top: 50px;
		left: 35.1%;

		@include breakpoint(max-xxxl){
			left: 513px;
		}
	}
	&-3{
		top: 50px;
		right: 35.1%;
		@include breakpoint(max-xxxl){
			right: 513px;
		}
	}
	&-4{
		top: 50px;
		right: 100px;
	}
}

