/*------------------------------------------------
		ALL ELEMENTS updated-2026
-------------------------------------------------*/	



/*---------------------------------------------------------
							LINES
----------------------------------------------------------*/	

.line {
	border: 0;
    height: 1px;
    width: 90%;
    margin: 3% auto;
    background: #222222;     
}



/*---------------------------------------------------------
				ALL TYPES OF BUTTONS
----------------------------------------------------------*/	

.button {  
    border: none;  
    text-decoration: none;
    text-align: center;  
    display: block;
    font-size: 0.875rem;
    letter-spacing: 0.1em; 
    font-weight: regular;
    margin: 4px auto;
    padding: 12px 25px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;  
}

.button-primary {  
    background-color: var(--blue_link_color);
    border: 1px solid var(--blue_link_color);
    color: var(--secondary_textcolor);   
}

.button-primary:hover {
   opacity:0.9;
}

.button-primary2 {  
    background-color: var(--primary_color);
    border: 1px solid var(--primary_color);
    color: var(--secondary_textcolor);   
}

.button-primary2:hover {
   background-color: var(--primary_color_dark);
   border: 1px solid var(--primary_color_dark);
}

.button-secondary {
    background-color: transparent;
    border: 1px solid var(--blue_link_color);
    color: var(--blue_link_color);
}

.button-secondary:hover {
    background-color: var(--blue_link_color);
    color: var(--secondary_textcolor);   
}

/*------ Round-icon - Small (Blue) ------ */
.icon-plus {
    border: none;  
    width: 30px;
    height: 30px;
    background: var(--blue_link_color);
    border-radius: 50%;
    position: relative;
    outline:0;
    cursor: pointer;
}

.icon-plus:hover {
   opacity: 0.9;
}

.icon-plus::before,
.icon-plus::after {
    content: "";
    position: absolute;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* plus lines */
.plus::before {
  width: 12px;
  height: 2px;
}

.plus::after {
  width: 2px;
  height: 12px;
}


/*----- Round-icon - Normal -----*/
.icon {
    border: none;  
    width: 40px;
    height: 40px;
    background: #222222;
    border-radius: 50%;
    position: relative;
    outline:0;
    cursor: pointer;
}

.icon:hover {
    opacity: 0.9;
}

.icon::before,
.icon::after {
    content: "";
    position: absolute;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* cross lines */
.close::before,
.close::after {
    width: 18px;
    height: 2px;
}

.close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/*--------TWO BUTTONS IN A ROW CONTAINER ------*/
.button-container {
    display: flex; 
    width: 100%; 
    margin: 0 auto; 
    align-items: center; 
    justify-content: center;
}

.button-container-item {
    margin: 0 1%;
}


/*--------ADD THIS CLASS FOR ROUNDED CORNERS ------*/
.button-borderR {
    border-radius: 50px;	
}


/*---FLOATING ICONS (e.g MESSENGER)---*/
.float {
	position: fixed;
	bottom: 80px;
	right: 15px;
	text-align: right;
}

.lineImg {
	width: 55px;
    height: auto;
}



/*************************
		iPad Mini
**************************/	

@media screen and (max-width: 768px){

    /*--------BUTTONS ------*/
    .button {
        border: none;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: block;
        font-size: 14px;
        margin: 4px auto;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;       
    }

    .button-secondary{
        background-color: transparent;
        border: 1px solid var(--blue_link_color);
        color: var(--blue_link_color);
    }

    .button-secondary:hover {
        background-color: none; 
    }

    .button-container {
        display: flex; 
        width: 100%; 
        margin: 0 auto; 
        align-items: center; 
        justify-content: center;
    }

    .button-container-item {
        margin: 0 1%;
    }

}