html,body{
    overflow-x: hidden;
}

@font-face {
    font-family: me;
    src: url(../font/avenir_ff/AvenirLTStd-Book.otf);
}
:root{
    --hash:#C9C9C9;
    --hr:#737C87;
    --dark:#081D34;
    --main:#CCB034;
}
*{
    font-family: me;
}
/* *::-webkit-scrollbar {

    display: none;
  } */

/* width */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    transition: .3s ease-in-out;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 2px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--main) ;
    border-radius: 2px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #749afa;
  }


/* a:hover{
    color: var(--main);
} */
main{
    /* border:1px solid red; */
    width: 100%;
    min-height: 100vh;
    /* padding-top: 72px; */
    position: relative;
}
p{
  text-align: justify;
}
.container{
    width: 100%;
    display: flex;
    justify-content: center;
}
.contain{
    width: 1440px;
    padding: 0 104px;

}
.join_container{
    background: var(--dark);
}
.join{
    /* border: 1px solid red; */
    position: relative;
    height: 72px;
}
.join img{
    width: 61px;
height: 56px;
/* border: 1px solid red; */
position: absolute;
top: 8px;
left:104px;

}
.join p{
    color: var(--white);
text-align: center;
font-family: me;
font-weight: 400;

}

.join a,.classic_pop a{
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    transition: .3s ease-in-out;
    color: var(--white);
}
.join a:hover,.classic_pop a:hover{
    color: var(--main);
}

.nav_container{
    /* border: 1px solid blue; */
    position: sticky;
    top: 0;
    /* left: 0; */
    background: #fff;
    z-index: 10;
    /* height: 200px; */
}
nav{
    /* border: 1px solid red; */
    width: 100%;
    height: 72px;
    padding:  16px 0;
    position: relative;
}
.get{
    background: var(--main);
    position: absolute;
    top:13px;
    right: 104px;
}
.btn{
    padding: 15px;
    color: var(--white);
    cursor: pointer;
    transition: .3s ease-in-out;
}
.btn:hover{
    background:var(--dark);
    color: var(--white);
    /* border: 1px solid var(--main); */
}
nav ul{
    /* border: 1px solid red; */
    /* height: 56px; */
}
nav ul li a{
    /* border: 1px solid green; */
    color: var(--dark);
font-size: 12px;
font-weight: 400;
padding: 16px;
transition: .3s ease-in-out;
text-transform: uppercase;

}
nav ul li a:hover{
    color: var(--main);
}
.header{
    /* border: 1px solid blue; */
    width: 100%;
    color: var(--white);

    height: 720px;
    /* margin-bottom: 96px; */
    background: url(../images/frame.png) lightgray 50% / cover no-repeat;
    position: relative;
}
.after_header{
    height: 216px;
}
.after_header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.3); /* Adjust the color and opacity as needed */
  }
.header_overlay{
    position: absolute;
    top:0;
    left:0;
    background: var(--dark);
    opacity: .5;
    width: 100%;
    height: 100%;
    z-index:-1;
}
.header h1,.my_text h1{
font-weight: 600;
margin-bottom: 4px;
line-height: 1;
z-index:2;
}
.header p,.my_text p{
    margin-bottom: 16px;
    z-index:2;
}
.header a,.my_text a{
    z-index:2;
    background: var(--main);
    padding: 16px 30px;
}

.header_social{
    /* border: 1px solid green; */
    position: fixed;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    /* position: absolute; */
    top:50%;
    right:0;
    transform: translateY(-50%);
    background: var(--white);
    width: 40px;
    /* min-height: 100px; */
    z-index: 7;
}
.header_social ul {
    /* border: 1px solid blue; */
    width: 100%;
}
.header_social ul li {
    /* border: 1px solid yellow; */
    /* margin-bottom: 36px; */
    width: 100%;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header_social ul li a{
    /* border: 1px solid red; */
    background: var(--white);

    color: var(--black);

    font-size: 20px;
    transition: .3s ease-in-out;
    padding: 6px;
}
.header_social ul li a:hover{
    color: var(--main);
}

.mid_container{
    /* border: 1px solid blue; */
    /* height: 200px; */
    /* margin-top: 96px; */
    margin-top: 40px;
}
.mid{
    /* border: 1px solid red; */
    min-height: 200px;
}
.mid_top{
    /* border: 1px solid green; */
    width: 100%;
    min-height: 12px;
    position: relative;
    margin-bottom: 40px;

}
.mid_top p{
    font-weight: 500;
    position: absolute;
    top:0;
    left:0;
    background: var(--white);
    /* border: 1px solid red; */
    padding-right:4px ;
}
.mid_top_hr{
    background: var(--hr);
    height: 1px;
    width: 100%;
}
.mid_mid{
    /* border: 1px solid red; */
    width: 100%;
}
.scrollContainer{
    /* border: 1px solid red; */
    transition:scroll 5s ease-in-out;
}
.our_services{
    line-height: 56px;
    margin-bottom: 40px;
    /* border: 1px solid green; */
}
.self_service{
    margin-top: 52px;
}
.milk{
    /* border: 1px solid green; */
    width: 48% !important;
}
.milk_p{
    -webkit-line-clamp: 4;
}
.milk_right{
    /* border: 1px solid green; */
    width: 48% !important;
    min-height: 500px;
    flex-wrap: wrap;
}
.milk_right .mid_card{
    width: 50%;
}
.milk_right .mid_card p{
  text-align: left !important;
}
/* .milk_right .mid_card:nth-child(2){
  border-bottom:1px solid green;
} */
.mid_card_wrap{
    width: 100%;
    /* border: 1px solid red; */
}
.mid_card{
    /* border: 1px solid red; */
    min-height: 220px;
    width: 25%;
    padding: 24px;
    /* border-right: 1px solid var(--hr); */
}
.mid_card p{
  /* border: 1px solid green; */
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp:5;
  display: -webkit-box;
  -webkit-box-orient:vertical;

}
.mid_card:nth-child(1){
    border-right: 1px solid var(--hr);
    border-bottom: 1px solid var(--hr);
}
.mid_card:nth-child(2){
    /* border-bottom:1px solid var(--hr) ; */
}
.mid_card:nth-child(3){
    /* border-right: 1px solid var(--hr); */
}
/* .mid_card:nth-child(4){
    border-top: 1px solid var(--hr);
    border-left: 1px solid var(--hr);
} */
.mid_card svg{
    /* border: 1px solid green; */
    margin-bottom: 16px;
}
/* .mid_card img{
    width: 40px;
    height: 40px;
    border: 1px solid green;
    margin-bottom: 16px;
} */
.mid_card h3{
    margin-bottom: 8px;
}
.mid_card p{
    color: #475769;
    font-weight: 400;
}

.mid_left{
    width: 48%;
    /* border: 1px solid red; */
    min-height: 344px;
}
.read_more_top{
    -webkit-line-clamp: 4;
    margin-bottom: 32px !important;
}

.read_more{
    border: none;
    background: var(--main);
    color: var(--white);
    padding: 15px 1vw;
    transition: .3s ease-in-out;
    font-size: 14px;
}
.read_more:hover{
    background: var(--dark);
    color: var(--white);
    /* border: 1px solid var(--main); */
}
.mid_left h3{
    margin-bottom: 16px;
}
.mid_left p{
    font-weight: 400;
line-height: 24px;
/* border: 1px solid green; */
margin-bottom: 24px;
color: var(--dark);
}

.mid_left p:first-child{
  margin: 0;
}

.mid_right{
    background: url(../images/building.png) no-repeat;
    background-position: center;
    background-size: cover;

}
/* .building_png{
    background: url(../images/building.png) no-repeat;
    background-position: center;
    background-size: cover;

} */
.profile_wrap .profile_png{
    background: url(../../dummy.png) no-repeat;
    background-position: center;
    background-size: cover;
    filter: grayscale(100%);
    transition: filter 0.5s;
}
.profile_wrap .profile_png:hover{
    filter: grayscale(0%);
    transform: scale(1);
}
/* .profile_wrap .proj_card{
    margin-top: 12px !important;
    margin-right: 12px !important;
} */
.mid_mix{
    /* border: 1px solid green; */
    min-height: 400px;
}
.mix_left{
    /* border: 1px solid red; */
    width: 48%;
}
.proj_card{
    /* border: 1px solid green; */
    width: 100%;
    min-height: 420px;
}
.proj_card_bot{
    /* border: 1px solid blue; */
    width: 100%;
    height: 40px;
}
.proj_card_bot h3,.proj_card_bot p{
    margin-bottom: 0;
    line-height: normal;
}
.proj_card_bot h3{
    margin-top: 4px;
    font-size: 12px !important;
}
.proj_card_top{
    /* border: 1px solid blue; */
    width: 100%;
    /* height: 400px; */
    background: url(../images/frame.png) no-repeat;
    background-position: center;
    background-size: cover;
    transition: all .3s ease-in-out;
    /* transition: background-size .3s ease-in-out; */

}
.proj_card_top:hover{
    /* background-size: 210%; */
    /* background-size: 110%; */
    transform: scale(1.2);
}
.over_extend:hover{
    /* background-size: 210%; */
    /* background-size: 110%; */
}
.mix_right{
    /* border: 1px solid green; */
}
.mix_right_top{
    height: 48%;
}
.mix_right_top .proj_card{
    min-height: 208px;
}
.mix_right_top .proj_card_top{
    height: 168px;
}
.proj_wrap{
    /* border: 1px solid red; */
    overflow-x: scroll;
}
  /* .proj_wrap::-webkit-scrollbar {
    height: 6px;
  } */
.proj_wrap a{
    color: var(--dark);
}
.proj_wrap .proj_card{
    width: 276px;
    margin-right: 24px;
}
.proj_wrap .proj_card_top{
    width: 276px;
}


.footer_container{
    /* border: 1px solid blue; */
    /* height: 64px; */
    margin-top: 40px;
    /* margin-top: 94px; */
}
.footer{
    /* border: 1px solid green; */
}

.footer_hr{
    background:var(--hr);
    height: 1px;
    /* width: 100%; */
    margin-bottom: 40px;

}
.footer_top{
    /* border: 1px solid blue; */
    min-height: 96px;
    /* padding: 16px 0;   */
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.f_top_card{
    /* border: 1px solid green; */
    width: 33.3%;
    position: relative;
    color: var(--dark);
    /* color: rgba(0, 0, 0, 0.8); */
    /* color: var(--hr); */
    padding: 16px;
    padding-left: 49px;
    border-right: 1px solid var(--hr);

}
.f_top_card:last-child{
    border-right: none;
}
.f_top_card img{
    /* border: 1px solid green; */
    position: absolute;
    top:16px;
    /* transform: translateY(-50%); */
    left: 16px;
    width: 24px;
    height: 24px;
}
.f_top_card p{
    /* border: 1px solid blue; */
    font-weight: 500;
    margin-top: 4px;
}
.footer_mid{
    /* border: 1px solid blue; */
    width: 100%;
    min-height: 348px;
    background: #F9F9F9;
}
.f_mid_top{
    /* border: 1px solid red; */
    min-height: 80px;

    margin-top: 16px;
    /* border-bottom: 0.5px solid var(--hr); */
    /* padding: 16px 0; */
    position: relative;
}
.f_mid_top_hr{
    width: 100%;

    /* border: 1px solid var(--hr); */
    /* margin-top: 8px; */
    height: 1px;
    background: var(--hr);
}
.f_ult{
    width: 100%;
    /* border: 1px solid green; */
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
.f_mid_top_left{
    width: 49%;
    /* border: 1px solid green; */
}
.f_mid_top_left img{
    /* border: 1px solid red; */
    width: 61.091px;
height: 56px;
margin-right: 24px;
}
.f_mid_top_left ul {
    /* border: 1px solid blue; */
    height: 35px;
    padding-left: 24px;
    border-left: 1px solid var(--hr);
}
.f_mid_top_left ul li a{
    /* border: 1px solid red; */
    padding: 5px;
    transition: .3s ease-in-out;
    color: var(--dark);
    font-size: 24px;
}
.f_mid_top_left ul li a:hover{
    color: var(--main);
}
.f_mid_top_right{
    width: auto;
}
.f_mid_top_right p{
    color: #475769;
    font-weight: 500;
line-height: 16px;
    margin-bottom: 4px;
}

.sub{
    /* border: 1px solid green; */
    display: flex;
}
.sub input{
    border: 1px solid #C9C9C9;
    width: 360px;
height: 48px;
color: #A1A9B2;
font-weight: 400;
line-height: 16px;
padding: 8px;
outline: none;
}
.sub button{
    background: var(--main);
    height: 100%;
    padding: 15px;
    border: none;
    color: var(--white);
    transition: .3s ease-in-out;
}
.sub button:hover{
    /* border: 1px solid var(--main); */
    /* color: var(--main); */
    background: var(--dark);
}
.f_mid_bot{
    /* border: 1px solid blue; */
    min-height: 96px;
    /* padding-top: 16px !important;
    padding-bottom: 16px !important; */
    margin-top: 40px;
}
.f_ind{
    /* border: 1px solid green; */
    min-height: 132px;
    width: 20%;
}
.f_ind a{
    /* color: var(--hr); */
    color: var(--dark);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
line-height: 20px;
transition: .3s ease-in-out;
}
.f_ind a:hover{
    color: var(--main);
}
.lead{
    margin-bottom: 24px;
}
.footer_bottom{
    /* border: 1px solid blue; */
    min-height: 64px;
}
.footer_bottom p{
    color: var(--dark);
    text-transform: uppercase;
font-weight: 400;
/* border: 1px solid red; */
}
.footer_bottom a{
    color: var(--dark);
    transition: .3s ease-in-out;
    /* border: 1px solid green; */
    /* padding: 0 12px; */
}
.footer_bottom a:hover{
    color: var(--main);
}
.footer_bottom span{
    /* border: 1px solid yellow; */
    padding: 0 12px;
}

.scroll_btn{
    /* border: 1px solid green; */
    width: 70px;
    height: 50px;
    position: absolute;
    top:63px;
    right:0;
}
.scroll_btn i{
    /* border: 1px solid green; */
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    transition: .3s ease-in-out;
}
.scroll_btn i:hover{
    color: var(--main);
}
/* who css  */
.spec_hr{
    margin-bottom: 30px !important;
}
.who_mid_wrap .mid_card{
    /* border: 1px solid green; */
    width: 33% !important;
    min-height: 150px !important;
}
.who_mid_wrap .mid_card:nth-child(1){
    border-bottom: none !important;
}
.who_mid_wrap .mid_card:nth-child(2){
    border-right: 1px solid var(--hr);
}

.who_wrap{
    /* border: 1px solid green; */
    width: 100%;
}
.who_wrap .proj_card{
    /* border: 1px solid blue; */
    width: 290px;
    min-height: 344px;
    /* height: auto; */
    margin-right: 12px;
    margin-top: 12px;
    /* margin-right: 24px;
    margin-top: 24px; */
}
.gal .who_wrap .proj_card{
    width: 390px;
}
.who_wrap .proj_card_top{
    /* height: 304px; */
}
.who_wrap .proj_card_bot{
    height: 64px;
    /* border: 1px solid blue; */
}
.who_wrap .proj_card_bot p{
    margin-top: 3px;
}
.who_social_box{
    /* border: 1px solid red; */
    width: 100%;
    min-height: 25px;
    margin-top: 6px;

}
.who_social_box i{
    /* border: 1px solid blue; */
    padding: 5px;
    cursor: pointer;
    transition: .3s ease-in-out;
}
.who_social_box i:hover{
    color: var(--main);
}




.mid{
    /* border: 1px solid red; */
}
.contact{
    /* border: 1px solid red; */
    width: 100%;
    padding: 0 104px;
}
.contact_left{
    /* border: 1px solid red; */
    width: 48%;
}
.c_left_one{
    /* border: 1px solid blue; */
    width: 48%;
}
.c_left_one h2{
    color: #081D34;
/* font-family: Avenir Next; */
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 133.333% */
}
.c_left_one h3{
    margin-top: 16px;
    color: #081D34;
/* font-family: Avenir Next; */
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 133.333% */
}
.c_left_one p{
    margin-bottom: 16px;
    color: #475769;
/* font-family: Avenir Next; */
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.form_container{
    /* border: 1px solid green; */
    width: 100%;
}
.form_container h1{
    margin-bottom: 14px;
}
.form{
    /* border: 1px solid blue; */
    width: 400px;
}
.form_one{
    /* border: 1px solid red; */
    width: 100%;
    margin-top: 16px;
}
.form_left{
    width: 	48%;
    /* border: 1px solid green; */
}
.form_left p{
    color: #081D34;
line-height: 12px; /* 120% */
margin-bottom: 4px;
font-weight: 500;
font-size: 10px;
}
.form_left input{
    border: 1px solid #C9C9C9;
    width: 100%;
height: 40px;
color: #A1A9B2;
font-weight: 400;
line-height: 16px;
padding: 8px;
/* outline: none; */
font-size: 14px;
}
.form_left select{
    border: 1px solid #C9C9C9;
    width: 100%;
height: 40px;
color: #A1A9B2;
font-weight: 400;
line-height: 16px;
padding: 8px;
/* outline: none; */
font-size: 14px;
}
.form_left textarea{
    border: 1px solid #C9C9C9;
    width: 100%;
min-height: 136px;
color: #A1A9B2;
font-weight: 400;
line-height: 16px;
padding: 8px;
/* outline: none; */
font-size: 14px;
}
.form_complete{
    width: 100% !important;
}

/*the container must be positioned relative:*/
.custom-select {
    position: relative;
    width: 100%;
    /* border: 1px solid green; */
  }

  .custom-select select {
    display: none; /*hide original SELECT element:*/
  }

  .select-selected {
    background: var(--white);

  }

  /*style the arrow inside the select element:*/
  .select-selected:after {

    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #c9c9c9 transparent transparent transparent;
  }

  /*point the arrow upwards when the select box is open (active):*/
  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #c9c9c9 transparent;
    top: 7px;
  }

  /*style the items (options), including the selected item:*/
  .select-items div,.select-selected {
    color: var(--hr);
    padding: 8px 16px;
    /* border: 1px solid var(--black); */
    border: 1px solid #c9c9c9;
    /* border-radius: 5px; */
    cursor: pointer;
    user-select: none;
  }
  .select-items div{
    border: none;
  }
  /*style items (options):*/
  .select-items {
    position: absolute;
    background-color: var(--white);
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    margin-top:10px;
    border-radius:10px;
    box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.1);

  }

  /*hide the items when the select box is closed:*/
  .select-hide {
    display: none;
  }

  .select-items div:hover, .same-as-selected {
    color: var(--main);
  }

  .form_button{
    /* border: 1px solid red; */
    width: 100%;
    margin-top: 24px;
  }
  .form_btn{
    text-transform: uppercase;
    border: none;
    background: var(--main);
    padding: 15px 55px;
    font-weight: 600;
line-height: 16px;
color: var(--white);
transition: .3s ease-in-out;
  }
  .form_btn:hover{
    background: var(--dark);
    /* border: 1px solid var(--main); */
    /* color: var(--main); */
  }

/* for gallery  */

.gallery_card{
    /* border: 1px solid red; */
    min-height: auto !important;
}
.gallery_card .proj_card_top{
    height: 240px ;
}
.gallery_card .proj_card_bot{
    height: auto ;
}

/* end  */



.pro_card p{
    display: flex;
    align-items: center;
}
.pro_card span{
    margin-right: 5px;
}

.v_overview{
    /* border: 1px solid red; */
    width: 100%;
}
.v_overview h3{
    margin-bottom: 16px;
    color: #081D34;
/* font-family: Avenir Next; */
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 56px; /* 140% */
}
.v_overview p{
    color: #475769;
/* font-family: Avenir Next; */
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
margin-bottom: 40px;

}
.v_album{
    /* border: 1px solid green; */
    color: var(--dark);
}
.v_img{
    /* border: 1px solid red; */
    width: 100%;
    height: 608px;
    background: url(../images/building.png) no-repeat;
background-position: center;
background-size: cover;
position: relative;
}

.v_stand{
    /* border: 1px solid red; */
    width: 600px;
    /* width:auto; */
    background: #F9F9F9;
    /* background: var(--white); */
    min-height: 80px;
    position: absolute;
left: 0;
bottom: 0;
/* padding:0 15px; */
padding: 15px;
}
.v_one{
    /* border: 1px solid blue; */
    width: 32%;
    /* width: 250px; */
    min-height: 56px;
    border-right: 1px solid var(--hr);
    /* padding-left: 15px; */
}
.v_one:last-child{
    border-right: none;
    /* padding-left: 24px; */
}
.v_one_btn{
    color: var(--white);
    background: var(--main);
    /* padding: 5px; */
    font-size: 14px;
/* font-style: normal; */
font-weight: 600;
line-height: 16px;
border: none;
}
.v_one p{
    color: #475769;
/* font-family: Avenir Next; */
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: 14px; /* 140% */
margin-bottom: 0;
}
.v_one h3{
    color: #081D34;
/* font-family: Avenir Next; */
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 133.333% */
margin-bottom: 0;
}
.burx,.classic_x,.classic_pop{
    display: none;
}


.svg_top{
    /* border: 1px solid red; */
    display: none;
}
.new_proj{
    overflow: hidden;
    /* position: relative; */
    /* border: 1px solid red; */
    width: auto;
    height: auto;
}
.new_a{
    color: var(--dark);
}

.news_wrap{
    /* border: 1px solid red; */
    width: 100%;
    justify-content: space-between;
}
.news{
    /* border: 1px solid green; */
    width: 48%;
    /* margin-top: 24px; */
    /* margin-right: 24px; */
}
.news_top{
    /* border: 1px solid green; */
    width: 100%;
    height: 416px;
    overflow: hidden;
}
.news_img{
    /* border: 1px solid green; */
    width: 100%;
    height: 100%;
    background: url(../images/frame.png) no-repeat;
    background-size: cover;
    background-position: center;
    transition: all .3s ease-in-out;
}
/* .news_img:hover{
    transform: scale(1.2);
} */
.news_bot{
    /* border: 1px solid green; */
    margin-top: 12px;
    /* height: 100px; */
}
.news_ellipsis{
    -webkit-line-clamp: 3;
    margin-top: 8px;
    margin-bottom: 16px;
}
.news_bot h3{
    -webkit-line-clamp: 2;
    margin-top: 8px;
}
.news_bot p{
    color: var(--hr);
}
.news_btn{
    /* border: 1px solid blue; */
    width: 100%;
    height: 60px;
}
.news_btn_btn{
    /* border: 1px solid red; */
    padding:9px  13px;
    color: var(--white);
    background: var(--main);
    /* margin-top: 32px; */
    transition: .3s ease-in-out;
}
.news_btn_btn:hover{
    background: var(--dark);
}
.cast_top{
    margin-bottom: 32px;
    /* border: 1px solid green; */
}
.news_topic{
    color: #081D34;
/* font-family: Avenir Next; */
margin-top: 8px;
font-size: 40px;
font-style: normal;
font-weight: 600;
line-height: 56px; /* 140% */
}
.cast{
    /* width: 768px; */
}
.cast_status{
    /* border: 1px solid green; */
    margin-top: 40px;
    transition: .3s ease-in-out;
    /* font */
}
.cast_status i{
    padding: 5px;
    /* border: 1px solid red; */
    margin-left: 4px;
}
.cast_status i:hover{
    color: var(--main);
}
.cast_top p{
    color: #737C87;
/* font-family: Avenir Next; */
margin-top: 8px;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.cast_bottom p{
    color: #081D34;
/* font-family: Avenir Next; */
margin-bottom: 32px;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}

.my_slider{
    /* border: 1px solid red; */
    width: 100%;
    /* height: auto; */
    height: 80vh;
    position: relative;
    overflow: hidden;
}
.slider_overlay{
    position: absolute;
    top:0;
    left:0;
    background: var(--dark);
    opacity: .5;
    width: 100%;
    height: 80vh;
    /* z-index:1; */
}
.my_text{
    /* border: 1px solid red; */
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color: var(--white);
    text-align: center;
    width: 80%;
}
.my_text p{
  /* color: green; */
  font-size: 16px
}
/* Slideshow container */
.slideshow-container {
    width: 100%;
    height: 80vh;
    position: relative;
    margin: auto;
    /* border: 1px solid blue; */
    display: flex;
    /* overflow: hidden; */
    animation: scroll 9s linear infinite;
  }

  /* Hide the images by default */
  .mySlides {
    /* border: 2px solid red; */
    position: relative;
    width: 100%;
    /* position: absolute;
    top:0;
    left: 0;

  float: left; */

  }
  /* .mySlides:nth-child(2){
    left: 100%;
  }
  .mySlides:nth-child(3){
    left: 200%;
  } */
  .mySlides img{
    /* border: 1px solid green; */
    width: 100%;
    height: 80vh;
    object-fit: cover;
  }
  @keyframes scroll {
    0%, 100% {
        transform: translateX(0);
    }
    16.666% {
        transform: translateX(0); /* Show the first slide for 3 seconds */
    }
    33.333% {
        transform: translateX(-100%); /* Scroll to the second slide */
    }
    50% {
        transform: translateX(-100%); /* Show the second slide for 3 seconds */
    }
    66.666% {
        transform: translateX(-200%); /* Scroll to the third slide */
    }
    83.333% {
        transform: translateX(-200%); /* Show the third slide for 3 seconds */
    }
}






  /* Fading animation */
  /* .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @keyframes fade {
    from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(0);
      }
  } */


  .icons_wrap{
    /* border: 1px solid red; */

  }

  .icon_plate{
    /* border: 1px solid green; */
    padding: 12px;
    width: 192px;
    margin: 12px 12px 0 0;
  }
  .icon_plate svg{
    width: 40px;
    height: 40px;
    /* border: 1px solid red; */
  }
  .icon_plate p{
    -webkit-line-clamp: 2;
    /* border: 1px solid green; */
  }


  .faq{
    /* border: 1px solid green; */
    width: 100%;
  }
  .faq h2{
    color: #081D34;
text-align: center;
/* font-family: Avenir Next; */
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-bottom: 32px;
  }

  .asked{
    /* border: 1px solid green; */
  }
  .asked_box{
    border: 1px solid var(--hr);
    width: 606px;
    padding:  24px;
    background: var(--white);
  }
  .asked_one{
    /* border: 1px solid blue; */
    width: 100%;
    /* height: 30px; */
    overflow: hidden;
    transition: all .3s ease-in-out;
    margin-bottom: 16px;
  }
  .asked_one:last-child{
    margin-bottom: 0;
  }

  .asked_one h3{
    color: #081D34;
/* font-family: Avenir Next; */
font-size: 20px;
font-style: normal;
font-weight: 500;
border-top: 1px solid var(--hr);
padding: 25px 0;
line-height: 30px; /* 150% */
/* border: 1px solid green; */
/* border: 1px solid green; */
  }
  .faqqis{
    border-top: none !important;
  }
  /* .asked_one.active{
    height: auto;
  } */
  .asked_one p{
    display: none;
    color: #475769;
/* font-family: Avenir Next; */
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 27px; /* 168.75% */
margin-bottom: 18px;
  }
  .asked_one i{
    transition: .3s ease-in-out;
    cursor: pointer;
  }
  .asked_one.active{
    background: var(--white);
  }
  .asked_one.active i{
    transform: rotate(180deg);

  }
  .asked_one.active p{
    display: block;
  }

  .popup-screen{
    z-index:1600;
    position:fixed;
    top:0;
    left:0;
    background: rgba(53, 53, 54, 0.62);
    width:100%;
    height:100vh;
    visibility:hidden;
    transition:0.3s ease;
    transition-property:visibility ;
    transform: scale(0);
    padding: 16px;
}
.popup-screen.active{
    visibility:visible;
    transform: scale(1);
}
.popup{
    width: 100%;
    height: auto;

    /* height: auto; */
    max-height:90vh;
    /* overflow: hidden; */
    overflow-y: auto;
    background:var(--white);
    /* border: 1px solid rgba(183, 183, 183, 0.2); */
    box-shadow: 0px 4px 16px 2px rgba(23, 23, 23, 0.05);
    border-radius: 20px;
    z-index:1700;
    opacity: 0;
    transform:translateY(20%);
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all .3s ease-in-out;
    /* padding:5px 38px; */
    padding:25px 38px;

    font-family: roboto;

    /* border: 1px solid #ccc; */
}
.popup #image-board{
  /* min-height: 500px; */
}

@media (min-width:620px){

  .popup{
      width: 50%;
      /* width: 70%; */
    }
}
.popup.active{
    opacity:1;
    transform:translateY(0);
    transition:.5s ease;
}

.popup h3{
    margin-bottom: 24px;
    color: #081D34;
text-align: center;
/* font-family: Avenir Next; */
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 140% */
}
.popup_form{
    /* border: 1px solid green; */
    width: 100%;
}
.radio_select{
    /* border: 1px solid green; */
    /* width: 100%; */
    margin-bottom: 8px  ;
}
input[type="radio"],input[type="checkbox"]{
    width: 20px;
    height: 20px;
    margin-right:8px;
    cursor: pointer;
}
/* input[type="radio"]:checked {
    border-color: var(--main);
    background-color: var(--main);
} */
.radio_select p{
    color: var(--dark);
    margin-bottom: 0;
}


.pop_cancel{
    /* border: 1px solid green; */
    width: 24px;
    height: 24px;
    position: absolute;
    top:16px;
    right: 24px;
    cursor: pointer;
}
.pop_cancel i{
    transition: .3s ease-in-out;
}
.pop_cancel:hover i{
    color: var(--main);
    transform: rotate(90deg);
}

.project_bot{
    /* border: 1px solid blue; */
    height: 125px !important;
}
.view_box{
    /* border: 1px solid red; */
    width: 100%;
    height: 60px;
}
.view_btn{
    /* border: 1px solid green; */
    /* height: 60px;
    width: auto; */
    padding: 10px;
    background: var(--main);
    color: var(--white);
    transition: .3s ease-in-out;
    /* margin-top: 100px; */
}
.view_btn:hover{
    background: var(--dark);
}

#image-board{
    /* border: 1px solid green; */
    width: 100%;
    height: 75%;
    /* margin-bottom: 24px; */
    margin: auto;
    background: url(../images/frame.png) no-repeat center/cover;
    /* background-position: center; */
    /* background-size: contain; */
    border-radius: 10px;
}
.pop_bottom{
    /* border: 1px solid red; */
    width: 100%;
    height: 20%;
    margin-top: 16px;
}
.thumbnail-container{
    /* border: 1px solid blue; */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.thumbnails{
    /* border: 1px solid blue; */
    width: 100px;
    height: 80px;
    /* margin: 5px; */
    object-fit: cover;
    border-radius: 10px;
}
/* .thumbnails.active{
    border: 1px solid green;
} */


.gallery_popup{
    /* border: 1px solid green; */
    background: transparent;
    box-shadow: none;
    /* border: none; */
    /* position: relative; */
}

.gallery_popup_screen{
    background: rgba(0, 0, 0, 0.8);
}
.chevron{
    /* border: 1px solid green; */
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    background: var(--white);
    color: var(--dark);
    transition: .3s ease-in-out;
    position: absolute;
    cursor: pointer;
}
.chevron_one{
    top:50%;
    left: 8px;
    transform: translateY(-50%);
}
.chevron_two{
    right: 8px;
    top:50%;
    transform: translateY(-50%);
}
.chevron:hover{
    background: var(--dark);
}
.chevron:hover i{
    color: var(--white);
}





.my_header{
    /* border: 1px solid red; */
    width: 100%;
    position: relative;
    height: 80vh;
    /* background: red; */
}



.slider-container {
    /* border: 1px solid green; */
    display: flex;
    transition: transform 0.5s ease;
  }

  .slider-item {
    flex: 0 0 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 2em;
    /* padding: 20px; */
    /* border: 1px solid blue; */
    height: 80vh;
  }




.to_btn{
    /* border: 1px solid white; */
    /* width:  ; */
    cursor: pointer;
    padding: 25px;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    transition: .3s ease-in-out;
    position: absolute;
    top:50%;
    /* left: 10%; */
    transform: translateY(-50%);
    z-index: 5;
    background:rgba(0, 0, 0, 0.5);
    color: var(--white);
    opacity: .3;
}
.to_btn_one{
    left: 48px;
}
.to_btn_two{
    right: 48px;
}
.to_btn:hover{
    opacity: 1;
    /* background: var(--dark); */
    /* color: var(--white); */
}


.dots-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    /* border: 1px solid green; */
    width: 100%;
    position: absolute;
    bottom: 10px;
    left: 0;
    z-index: 5;
    /* background:rgba(0, 0, 0, 0.5); */
    /* display: none; */
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #bbb;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.dot.active {
    background-color: #333;
}



.remove_top{
    margin-top: 0 !important;
}


.brochure{
    /* border: 1px solid blue; */
    min-height: auto;
    margin-top: 40px;
    /* margin-bottom: 28px; */
}
.btns{
    /* border: 1px solid green; */
    width: 100%;
    /* display: flex;
    justify-content: center; */
}
.other_btn{
    background: var(--white);
    border: 1px solid var(--main);
    color:var(--main);
    /* margin-left: 22px; */
    padding: 5px !important;
    font-size: 12px;
    margin-top: 8px;
    width: 80%;
}
.other_btn:hover{
    border: none;
}








@media (max-width:1648px){
    .contain{
        width: 100%;
    }

}

@media  (max-width:1439px){
    .contact{
        padding: 0;
    }
}


@media (max-width:1024px){
    .contain,.footer_hr_contain{
        padding:0 48px;
    }
    .join img{
        left: 48px;
    }
    .get{
        right: 48px;
    }
    .to_btn{
        font: 24px;
        width: 50px;
        height: 50px;
    }
}

@media (max-width:880px){
    .contact{
        flex-direction: column;
    }
    .contact_left{
        /* border: 1px solid red; */
        width: 100%;
        margin-bottom: 24px;
    }
    .c_left_one h2{
        font-size: 16px;
    }
    .c_left_one h3{
        font-size: 12px;
    }
    .c_left_one p{
        font-size: 10px;
    }
    .mid_flex{
        flex-direction: column;
    }
    .mid_flex .mid_left,.mid_flex .milk{
        width: 	100% !important;
        margin-bottom: 24px;
        min-height: auto;
    }
    .mid_flex .mid_right{
        min-height: 240px ;
    }
    .mid_flex .milk_right{
        width: 100% !important;
    }
    .f_ult{
        flex-direction: column;
    }
    .f_mid_top_left{
        margin-top: 24px;
        width: 100%;
    }
}


@media (max-width:768px){
    .news{
        width: 100%;
    }
    .my_text h1{
        font-size: 32px;
        line-height: normal;
    }
    .my_text p{
        font-size: 20px;
        line-height: normal;
    }
    .contain{
        padding:0 24px;
    }
    .join img{
        left: 24px;
    }
    .get{
        right: 24px;
    }
}


@media (max-width:660px){
    .v_stand{
        width: 100%;
    }
    /* .gallery_wrap a{
        width: 48%;
    } */
}

@media (max-width:659px){
    .icon_plate{
        width: 50%;
        margin: 12px 0 0 0;
    }
  }

@media (max-width:651px){
    /* .profile_wrap{
        flex-direction: column;
    }
    .profile_wrap .proj_card{
        margin: 12px auto !important;
    } */
    .who_wrap{
        flex-direction: column;
    }
    .who_wrap .proj_card{
        margin: 12px auto !important;
    }
}

@media (max-width:624px){
  .mid_card:nth-child(3){
      border-right:none;
  }
    .btns{
        flex-wrap: wrap;
    }
    .to_btn{
        opacity: 0;
        visibility: hidden;
    }
    #image-board{
        width:100%;
    }
    .thumbnail-container{
        overflow-x: auto;
    }
    .my_text h1{
        font-size: 24px;
        line-height: normal;
    }
    .my_text p{
        font-size: 14px;
        line-height: normal;
    }
    .my_text a{
        padding: 10px;
        font-size: 8px;
    }
    .cast_header{
        height: 180px;
    }
    .news_topic{
        font-size: 24px;
        line-height: 32px;
    }
    .cast_bottom p{

        font-size: 14px;
    }
    .v_overview h3{
        font-size: 24px;
    }
    .v_one h3{
        font-size: 12px;
    }
    .v_overview p{
        font-size: 14px;
    }
    .v_img{
        height: 240px;
        margin-bottom: 200px;
    }
    .v_stand{
        bottom: -205px;
        flex-direction: column;
        padding: 16px;
    }
    .v_one{
        border-right: none;
        border-bottom: 1px solid var(--hr);
        width: 100%;
    }
    .v_one:last-child{
        border-bottom: none;
        /* padding-left: 0; */
    }
    .v_one_btn{
        margin-top: 12px;
    }
    .form_container h1{
        /* margin-bottom: 14px; */
        font-size: 24px;
    }
    .send_message{
        /* margin-bottom: 14px; */
        font-size: 16px;
    }
    .form{
        width: 100%;
    }
    .svg_top{
        display: block;
        position: absolute;
        top:50%;
        right: 24px;
        transform: translateY(-50%);
        cursor: pointer;
        transition: .3s ease-in-out;
        /* padding: 5px; */
    }
    .svg_top svg{
        /* padding: 5px; */
        margin-top: 3px;
    }
    .svg_top:hover{
        border: 1px solid var(--main);
    }
    .classic_p{
        display: none;
    }
    .burx,.classic_x,.classic_pop{
        display: block;
        /* border: 1px solid green; */
    }
    .burx{
        /* display: block; */
        /* border: 1px solid green; */
        padding:0 24px;
    }
    .classic_x{
        /* border: 1px solid red; */
        font-size: 24px;
        padding: 5px;
        color: var(--white);
        position: absolute;
        top: 16px;
        left: 24px;
        cursor: pointer;
        transition: .3s ease-in-out;
    }
    .classic_x:hover{
        transform: rotate(90deg);
        color: var(--main);
    }
    .classic_pop{
        margin-top: 80px;
        color: var(--white);
    }
    /* .classic_pop a{
        color: var(--white);
        text-decoration: underline;
    } */
    .nav_container{
        /* border: 1px solid blue; */
        position: fixed;
        bottom:0;
        left:-360px;
        min-height: 100vh;
        width: 360px;
        /* z-index:111; */
        /* padding: 0; */
        background: var(--dark);
        display: block;
        overflow-y: auto;
        transition: .3s ease-in-out;
    }
    .nav_container.active{
        left: 0px;
    }
    nav{
        height: 100%;
        /* overflow-y: auto; */
        /* background: #fff; */
        color: var(--white);
        /* flex-direction: column; */
        display: block !important;
        padding-top: 20px;
    }
    nav ul{
        flex-direction: column;
        /* background: #fff; */
    }
    nav ul li{
        /* border: 1px solid yellow; */
        margin-top: 24px;

    }
    nav ul li a{
        color: var(--white);
        display: block;
        font-size: 14px;
        padding-left: 0;
    }
    .get{
        top:80%;
        width: 310px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .get:hover{
        border: 1px solid var(--main);
    }

    .header h1{
        font-size: 32px;
        line-height: normal;
    }
    .header p{
        font-size: 20px;
    }

    .f_ind a{
        font-size: 12px;
    }

    .f_mid_bot{
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .f_ind{
        width: 33.3%;
    }
    .footer_bottom{
        padding-top:16px ;
        padding-bottom:16px ;
    }
    .footer_bottom p{
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }
    .footer_bottom span{
        display: none;
    }
    /* .footer_bottom a:first-child{
        padding-top: 15px !important;
    } */
    .footer_bottom a{
        /* border-top: 1px solid var(--hr); */
        padding: 5px 0;
        /* display: inline-block; */
    }
    .footer_top{
        flex-direction: column;
    }
    .f_top_card{
        width: 100%;
        margin-bottom: 24px;
        border-right: none;
        border-bottom: 1px solid var(--hr);
    }
    .f_top_card:last-child{
        /* border-right: none; */
        border-bottom: none;
    }
    .mid_left h3{
        font-size: 24px;
    }
    .milk h3,.our_services{
        font-size: 24px;
    }
    .milk_right{
        flex-direction: column;
    }
    .milk_right .mid_card{
        width: 100%;
        /* margin-bottom: 16px ; */
        border-bottom: 1px solid var(--hr);
    }
    .mid_card:nth-child(1){
        border-right: none;
        border-bottom: 1px solid var(--hr);
    }
    .mid_card:nth-child(4){
        border:none
    }
    .who_mid_wrap{
        flex-direction: column;
    }
    .who_mid_wrap .mid_card{
        width: 100% !important;
    }
    .who_mid_wrap .mid_card:nth-child(1){
        border-bottom: 1px solid var(--hr) !important;
    }
    .who_mid_wrap .mid_card:nth-child(3){
        border-right: none!important;
    }
    .who_mid_wrap .mid_card:nth-child(2){
        border-right: none;
        border-bottom: 1px solid var(--hr)
    }
    .mini_hr{
        margin-bottom: 32px !important;
    }
}

@media (max-width:425px){
    .who_wrap .proj_card{
        width: 100%;
    }
}


@media (max-width:411px){
    .btns button{
        width: 100%;
        margin-left: 0;
    }
}





@media (max-width:768px){

    .rrf{
        font-size: 24px !important;
        line-height: normal;
    }
}
@media (max-width:624px){

    .other_btn{
        width:100%
    }
    .v_one{
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
}


.popup_home{
    /* border: 1px solid green; */
    margin-top: 48px;
    text-align: center;
}
.popup_img{
    /* border: 1px solid green; */
    position: absolute;
    top:8px;
    left:20px;
    width: 50px;
    height: 48px;
}
.popup_home button{
    margin-top: 24px;
    border: 1px solid var(--main);
    color: var(--main);
    background: var(--white);
    font-size: 16px;
    line-height: normal;
    /* width: auto; */
    /* padding: 15px; */
    width: 400px;
    height: auto;
    border-radius: 25px;
}
.popup_home button:hover{
    border: none;
}
@media (max-width:498px){
    .popup_home button{
        width: 100%;
    }
}
@media (max-width:624px){
    .asked_one h3{
        font-size: 16px;
    }
    .asked_one p{
        font-size: 12px;
    }
  }



    .project_wrap,.project_v_wrap,.new_wrap{
        /* border: 1px solid green; */
        gap: 12px;
    }
    .project_wrap .proj_card,.project_v_wrap a,.new_wrap .proj_card{
        /* border: 1px solid red; */
        width: 32%;
        margin-right: 0 !important;
    }




    @media (max-width:1648px){
        .contain{
            width: 100%;
        }

    }

    @media  (max-width:1300px){
        .project_wrap .proj_card,.project_v_wrap a,.new_wrap .proj_card{
            width: 32%;
        }
    }
    @media  (max-width:1439px){
        .contact{
            padding: 0;
        }
    }

    @media (max-width:1106px){
        .gallery_wrap a{
            width: 32%;
        }
    }

    @media (max-width:1024px){
        /* .gallery_wrap a{
            width: 32%;
        } */
        .contain,.footer_hr_contain{
            padding:0 48px;
        }
        .join img{
            left: 48px;
        }
        .get{
            right: 48px;
        }
        .to_btn{
            font: 24px;
            width: 50px;
            height: 50px;
        }
    }

    @media  (max-width:997px){
        .project_wrap .proj_card,.project_v_wrap a,.new_wrap .proj_card{
            width: 49%;
        }
    }

    @media (max-width:880px){
        .contact{
            flex-direction: column;
        }
        .contact_left{
            /* border: 1px solid red; */
            width: 100%;
            margin-bottom: 24px;
        }
        .c_left_one h2{
            font-size: 16px;
        }
        .c_left_one h3{
            font-size: 12px;
        }
        .c_left_one p{
            font-size: 10px;
        }
        .mid_flex{
            flex-direction: column;
        }
        .mid_flex .mid_left,.mid_flex .milk{
            width: 	100% !important;
            margin-bottom: 24px;
            min-height: auto;
        }
        .mid_flex .mid_right{
            min-height: 240px ;
        }
        .mid_flex .milk_right{
            width: 100% !important;
        }
        .f_ult{
            flex-direction: column;
        }
        .f_mid_top_left{
            margin-top: 24px;
            width: 100%;
        }
    }


    @media (max-width:768px){
        .news{
            width: 100%;
        }
        .my_text h1{
            font-size: 32px;
            line-height: normal;
        }
        .my_text p{
            font-size: 20px;
            line-height: normal;
        }
        .contain{
            padding:0 24px;
        }
        .join img{
            left: 24px;
        }
        .get{
            right: 24px;
        }
    }


    @media (max-width:660px){
        .v_stand{
            width: 100%;
        }
        /* .gallery_wrap a{
            width: 48%;
        } */
    }

    @media (max-width:659px){
        .icon_plate{
            width: 50%;
            margin: 12px 0 0 0;
        }
      }

    @media (max-width:651px){
        .project_wrap .proj_card,.project_v_wrap a,.new_wrap .proj_card{
            width: 100%;
        }
        /* .profile_wrap{
            flex-direction: column;
        }
        .profile_wrap .proj_card{
            margin: 12px auto !important;
        } */
        .who_wrap{
            flex-direction: column;
        }
        .gallery_wrap{
            flex-direction: row;
        }
        .gallery_wrap a{
            width: 48%;
        }
        .who_wrap .proj_card{
            margin: 12px auto !important;
        }
    }

    @media (max-width:624px){
        .btns{
            flex-wrap: wrap;
        }
        .to_btn{
            opacity: 0;
            visibility: hidden;
        }
        #image-board{
            width:100%;
        }
        .thumbnail-container{
            overflow-x: auto;
        }
        .my_text h1{
            font-size: 24px;
            line-height: normal;
        }
        .my_text p{
            font-size: 14px;
            line-height: normal;
        }
        .my_text a{
            padding: 10px;
            font-size: 8px;
        }
        .cast_header{
            height: 180px;
        }
        .news_topic{
            font-size: 24px;
            line-height: 32px;
        }
        .cast_bottom p{

            font-size: 14px;
        }
        .v_overview h3{
            font-size: 24px;
        }
        .v_one h3{
            font-size: 12px;
        }
        .v_overview p{
            font-size: 14px;
        }
        .v_img{
            height: 240px;
            margin-bottom: 200px;
        }
        .v_stand{
            bottom: -205px;
            flex-direction: column;
            padding: 16px;
        }
        .v_one{
            border-right: none;
            border-bottom: 1px solid var(--hr);
            width: 100%;
        }
        .v_one:last-child{
            border-bottom: none;
            /* padding-left: 0; */
        }
        .v_one_btn{
            margin-top: 12px;
        }
        .form_container h1{
            /* margin-bottom: 14px; */
            font-size: 24px;
        }
        .send_message{
            /* margin-bottom: 14px; */
            font-size: 16px;
        }
        .form{
            width: 100%;
        }
        .svg_top{
            display: block;
            position: absolute;
            top:50%;
            right: 24px;
            transform: translateY(-50%);
            cursor: pointer;
            transition: .3s ease-in-out;
            /* padding: 5px; */
        }
        .svg_top svg{
            /* padding: 5px; */
            margin-top: 3px;
        }
        .svg_top:hover{
            border: 1px solid var(--main);
        }
        .classic_p{
            display: none;
        }
        .burx,.classic_x,.classic_pop{
            display: block;
            /* border: 1px solid green; */
        }
        .burx{
            /* display: block; */
            /* border: 1px solid green; */
            padding:0 24px;
        }
        .classic_x{
            /* border: 1px solid red; */
            font-size: 24px;
            padding: 5px;
            color: var(--white);
            position: absolute;
            top: 16px;
            left: 24px;
            cursor: pointer;
            transition: .3s ease-in-out;
        }
        .classic_x:hover{
            transform: rotate(90deg);
            color: var(--main);
        }
        .classic_pop{
            margin-top: 80px;
            color: var(--white);
        }
        /* .classic_pop a{
            color: var(--white);
            text-decoration: underline;
        } */
        .nav_container{
            /* border: 1px solid blue; */
            position: fixed;
            bottom:0;
            left:-360px;
            min-height: 100vh;
            width: 360px;
            /* z-index:111; */
            /* padding: 0; */
            background: var(--dark);
            display: block;
            overflow-y: auto;
            transition: .3s ease-in-out;
        }
        .nav_container.active{
            left: 0px;
        }
        nav{
            height: 100%;
            /* overflow-y: auto; */
            /* background: #fff; */
            color: var(--white);
            /* flex-direction: column; */
            display: block !important;
            padding-top: 20px;
        }
        nav ul{
            flex-direction: column;
            /* background: #fff; */
        }
        nav ul li{
            /* border: 1px solid yellow; */
            margin-top: 24px;

        }
        nav ul li a{
            color: var(--white);
            display: block;
            font-size: 14px;
            padding-left: 0;
        }
        .get{
            top:80%;
            width: 310px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .get:hover{
            border: 1px solid var(--main);
        }

        .header h1{
            font-size: 32px;
            line-height: normal;
        }
        .header p{
            font-size: 20px;
        }

        .f_ind a{
            font-size: 12px;
        }

        .f_mid_bot{
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        .f_ind{
            width: 33.3%;
        }
        .footer_bottom{
            padding-top:16px ;
            padding-bottom:16px ;
        }
        .footer_bottom p{
            display: flex;
            flex-direction: column;
            width: 100%;
            text-align: center;
        }
        .footer_bottom span{
            display: none;
        }
        /* .footer_bottom a:first-child{
            padding-top: 15px !important;
        } */
        .footer_bottom a{
            /* border-top: 1px solid var(--hr); */
            padding: 5px 0;
            /* display: inline-block; */
        }
        .footer_top{
            flex-direction: column;
        }
        .f_top_card{
            width: 100%;
            margin-bottom: 24px;
            border-right: none;
            border-bottom: 1px solid var(--hr);
        }
        .f_top_card:last-child{
            /* border-right: none; */
            border-bottom: none;
        }
        .mid_left h3{
            font-size: 24px;
        }
        .milk h3,.our_services{
            font-size: 24px;
        }
        .milk_right{
            flex-direction: column;
        }
        .milk_right .mid_card{
            width: 100%;
            /* margin-bottom: 16px ; */
            border-bottom: 1px solid var(--hr);
        }

        .mid_card:nth-child(1){
            border-right: none;
            border-bottom: 1px solid var(--hr);
        }
        .mid_card:nth-child(4){
            border:none
        }
        .who_mid_wrap{
            flex-direction: column;
        }
        .who_mid_wrap .mid_card{
            width: 100% !important;
        }
        .who_mid_wrap .mid_card:nth-child(1){
            border-bottom: 1px solid var(--hr) !important;
        }
        .who_mid_wrap .mid_card:nth-child(2){
            border-right: none;
            border-bottom: 1px solid var(--hr)
        }
        .mini_hr{
            margin-bottom: 32px !important;
        }
    }

    @media (max-width:425px){
        .gal .who_wrap .proj_card{
            width: 100%;
        }
    }


    @media (max-width:411px){
        .btns button{
            width: 100%;
            margin-left: 0;
        }
    }





    @media (max-width:768px){

        .rrf{
            font-size: 24px !important;
            line-height: normal;
        }
    }
    @media (max-width:624px){

        .other_btn{
            width:100%
        }
        .v_one{
            padding-bottom: 16px;
            margin-bottom: 16px;
        }
    }


    .popup_home{
        /* border: 1px solid green; */
        margin-top: 48px;
        text-align: center;
    }
    .popup_img{
        /* border: 1px solid green; */
        position: absolute;
        top:8px;
        left:20px;
        width: 50px;
        height: 48px;
    }
    .popup_home button{
        margin-top: 24px;
        border: 1px solid var(--main);
        color: var(--main);
        background: var(--white);
        font-size: 16px;
        line-height: normal;
        /* width: auto; */
        /* padding: 15px; */
        width: 400px;
        height: auto;
        border-radius: 25px;
    }
    .popup_home button:hover{
        border: none;
    }
    @media (max-width:498px){
        .popup_home button{
            width: 100%;
        }
    }
    @media (max-width:624px){
        .asked_one h3{
            font-size: 16px;
        }
        .asked_one p{
            font-size: 12px;
        }
      }

      @media (max-width:468px){
        .gallery_wrap{
            flex-direction: column;
        }
        .gallery_wrap a{
            width: 100%;
        }
      }
/* IYIOLA'S CSS STARTS */

.fd{
  display: flex;
  flex-direction: column;
}

/* testimonials starts */
.testimonials{
  gap: 50px;
  padding-bottom: 30px;
}

.testimonials .top{
  justify-content: center;
  align-items: center;
}

.testimonials .top h3{
  color: #000;
  text-align: center;
  font-family: var(--main);
  font-size: 45px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.9px;
}

.testimonials .down{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.imgp{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.testimonials .down .left{
  height: 400px;
  padding-right: 30px;
  overflow: auto;
  gap: 30px;
  padding-left: 0%;
}

.testimonials .down .left .user{
  display: flex;
  padding: 23px 25px;
  align-items: flex-start;
  gap: 30px;
  cursor: pointer;
  position: relative;
  border: 1px solid #fff;
}

.testimonials .down .left .user::before {
  content: "";
  position: absolute;
  left: -30%;
  top: 50%;
  height: 80%;
  border-left: 3px solid #EDEDED;;
  transform: translateY(-50%);
  height: 140%;
}

.testimonials .down .left .user.active::before {
  content: "";
  position: absolute;
  left: -30%;
  top: 50%;
  height: 80%;
  border-left: 3px solid var(--main);;
  transform: translateY(-50%);
  height: 140%;
}

.testimonials .down .left .user.active{
  border-radius: 15px;
  border: 0.5px solid #C3C3C3;
  background: #FFF;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.10);
}

.testimonials .down .left .user .img{
  width: 57px;
  height: 57px;
  border-radius: 50%;
}

.testimonials .down .left .user .text{

}

.testimonials .down .left .user .text h3{
  color: #000;
  text-align: center;
  font-family: var(--main);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.46px;
}

.testimonials .down .left .user .text p{
  color: #5E5E5E;
  font-family: var(--main);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.32px;
}

.testimonials .down .right{
  width: 75vw;
  height: 398px;
  justify-content: center;
  gap: 38px;
  padding: 30px;
  border-radius: 20px;
  /* background: ; */
}

.testimonials .down .right h1{
  color: var(--main);
  font-family: var(--main);
  font-size: 38px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.testimonials .down .right p{
  color: #5E5E5E;
  text-align: justify;
  font-family: var(--main);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 179.676%; /* 32.342px */
}

.testimonials .down .right h3{
  color: #000;
  font-family: var(--main);
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.44px;
}

.tabcontent {
    display: none;
}

.tabcontent.active {
    display: flex;
}

.testimonials_mobile{
  display: none;
}

/* testimonials ends */

@media (min-width:501px) and (max-width: 990px) {

    /* testimonials starts */
    .testimonials{
      gap: 30px;
      padding-bottom: 30px;
    }

    .testimonials .top{
      justify-content: center;
      align-items: center;
    }

    .testimonials .top h3{
      color: #000;
      text-align: center;
      font-family: var(--main);
      font-size: 40px;
      font-style: normal;
      font-weight: 600;
      letter-spacing: -0.9px;
    }

    .testimonials .down{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .testimonials .down .left{
      gap: 30px;
      padding-left: 5%;
    }

    .testimonials .down .left .user{
      display: flex;
      padding: 13px 15px;
      align-items: flex-start;
      gap: 30px;
      cursor: pointer;
      position: relative;
      border: 1px solid #fff;
    }

    .testimonials .down .left .user::before {
      content: "";
      position: absolute;
      left: -15%;
      top: 50%;
      height: 80%;
      border-left: 3px solid #EDEDED;;
      transform: translateY(-50%);
      height: 140%;
    }

    .testimonials .down .left .user.active::before {
      content: "";
      position: absolute;
      left: -15%;
      top: 50%;
      height: 80%;
      border-left: 3px solid var(--main);;
      transform: translateY(-50%);
      height: 140%;
    }

    .testimonials .down .left .user.active{
      border-radius: 15px;
      border: 0.5px solid #C3C3C3;
      background: #FFF;
      box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.10);
    }

    .testimonials .down .left .user .img{
      width: 57px;
      height: 57px;
      border-radius: 50%;
    }

    .testimonials .down .left .user .text{

    }

    .testimonials .down .left .user .text h3{
      color: #000;
      text-align: center;
      font-family: var(--main);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.46px;
    }

    .testimonials .down .left .user .text p{
      color: #5E5E5E;
      font-family: var(--main);
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      letter-spacing: -0.32px;
    }

    .testimonials .down .right{
      width: 72vw;
      height: auto;
      justify-content: center;
      gap: 38px;
      padding: 20px;
      border-radius: 20px;
      /* background: ; */
    }

    .testimonials .down .right h1{
      color: var(--main);
      font-family: var(--main);
      font-size: 27px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }

    .testimonials .down .right p{
      color: #5E5E5E;
      text-align: justify;
      font-family: var(--main);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 179.676%; /* 32.342px */
    }

    .testimonials .down .right h3{
      color: #000;
      font-family: var(--main);
      font-size: 22px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      letter-spacing: -0.44px;
    }

    .tabcontent {
        display: none;
    }

    .tabcontent.active {
        display: flex;
    }

    .testimonials_mobile{
      display: none;
    }

    /* testimonials ends */
}

@media (max-width: 500px) {

    /* testimonials_mobile starts */
    .testimonials{
      display: none;
    }

    .testimonials_mobile{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 25px;
    }


    .testimonials_mobile .text h1{
      color: var(--main);
      font-family: var(--main);
      font-size: 38px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }

    .testimonials_mobile .text p{
      color: #5E5E5E;
      text-align: justify;
      font-family: var(--main);
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 179.676%; /* 32.342px */
    }

    .testimonials_mobile .text h3{
      color: #000;
      font-family: var(--main);
      font-size: 22px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      letter-spacing: -0.44px;
    }

    .testimonials_mobile .top{
      align-items: center;
    }

    .testimonials_mobile .top h3{
      color: #000;
      text-align: center;
      font-family: var(--main);
      font-size: 30px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      letter-spacing: -0.6px;
    }

    .testimonials_mobile .top img{
      width: 157px;
      height: 13px;
    }

    .test_slider{
      display: none;
      width: 90vw;
      padding: 4vw;
      flex-direction: column;
      gap: 20px;
      flex-shrink: 0;
      border-radius: 9.498px;
      /* background: ; */
    }

    .test_slider h3{
      color: var(--main);
      font-family: var(--main);
      font-size: 20px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }

    .test_slider p{
      color: #5E5E5E;
      text-align: justify;
      font-family: var(--main);
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 179.676%; /* 25.155px */
    }

    .test_slider .user{
      display: flex;
      /* justify-content: center; */
      align-items: center;
      gap: 8px;
    }

    .test_slider .user .img{
      border-radius: 50%;
      width: 49px;
      height: 49px;
    }

    .test_slider .user h3{
      color: #000;
      text-align: center;
      font-family: var(--main);
      font-size: 15px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      letter-spacing: -0.3px;
    }

    .test_slider .user p{
      color: var(--main);
      font-family: var(--main);
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      letter-spacing: -0.26px;
    }

    .fade{
      animation: fade 1.5s;
    }

    @keyframes fade {
      from {
    	opacity: .4
    	}

      to {
    	opacity: 1
          }
    }

    .dot{
      width: 5px;
      height: 5px;
      background-color: #D9D9D9;
      display: inline-block;
      border-radius: 50%;
      margin: 0 2px;
      transition: background-color 0.6s ease;
    }

    .dots .active{
      background-color: #717171;
      border-radius: 10px;
      background: var(--main);
      width: 34px;
      height: 5px;
    }

    /* testimonials_mobile ends */

    .service{
      margin-bottom: 30px;
    }
}

/* counter starts */

.counter_main{
  display: flex;
  justify-content: space-evenly;
  gap: 30px;
  padding: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.counter-container{
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--main);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 1px 1px 1px 1px var(--main);
  width: 200px;
  height: 150px;
}

.counter-container i{
  color: var(--main);
  font-size: 35px;
}

.counter-container .counter{
  font-size: 15px
}

.counter-container span{
  text-transform: capitalize;
}

/* counter ends */

/* services starts */

.service_main{
  display: flex;
  gap: 5vw;
  flex-wrap: wrap;
  justify-content: center;
}

.service{
  width: 300px;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--main);
  /* border-radius: 20px; */
  /* margin-left: 33px; */
  padding: 20px;
  box-shadow: 1px 1px 1px 1px var(--main);
}
.service svg{
  color: var(--main);
  font-size: 35px;
}

.service_main a{
  color: inherit;
}

/* services ends */

@media (min-width: 1650px) {
  .testimonials .down .right{
    width: calc(100% - 140px);
  }
}


.sign_container{
  top: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: fixed;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 999;
}

.sign_container .form{
  width: 462px;
  min-height: 550px;
  border-radius: 15.587px;
  background: #FFF;
  padding: 13px;
  margin: auto 0;
  position: fixed;
  /* top: 50%; */
  left: 50%;
  transform: translate(-50%, 1%);
}

.sign_container .form .form_header{
  padding: 13px;
  border-bottom: 1px solid #D9D9D9F0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.sign_container .form .form_header h3{
  color: #292D32;
  font-family: DM Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.4px;
}

.sign_container .form .form_header img{
  position: absolute;
  right: 5px;
  height: 15px;
  width: 15px;
}

.sign_container .form .form_body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border-bottom: 1px solid #D9D9D9;
  position: relative;
}

.sign_container .form .form_body .input_cont{
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.sign_container .form .form_body .input_cont p{
  color: #000;
  font-family: DM Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.28px;
}

.sign_container .form .form_body .input_cont input{
  width: calc(100% - 40px);
  padding: 20px;
  /* height: 51px; */
  border-radius: 8px;
  border: 0.8px solid #D9D9D9;
}

.sign_container .form .form_body .input_cont img{
  position: absolute;
  bottom: 17px;
  right: 18px;
  height: 18px;
}

.sign_container .form .form_body .submit{
  display: flex;
  width: 100%;
  height: 51px;
  padding: 15px 135px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #D33535;
  border: none;
  color: #FFF;
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.32px;
  margin: 10px 0;
}

.sign_container .form .form_body .or{
  color: #292D32;
  font-family: DM Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.28px;
  position: absolute;
  bottom: -12px;
  left: 43%;
  padding: 5px 24px;
  background: #fff;
}

.form_footer{
  padding: 15px 0;
}

/* IYIOLA'S CSS ENDS */