/* main hero */
.about-main-section{
  
    position: relative;
    overflow: hidden;
    padding:3rem 0
}
.main-hero-title{
    line-height: 1px;
}
.main-hero-title h1,h3{
    color: var(--text);
    font-weight: 600;
}
.bold-text{
    color:#1E5ACD
}
.title-line{
    height:5px;
    width:50px;
    background-image: linear-gradient(to right, var(--blue-dark),var(--blue-light));
    opacity: 1;
    border-radius: 15px;
    border:none
}
.main-hero-tags{
    display:flex;
    justify-content: space-between;
}
.bg-pattern-social{
    position: absolute;
    width: 100%;
    object-fit: cover;

}
.bg-pattern-social img{
    width: 100%;
    object-fit: contain;
}
.bg-pattern-gradient{
    position: absolute;
    width: 100%;
    width:100%;
    /* background-image:linear-gradient(to right, var(--light-bg),var(--light-bg),transparent)  */
    background-color: var(--light-bg);
    opacity: .9;
    
}
.tags-copy h3{
    font-size: 1.1rem;
}
.main-hero-tags{
    gap:1rem;
    display:flex ;
    justify-content: center;
    align-items: center;
}
.main-hero-tags span{
    height:70px;
    width: 3px;
    background: var(--blue-dark);
    opacity: .3;
}
.informative-tag{
    gap:1rem;
}
.icon-area{
  background: var(--blue);
  width:100px;
  height:80px;
  border-radius:30%;
  justify-content: center;
  align-items: center;  
}
.icon-area i {
    font-size: 2rem;
    color:var(--blue-pale)
}
/* about logo  */
.about-us{
    padding-top: 3rem;
}
.main-hero-visual{
    position: relative;
    overflow: hidden;
}
.about-main-logo{
    height:100%;
    display: flex;
    justify-content: center;

}
.about-main-logo img{
    height:300px
}
/* section */
.about-informative h2{
    color: var(--text);
    font-weight: 800;
     margin-bottom:1rem
   
}
.about-informative .title-line{
    margin: 0 auto;
     margin-bottom:1.8rem
}
/* about cards */
.about-us-card-area{
    gap:0.5rem;
    justify-content:center;
    align-items: center;
   
    
}
.about-card-content{
    background-color: var(--blue-pale);
    border-radius: 25px;
    padding: 3rem 1rem;
    display: flex;
    gap: 1.3rem;
    width:auto;

}
.icon-side{
    width:80px;
    height: 80px;
    background-color: var(--blue);
    border-radius: 100%;;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-side i{
    font-size:2.8rem;
    padding: 2rem;
    color:var(--blue-pale)
    
}
.card-content .text-strong{
font-weight: 800;
}
.card-bottom-line{
    width:50px;
    height:5px;
    background-color: var(--bl);
    border-radius: 80px;
}
/* conection informative */
.main-bar-about{
    height:auto;
    background-image: linear-gradient(to right, var(--blue-light),var(--blue-dark));
    border-top-left-radius: 15px;
     border-top-right-radius: 15px;
     padding:1.5rem 2.3rem;
     gap:2rem;
     justify-content:space-between;

}
.main-bar-about h3,
.main-bar-about p,
.main-bar-about a,
.main-bar-about .btn{
    
    color:var(--blue-pale);
  
}
.bar-icon{
    background-color: var(--blue-pale);
    border-radius:50%;
    height: 90px;
    width:90px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bar-content{
    display:flex; 
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}
.bar-icon i{
    font-size:2.3rem
}
.bar-button{
    border:2px solid white;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:1rem 1.5rem;
    border-radius:15px;

}
.subTags{
    display:flex;
    justify-content: space-between;
 

}
#subTag-divisor{
 height: 30px;
 width:2px;
 background-color: var(--text);
 opacity:.3;

}
.subTags .tag{
    display: flex;
    gap:1rem
}
.subTags .tag i{
    color:rgb(233, 199, 10)
}

@media (min-width:1024px){
    .main-hero-informative{
        width:50%;
    }
    .main-hero-visual{
        width:50%;
        overflow: hidden;
    }
}
@media (max-width:1020px){
    .main-hero{
        flex-direction: column;
    }
    .main-hero-informative{
        width:100%;
    }
    .main-hero-visual{
        width:100%;
        overflow: hidden;
    }
}