/*==============================HEADER RESPONSIVE==============================*/

/* Tablet */
@media (max-width: 1100px) {
    .alxo-header-container{
        width:94%;
    }

    .alxomenu-list{
        gap:25px;
    }

    .alxomenu-link{
        font-size:14px;
    }

    .alxomenu-columns{
        column-gap:30px;
    }

    .alxosearch-header,
    .alxosearch-content{
        width:calc(100% - 100px);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .alxo-main-header{
        height:60px;
    }

    .alxo-header-container{
        width:100%;
        height:60px;
        padding:0 14px;
        gap:6px;
    }

    .alxo-logo{
        flex:1 1 auto;
        min-width:0;
    }

    .alxo-logo img{
        width:58px;
        height:58px;
    }

    .alxo-logo-text{
        display:none;
    }

    /* Mobile menu button */
    .alxo-mobile-toggle{
        width:42px;
        height:42px;
        padding:0;
        border:0;
        background:transparent;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        cursor:pointer;
        flex:0 0 42px;
        z-index:10002;
    }

    .alxo-mobile-toggle span{
        display:block;
        width:22px;
        height:2px;
        background:#fff;
        border-radius:2px;
        transition:transform .25s ease, opacity .25s ease;
    }

    .alxo-mobile-toggle.active span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .alxo-mobile-toggle.active span:nth-child(2){
        opacity:0;
    }

    .alxo-mobile-toggle.active span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    /* Main navigation becomes a full-screen scrollable mobile menu */
    .alxomenu{
        position:fixed;
        top:60px;
        left:0;
        width:100%;
        height:calc(100dvh - 60px);
        background:#111;
        overflow-y:auto;
        overflow-x:hidden;
        padding:8px 18px 30px;
        display:none;
        z-index:10001;
    }

    .alxomenu.mobile-open{
        display:block;
    }

    .alxomenu-list{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        gap:0;
    }

    .alxomenu-item{
        width:100%;
        position:relative;
        border-bottom:1px solid #292929;
    }

    .alxomenu-link{
        width:100%;
        min-height:58px;
        justify-content:space-between;
        padding:17px 4px;
        font-size:16px;
    }

    .alxomenu-link::before{
        bottom:0;
        height:2px;
    }

    .alxomenu-link::after{
        margin-right:5px;
    }

    /* Mega menus become normal accordion sections */
    .alxomenu-mega{
        position:static;
        width:100%;
        max-width:none;
        padding:0 4px 18px;
        background:#171717;
        border:0;
        box-shadow:none;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:none;
        max-height:0;
        overflow:hidden;
        transition:max-height .3s ease, opacity .25s ease, visibility .25s ease;
    }

    .alxomenu-item.active > .alxomenu-mega{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        max-height:1800px;
        transform:none;
    }

    .alxomenu-title{
        height:auto;
        min-height:65px;
        padding:17px 8px 12px;
        align-items:center;
    }

    .alxomenu-title h2,
    .alxomenu-title h2 span{
        font-size:22px;
        margin-top:0;
    }

    .alxomenu-columns{
        display:grid;
        grid-template-columns:1fr;
        gap:22px;
        width:100%;
        padding:0 8px;
    }

    .alxomenu-column{
        width:100%;
    }

    .alxomenu-column h4{
        margin:0 0 12px;
        font-size:14px;
        color:#888;
    }

    .alxomenu-column a{
        font-size:14px;
        line-height:1.4;
        margin-bottom:12px;
        padding:2px 0;
    }

    /* Search */
    .alxosearch-btn{
        width:40px;
        height:40px;
        flex:0 0 40px;
    }

    .alxosearch-overlay{
        top:60px;
        height:calc(100dvh - 60px);
    }

    .alxosearch-header,
    .alxosearch-content{
        width:calc(100% - 32px);
        max-width:none;
    }

    .alxosearch-header{
        margin-top:28px;
        gap:12px;
    }

    .alxosearch-header input{
        height:58px;
        padding:8px 0 12px;
        font-size:26px;
    }

    .alxosearch-close{
        width:46px;
        height:46px;
        font-size:21px;
    }

    .alxosearch-content{
        margin-top:35px;
        padding-bottom:50px;
    }

    .alxosearch-content h2{
        font-size:12px;
        margin-bottom:18px;
    }

    .alxosearch-tags{
        gap:9px;
    }

    .alxosearch-tags a{
        padding:9px 14px;
        font-size:13px;
    }

    .alxosearch-result{
        font-size:15px;
        padding:14px 8px;
    }

    /* Country selector */
    .alxocountry-btn{
        width:40px;
        height:40px;
        padding:0;
        justify-content:center;
        font-size:0;
        flex:0 0 40px;
    }

    .alxocountry-btn::before{
        content:"🌐";
        font-size:18px;
    }

    .alxocountry-overlay{
        top:60px;
        height:calc(100dvh - 60px);
    }

    .alxocountry-box{
        top:10px;
        right:14px;
        left:14px;
        width:auto;
        max-width:none;
        max-height:calc(100dvh - 80px);
    }

    .alxocountry-header{
        height:60px;
        padding:0 16px;
    }

    .alxocountry-header h2{
        font-size:16px;
    }

    .alxocountry-search{
        width:calc(100% - 28px);
        margin:14px;
        height:44px;
    }

    .alxocountry-list{
        max-height:calc(100dvh - 200px);
        padding:0 14px 14px;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .alxo-header-container{
        padding:0 8px;
    }

    .alxo-logo img{
        width:52px;
        height:52px;
    }

    .alxosearch-btn,
    .alxocountry-btn,
    .alxo-mobile-toggle{
        transform:scale(.92);
    }

    .alxomenu{
        padding-left:12px;
        padding-right:12px;
    }

    .alxosearch-header input{
        font-size:22px;
    }
}

/* Desktop default for the hamburger */
@media (min-width: 768px) {
    .alxo-mobile-toggle{
        display:none;
    }
}

/* Respect devices that do not support hover */
@media (hover:none) {
    .alxo-logo:hover .alxo-logo-text span{
        opacity:0;
        transform:translateX(-20px);
    }

    .alxomenu-link:hover::before{
        width:0;
    }
}

/*==============================BANNER RESPONSIVE==============================*/
@media (max-width: 1400px) {
    .alx-hero-container {
        padding: 0 60px;
        justify-content: flex-start;
        text-align: left;
    }
    .alx-left,
    .alx-right {
        text-align: left;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .alx-hero {
        padding: 70px 0;
    }
    .alx-hero-container {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 45px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 45px;
        box-sizing: border-box;
        text-align: left;
    }
    .alx-left,
    .alx-right {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
        text-align: left;
    }
    .alx-title1,
    .alx-title2 {
        font-size: clamp(55px, 5.5vw, 68px);
        line-height: .92;
    }
    .alx-title2 {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
    }
    .alx-dot {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
    }
    .alx-right h2 {
        font-size: clamp(27px, 3vw, 34px);
        line-height: 1.15;
        margin-bottom: 18px;
    }
    .alx-right p {
        font-size: 17px;
        line-height: 1.55;
        max-width: 480px;
    }
}
@media (max-width: 991px) {
    .alx-hero {
        padding: 70px 0 60px;
    }
    .alx-hero-container {
        width: 100%;
        max-width: 850px;
        margin: 0 auto;
        padding: 0 35px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 45px;
        box-sizing: border-box;
        text-align: left;
    }
    .alx-left,
    .alx-right {
        width: 100%;
        max-width: 100%;
        flex: none;
        text-align: left;
    }
    .alx-title1 {
        font-size: 58px;
        line-height: .95;
    }
    .alx-title2 {
        font-size: 58px;
        line-height: .95;
        gap: 16px;
        justify-content: flex-start;
    }
    .alx-dot {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
    .alx-right h2 {
        font-size: 32px;
        line-height: 1.15;
    }
    .alx-right p {
        font-size: 18px;
        line-height: 1.5;
    }
}
@media (max-width: 768px) {
    .alx-hero-container {
        padding: 0 25px;
    }
    .alx-title1 {
        font-size: 46px;
    }
    .alx-title2 {
        font-size: 46px;
        gap: 14px;
    }
    .alx-dot {
        width: 22px;
        height: 22px;
    }
    .alx-line {
        width: 70px;
        margin-bottom: 25px;
    }
    .alx-right h2 {
        font-size: 26px;
    }
    .alx-right p {
        font-size: 16px;
        line-height: 1.6;
    }
    .alxo-butn {
        font-size: 18px;
    }
}
@media (max-width: 576px) {
    .alx-hero-container {
        padding: 0 20px;
    }
    .alx-title1 {
        font-size: 38px;
    }
    .alx-title2 {
        font-size: 38px;
        gap: 12px;
    }
    .alx-dot {
        width: 18px;
        height: 18px;
    }
    .alx-right h2 {
        font-size: 22px;
    }
    .alx-right p {
        font-size: 15px;
    }
}
@media (max-width: 400px) {
    .alx-hero-container {
        padding: 0 18px;
    }
    .alx-title1 {
        font-size: 32px;
    }
    .alx-title2 {
        font-size: 32px;
        gap: 10px;
    }
    .alx-dot {
        width: 16px;
        height: 16px;
    }
    .alx-right h2 {
        font-size: 20px;
    }
    .alx-right p {
        font-size: 14px;
    }
    .alxo-butn {
        font-size: 16px;
    }
}
@media (max-width: 320px) {
    .alx-hero-container {
        padding: 0 15px;
    }
    .alx-title1 {
        font-size: 28px;
    }
    .alx-title2 {
        font-size: 28px;
        gap: 8px;
    }
    .alx-dot {
        width: 14px;
        height: 14px;
    }
    .alx-right h2 {
        font-size: 18px;
    }
    .alx-right p {
        font-size: 13px;
    }
    .alxo-butn {
        font-size: 15px;
    }
}
/*==============================CARD RESPONSIVE==============================*/

/* @media(max-width:1024px){
.alx-card-container{
grid-template-columns:repeat(2,1fr);
}
.alx-vision-card{
height:560px;
}
}

@media(max-width:767px){
.alx-card-section{
padding:50px 20px;
}
.alx-card-container{
grid-template-columns:1fr;
gap:20px;
}
.alx-vision-card{
height:520px;
}
.content{
left:25px;
right:25px;
top:30px;
}
.content h2{
font-size:34px;
}
.content p{
font-size:16px;
line-height:1.7;
}
.content a{
font-size:24px;
}
} */
@media(max-width:1024px){

.alx-card-container{
grid-template-columns:repeat(2,1fr);
}

.alx-vision-card{
height:560px;
}

.alx-vision-card.active .bg{
transform:scale(.72);
filter:blur(8px);
}

.alx-vision-card.active .overlay{
background:rgba(3,10,28,.82);
}

.alx-vision-card.active h2{
transform:translateY(-10px);
}

.alx-vision-card.active p{
opacity:1;
transform:translateX(0);
}

.alx-vision-card.active a{
opacity:1;
transform:translateY(0);
}

.alx-vision-card.active::before{
transform:scale(6);
opacity:0;
}

}


@media(max-width:767px){

.alx-card-section{
padding:50px 20px;
}

.alx-card-container{
grid-template-columns:1fr;
gap:20px;
}

.alx-vision-card{
height:520px;
}

.content{
left:25px;
right:25px;
top:30px;
}

.content h2{
font-size:34px;
}

.content p{
font-size:16px;
line-height:1.7;
}

.content a{
font-size:24px;
}

}

/*==============================SLIDER RESPONSIVE==============================*/

@media(max-width:1200px){
    .alxo-slider{
        padding:55px 0;
    }
    .alxo-container{
        padding:0 50px;
    }
    .alxo-slide{
        gap:45px;
        min-height:480px;
    }
    .alxo-wrapper{
        min-height:480px;
    }
    .alxo-image{
        height:480px;
    }
    .alxo-content h1{
        font-size:46px;
    }
    .alxo-content p{
        font-size:17px;
        line-height:1.7;
    }
}
@media(max-width:900px){
    .alxo-slider{
        padding:55px 0;
    }
    .alxo-container{
        padding:0 35px;
    }
    .alxo-wrapper{
        min-height:auto;
    }
    .alxo-slide,
    .alxo-slide.active{
        flex-direction:column;
        align-items:stretch;
        gap:35px;
        min-height:auto;
    }
    .alxo-image{
        width:100%;
        height:430px;
    }
    .alxo-content{
        width:100%;
        max-width:700px;
    }
    .alxo-content h1{
        font-size:44px;
    }
    .alxo-content p{
        font-size:17px;
    }
    .alxo-controls{
        justify-content:flex-start;
        margin-top:35px;
    }
}
@media(max-width:600px){
    .alxo-slider{
        padding:50px 0;
    }
    .alxo-container{
        padding:0 20px;
    }
    .alxo-slide,
    .alxo-slide.active{
        gap:28px;
    }
    .alxo-image{
        height:300px;
    }
    .alxo-content h1{
        margin-bottom:18px;
        font-size:34px;
        line-height:1.15;
        letter-spacing:-.5px;
    }
    .alxo-content p{
        margin-bottom:25px;
        font-size:15px;
        line-height:1.7;
    }
    .alxo-btn{
        padding:11px 14px 11px 20px;
        font-size:14px;
        gap:12px;
    }
    .alxo-btn-icon{
        width:34px;
        height:34px;
    }
    .alxo-controls{
        gap:15px;
        margin-top:30px;
    }
    .alxo-prev,
    .alxo-next{
        width:45px;
        height:45px;
        font-size:14px;
    }
    .alxo-counter{
        font-size:14px;
    }
}
@media(max-width:400px){
    .alxo-container{
        padding:0 15px;
    }
    .alxo-image{
        height:250px;
    }
    .alxo-content h1{
        font-size:30px;
    }
    .alxo-content p{
        font-size:14px;
    }
}
/*============================== FOUNDER & CEO ==============================*/

@media(max-width:1200px){
    .alxceo-team{
        padding:100px 60px;
    }
    .alxceo-slider{
        width:450px;
        height:300px;
    }
    .alxceo-item p{
        font-size:22px;
        line-height:40px;
    }
    .alxceo-item h3{
        font-size:36px;
    }
}
@media(max-width:991px){
    .alxceo-team{
        padding:80px 40px;
    }
    .alxceo-container{
        flex-direction:column-reverse;
        gap:50px;
        text-align:center;
    }
    .alxceo-content{
        width:100%;
        min-height:200px;
    }
    .alxceo-item{
        width:100%;
    }
    .alxceo-slider{
        width:100%;
        max-width:500px;
        height:320px;
    }
}
@media(max-width:768px){
    .alxceo-team{
        padding:70px 25px;
    }
    .alxceo-slider{
        max-width:400px;
        height:260px;
    }
    .alxceo-item p{
        font-size:18px;
        line-height:32px;
    }
    .alxceo-item h3{
        font-size:28px;
    }
}
@media(max-width:576px){
    .alxceo-team{
        padding:60px 20px;
    }
    .alxceo-slider{
        width:100%;
        max-width:320px;
        height:210px;
        border-radius:15px;
    }
    .alxceo-item p{
        font-size:16px;
        line-height:28px;
    }
    .alxceo-item h3{
        font-size:22px;
    }
}
/*============================== LATEST NEWS ==============================*/

@media(max-width:1200px){
    .latest-news{
        padding:100px 50px;
        gap:60px;
    }
    .logo-text{
        font-size:58px;
        line-height:58px;
    }
    .news-bottom h3{
        font-size:25px;
    }
}
@media(max-width:991px){
    .latest-news{
        flex-direction:column;
        padding:80px 35px;
        gap:60px;
    }
    .left-content,
    .right-content{
        width:100%;
    }
    .left-content{
        position:static;
    }
    .logo-text{
        font-size:50px;
        line-height:52px;
    }
    .news-bottom h3{
        font-size:22px;
    }
}
@media(max-width:768px){
    .latest-news{
        padding:70px 20px;
    }
    .news-card{
        padding:28px;
    }
    .news-bottom{
        gap:20px;
    }
    .news-bottom h3{
        font-size:19px;
        line-height:1.6;
    }
    .news-bottom a{
        width:50px;
        height:50px;
        font-size:28px;
    }
    .logo-text{
        font-size:42px;
        line-height:45px;
    }
}
@media(max-width:576px){
    .news-top{
        flex-wrap:wrap;
        gap:10px;
    }
    .news-bottom{
        flex-direction:column;
        align-items:flex-start;
    }
    .news-bottom a{
        margin-top:15px;
    }
    .logo-text{
        font-size:34px;
        line-height:38px;
    }
    .left-content p{
        font-size:16px;
        line-height:28px;
    }
    .news-bottom h3{
        font-size:18px;
    }
}

/*============================== CONTACT ==============================*/
@media(max-width:992px){

.alx-content-container{
    flex-direction:column;
    gap:50px;
}
.alx-lft,
.alx-ryt{
    width:100%;
}
.alx-lft{
    text-align:center;
}
.alx-lft p{
    margin:0 auto 30px;
}
.social-icons{
    justify-content:center;
}
.alx-ryt{
    text-align:center;
}
.alx-ryt p{
    justify-content:center;
}
}

@media(max-width:576px){
.alx-contact-section{
    padding:50px 20px;
}
.alx-lft h2{
    font-size:42px;
}
.alx-lft p{
    font-size:16px;
}
.social-icons{
    gap:10px;
}
.social-icons a{
    width:42px;
    height:42px;
    font-size:17px;
}
.alx-ryt h3{
    font-size:28px;
}
.alx-ryt p{
    font-size:16px;
}
}

/*============================== fOOTER ==============================*/

@media(max-width:768px){
    .alx-footer{
        padding:40px 20px;
    }
    .alx-footer-title{
        font-size:32px;
        line-height:1;
        margin-bottom:30px;
    }
    .alx-footer-links{
        grid-template-columns:1fr;
        gap:15px;
    }
    .alx-footer-link{
        font-size:16px;
        line-height:1.2;
        margin-bottom:10px;
    }
    .alx-footer-copyright{
        font-size:13px;
        margin-top:30px;
    }
}