/*
 Theme Name:   hello elementor child
 Theme URI:    https://portaleto.com
 Description:  hello elementor child
 Author:       hello elementor child
 Author URI:   https://portaleto.com
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  hello-elementor-child
*/

@font-face {
  font-family: 'soorifont';
  src: url('./fonts/OpenSansSemiCondensed-Light.woff') format('woff');
  font-weight: 300;
}
@font-face {
  font-family: 'soorifont';
  src: url('./fonts/OpenSansSemiCondensed-Regular.woff') format('woff');
  font-weight: 400;
}
@font-face {
  font-family: 'soorifont';
  src: url('./fonts/OpenSansSemiCondensed-Medium.woff') format('woff');
  font-weight: 500;
}
@font-face {
  font-family: 'soorifont';
  src: url('./fonts/OpenSans-SemiBold.woff') format('woff');
  font-weight: 600;
}
@font-face {
  font-family: 'soorifont';
  src: url('./fonts/OpenSansSemiCondensed-Bold.woff') format('woff');
  font-weight: bold;
}
@font-face {
  font-family: 'soorifont';
  src: url('./fonts/OpenSansSemiCondensed-ExtraBold.woff') format('woff');
  font-weight: 800;
}
* {
  font-family: 'soorifont' , 'fontawesome' !important;
}



.pink{
    background-color: #ea008a;
}
.dark_gray{
    background-color: #363447;
}
.light_gray{
    background-color: #dbdbdb;
}
.dark_purple{
    background-color: #563780;
}
.lemon{
    background-color: #aac01e;
}
.carbon_blue{
    background-color: #254575;
}
.yellow{
    background-color: #fecb00;
}
.blue{
    background-color: #4b6fcb;
}
.peach{
    background-color: #ef5c5a;
}
.red{
    background-color: #9f1103;
}
.dark_blue{
    background-color: #26354d;
}
.mustard{
    background-color: #f0b132;
}
.green{
    background-color: #319324;
}
.light_blue{
    background-color: #50c2cd;
}
.purple{
    background-color: #5e4889;
}

.Main_Page .main_page_container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.Main_Page .main_page_items .main_page_images{
	max-width: 100%;
    position: relative;
    z-index: 2;
	transition: all 0.4s;
}
.Main_Page .main_page_items{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
	overflow: hidden;
}
.Main_Page .hover_text {
    font-size: 36px;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
    position: absolute;
    top: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
}
.Main_Page .hover_text p{
	margin-bottom: 0 !important;
	opacity: 0;
	transform: scale(1.3);
	transition: all 0.2s;
}
.Main_Page .hover_text.first_text{
	top: 40%;
}
.main_page_items:hover .main_page_images{
	opacity: 0;
	transition: all 0.4s;
	transform: scale(1.5);
} 
.main_page_items:hover .hover_text{
	opacity: 1;
	transition: all 0.4s;
} 
.main_page_items:hover .hover_text p{
	opacity: 1;
	transition: all 0.4s;
	transform: scale(1);
}
.Main_Page .main_page_items:hover .hover_text .before-line{
	display: inline-block;
	width: 35%;
	height: 1px;
	background-color: white;
	position: absolute;
	top: 0px;
	left: 50%;
	-webkit-animation: LineOut 0.4s ease-in-out;
	animation: LineOut 0.4s ease-in-out;
	animation-direction: reverse;
}
.Main_Page .main_page_items:hover .hover_text .after-line{
	display: inline-block;
	width: 35%;
	height: 1px;
	background-color: white;
	position: absolute;
	bottom: 0px;
	right: 55%;
	-webkit-animation: LineOut 0.4s ease-in-out;
	animation: LineOut 0.4s ease-in-out;
	animation-direction: reverse;
}

.hover_text.green_text .before-line ,.hover_text.green_text .after-line {
    background-color: #009f61 !important;
}

.Main_Page a{
    text-decoration: none;
}
.hover_text.green_text{
    color: #009f61;
}




.elementor-widget-heading .elementor-widget-container h2{
	display: inline-block;
}
.close-button{
	width: 950px;
    position: relative;
    text-align: right;
    margin: auto;
	cursor: pointer;

}
.close-btn{
    filter: invert(1);
    width: 40px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
	z-index: 10;
}

.contactMe{
	border-bottom: 2px solid #ebeaea;
	margin-bottom: 14px;
}
.contactUsItem {
    display: flex;
    align-items: baseline;
    gap: 12px;
	font-size: 15px;
}
.contactUsItem .fa.fa-volume-control-phone{
	rotate: -45deg;
}
.contactUsItem i{
	color: #f4913d;
	font-size: 18px;
}
#contactUsModal .modal-body{
	width: 87%;
    margin: auto;
}
.contactUsContent h5 , .contactUsContent a{
	margin-bottom: 0.5rem;
}
.contactUsContent a{
	color: #393c40;
}
.contactUsContent a:active, .contactUsContent a:hover {
    color: #7a481e;
}
#contactUsModa .modal-content{
    border-radius: 18px;
}
.developerSign p{
	margin-bottom: 3px !important;
}
.developerSign a{
	color: #3e3e3e;
    font-weight: 500;
}
.developerSign a:hover{
	color: #F4913D;
	transition: all 0.4s;
}

.Video-Row .elementor-192 .elementor-element.elementor-element-34779b0 .elementor-wrapper{
	overflow: hidden;
}
.Video-Row .elementor-widget-video .e-hosted-video .elementor-video{
	border-radius: 20px;
}
.Two-Elements .e-con-inner .elementor-element:first-child{
	padding-left: 0;
}
.Two-Elements .e-con-inner .elementor-element:last-child{
	padding-right: 0;
}
.Two-Elements .e-con-inner .elementor-element:last-child .elementor-video{
	border: 1px solid #ababab;
}










@-webkit-keyframes sk-pulseScaleOut {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes sk-pulseScaleOut {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}



@-webkit-keyframes LineOut {
    0% {
		width: 35%;
    }
	
    100% {
    	width: 0;
    }
}

@keyframes LineOut {
    0% {
		width: 35%;
    }
	
    100% {
    	width: 0;
    }
}





@media screen and (max-width: 1440px) {
    .Main_Page .hover_text {
        font-size: 25px;
    }
}

@media screen and (max-width: 1300px) {
    .Main_Page .main_page_container{
        grid-template-columns: repeat(3, 1fr);
    }
	    .Main_Page .hover_text {
        font-size: 28px;
    }
}

@media screen and (max-width: 1100px){
    .Main_Page .hover_text {
        font-size: 22px;
    }
}

@media screen and (max-width: 950px){
	.close-button {
		width: unset;
		margin:  unset;
		right: 20px;
	}
}

@media screen and (max-width: 900px) {
    .Main_Page .main_page_container{
        grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(8, 1fr);
    }
}


@media screen and (max-width: 768px) {
	.close-btn {
		top: -20px;
	}
}

@media screen and (max-width: 520px) {
    .Main_Page .main_page_container{
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(15, 1fr);
    }
}