/***************************************Custom Properties***************************************/

:root{
    /*****sections-properties*****/
    /*section generics*/
    --section-margin:120px;
    --section-margin-mobile:20px;
    --header-font-size:min(3rem, 5vw);
    --link-color:white;
    --padding-top-mobile:30px;
    --primary-color:rgb(0, 90, 240);
    --secondary-color:#1F2937;
    /*menu*/
    --header-font:"Duru Sans", sans-serif;
    --header-font-color:white;
    --header-height:74px;
    --header-secondary-color: #1F2937;
    --header-primary-color-mobile: rgb(0, 90, 240);
    --menu-hidden-position: calc(0 - 100vw);
    /*home*/
    --logo-title-font:"Duru Sans", sans-serif;
    --logo-title-size: min(4rem, 6vw);
    --slogan-title-font:"Open Sans", sans-serif;
    --slogan-title-font-size: 4.3rem;
    --slogan-title-font-size-mobile:2.5rem;
    --slogan-subtitle-font-size: 2.5rem;
    --slogan-subtitle-font-size-mobile:min(2.0rem,8vw);
    /*services*/
    --services-bg-color: #1F2937;
    --services-font:"Duru Sans", sans-serif;
    --services-font-size: min(2rem,3.5vw) ;
    /*aboutus*/
    --aboutus-font:"DM Sans",sans-serif;
    --aboutus-font-color:#005AF0;
    --aboutus-font-size:min(1.88rem,2.5vw);
    --white-alpha-color:rgba(255, 255, 255, 0.4);
    /*customers*/
    --nav-controls-color: rgb(217, 217, 217);
    /*contactus*/
    --contact-us-font-family:"Duru Sans", sans-serif;
    --contact-us-header-color:#005AF0;
    --contact-us-main-color: #1F2937;
    --contact-us-header-font-family:"Lucida Fox",sans-serif;
    --contact-legend-font-size:min(1.25rem, 2vw);
    --contact-header-font-size:min(2.5rem, 4vw);
    --contact-header-font-size-mobile:min(2.5rem, 7vw);
    --contact-legend-font-size-mobile:min(2rem, 4vw);
    --contact-form-label-font: 'Lucida Fax', sans-serif;
    --contact-form-submit-font:'Lucida Fax', sans-serif;
    --opacity-transition: opacity 0.5s ease-in-out;
    --modal-font-family:"Duru Sans", sans-serif;
    /*footer*/
    --footer-bg-color:#1F2937;
    --footer-font-color:white;
    --footer-font-family: "Duru Sans", sans-serif;
    --footer-font-size:min(1rem, 3.5vw);
    
}

/*********************************************Reset*********************************************/

html{
    box-sizing: border-box;
    /* font-family: var(--font); */
    font-size: 16px;
    scroll-behavior: smooth;
}

*,
*::after,
*::before{
    box-sizing: inherit;
}

body{
    margin: 0;
    overflow-x: hidden;
}

a{
    transition: color 0.5s ease-out;
    text-decoration: none;
    color: inherit;
}

a:hover{
    opacity: 0.75;
}

h1{
    margin: 0;
    font-size: 2rem;
}

h2{
    margin: 0;
    font-size: 1.5rem;
}

h3{
    margin: 0;
    font-size: 1.25rem;
}

h4{
    margin: 0;
    font-size: 1rem;
}

h5{
    margin: 0;
    font-size: 0.85rem;
}

h5{
    margin: 0;
    font-size: 0.7rem;
}

p{
    line-height: 1.6;
    margin: 0;
}

/******************************************Utilities*********************************************/

.scolor{
    color: var(--primary-color);
}

.bold{
    font-weight: bold;
}

.txt-justify{
    text-align: justify;
}

.flex-row{
    display: flex;
}

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

.hide{
    display: none;
}

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

.just-cont-center{
    justify-content: center;
}

.align-space-bet{
    justify-content: space-between;
}

.p15{
    padding: 15px;
}

.w80{
    width: 80%;
}

.w50{
    width: 50%;
}

.hidden{
    visibility: hidden;
}

.two-columns-layout{
    width: 50%;
}

/*******************************Site Specifics**************************************/

/*SECTION GENERICS*/

.section{
    display: flex;
    min-height: 100vh;
    padding-left: var(--section-margin);
    padding-right: var(--section-margin)
}

/*********HEADER**************/
.header{
    align-items: center;
    color: var(--header-font-color);
    display: flex;
    font-family: var(--header-font);
    height: var(--header-height);
    justify-content: space-between;
    position: fixed;
    padding-left: var(--section-margin);
    /* right: 0;
    top: 0; */
    width: 100%;
    z-index: 999;
}

.header ul{
    list-style-type: none;
    text-decoration: none;
}

.header-list{
    display: flex;
    gap: 50px;
    padding-right: var(--section-margin);
    align-items: center;
}

.header-logo-img{
    display: flex;
    align-items: center;
    height: 100%;
}

.header-logo-img img{
    height: 80%;
}

/************HOME*************/

.home{
    background-image: url('assets/bg-images/bghome.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    position: relative;
}

.header-logo{
    height: 100%;
    visibility: hidden;
}

.logo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo-img{
    align-items: center;
    display: flex;
    justify-content: center;
}

.logo-img, .header-logo-image img{
    width: 100%;
}

.logo-legend{
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 1.5rem;
    text-align: center;
    font-family: var(--logo-title-font);
    text-shadow: 0 0 10px #fff;
}

.logo-title{
    font-size: var(--logo-title-size);
}

.logo-subtitle{
    display: flex;
    justify-content: space-between;
    font-size: 2rem;
}

.slogan{
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slogan p{
    line-height: 1.2;
}

.slogan-title{
    font-size: var(--slogan-title-font-size);
    font-family: var(--slogan-title-font);
    font-weight: 700;
}

.slogan-subtitle{
    font-size: var(--slogan-subtitle-font-size);
    font-family: var(--logo-title-font);
}

.home-opacity{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 90vh 0 0 100vw;
    border-color: transparent transparent transparent rgba(4, 11, 31, 0.15);
    transform: rotate(0deg);
    position: absolute;
    bottom: 0;
    left: 0;
 }


/*******************SERVICES********************/

.services{
    background-color: var(--services-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
}


.services-content{
    font-family: var(--services-font);
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    flex-grow: 1;
    font-size: var(--services-font-size);
    gap: 20px;
    font-weight: 700;
    color: var(--header-font-color);
}

.services-main{
    align-self: flex-start;
    width: 50%;
    
}

.services-main h2{
    font-size: 2.0rem;
}

.services-main h2 a{
	color: white;
	text-decoration: none;
    border-bottom: none;
    position: relative;
}

.services-main h2 a:hover{
    opacity: 1;
}

.services-main h2 a::after{
        content:'';
        width:100%;
        position: absolute;
        left:0;
        bottom:-5px;
        height: 5px;
        background: #30e8bf;
        background: -webkit-linear-gradient(to right, #30e8bf, #ff8235);
        background: linear-gradient(to right, #00348A, #005AF0,#1F2937);
}

.services-list{
    width: 50%;
}

.services-list ul{
    padding-inline-start: 0;
    position: relative;
}

.services-list ul::before{
    border: 2.5px solid #1c77c3;
    bottom: 0px;
    content: "";
    height: 91%;
    left: 13px;
    position: absolute;
    top: 5px;
    z-index:1;
}

.services-list ul li{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 32px;
}

.service-item{
    display: flex;
    align-items: center;
}

.service-bullet{
    background-color: #1c77c3;
    /* border: 5px solid #56cbf9; */
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 30px;
    width: 30px;
    z-index: 10;
}

.service-name{
    padding-left: 10px;
}

/***********************ABOUT US***************************/

.aboutus{
    justify-content: center;
    align-items: center;
    background-image: url('assets/bg-images/bgaboutus.webp');
    background-position: center;
    background-repeat: no-repeat;
}

.aboutus-opacity{
    width: 100vw;
    background-color: var(--white-alpha-color);
}

.aboutus-content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    min-height: 80vh !important;
    padding-left: var(--section-margin);
    padding-right: var(--section-margin);
}

.aboutus-main{
    color: var(--aboutus-font-color);
    font-family: var(--aboutus-font);
    font-size: var(--aboutus-font-size);
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 50%;
}

.aboutus-main p{
    line-height: 1.2;
}

.aboutus-aside{
    width: 50%;
}

.aboutusimg{
    border-radius: 300px 0px 0px 300px;
    max-height: 50vh;
}

.contact-mail{
    background-color: var(--secondary-color);
    display: flex;
    height: 20vh;
    justify-content: center;
    padding-bottom: 15px;
    padding-top: 15px;
    padding-left: var(--section-margin);
    padding-right: var(--section-margin);
    width: 100vw;
}

.contact-mail-main{
    color: white;
    display: flex;
    flex-direction: column;
    font-style: italic;
    width: 80%;
}

.contact-mail-main span:nth-child(1){
    font-size: 1.2rem;
    font-family: 'Duru Sans', sans-serif;
}

.contact-mail-main span:nth-child(2){
    font-size: 0.90rem;
    font-family: 'Duru Sans', sans-serif;
}

.contact-mail-main span:nth-child(3){
    font-size: 0.75rem;
}

.contact-mail-form{
    display: flex;
    gap: 30px;
    padding-top: 10px;
}

.email-form-mail{
    border:none;
    border-bottom: solid 2px white;
    border-radius: 0 0 0 0;
    box-shadow: none;
    background-color: transparent;
    color: white;
    height: 30px;
    padding: 0px;
    width: 70%;
}

.email-form-mail::placeholder{
    color: white;
}

.email-form-submit{
    background: #005AF0;
    box-shadow: none;
    border-radius: 15px;
    border: solid 1px white;
    color: white;
    cursor: pointer;
    font-family: 'Lucida Fox', sans-serif;
    font-size: 13px;
    font-style: italic;
    height: 30px;
    max-width: 150px;
    outline: none;
    padding: 0px;
    width: 30%;
}

.contact-icon{
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: flex-start;
    padding-left: 30px;
    width: 20%;
}

.contact-icon img{
    max-height: 100px;
    max-width: 100px;
}

/*******CUSTOMERS*********/

.customers{
    align-items: center;
    justify-content: center;
    background:radial-gradient(71% 75% at 50% 50%,rgba(255,255,255,0) 0%,rgb(255, 255, 255), rgb(255, 255, 255)) 100%;
}

.slider{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 400px;
    position: relative;
}

.separator{
    background-image:(linear-gradient(left, #3498db, #10d7af, #3498db));
}

.slider img{
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 600px;
    min-height: 350px;
    opacity: 0.5;
}

.slide-details{
    background-color: rgba(0, 0, 0,0.5);
    color: white;
    display: flex;
    flex-direction: column;
    font-family: var(--header-font);
    font-size: 1rem;
    height: 100%;
    justify-content: space-between;
    padding: 30px;
    position: absolute;
    top: 0;
    width: 100%;
}

.slide-info{
    display: flex;
    flex-direction: column;
}

.slide-title{
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
}

.slide-title span::after{
    content:'';
    width:80%;
    position: absolute;
    left:0;
    bottom:-5px;
    height: 2px;
    background: #10d7af;
    background: -webkit-linear-gradient(to right, #30e8bf, #ff8235);
    background: linear-gradient(to right, #3498db, #10d7af, #3498db);
    background: linear-gradient(to left, #000000, #ffffff);
}

.slide-text{
    padding-top: 30px;
}

.visit-customer-website{
    align-items: center;
    display: flex;
    justify-content: flex-start;
}

.visit-customer-website span{
    font-weight: 100;
}

.visit-customer-website span:first-of-type{
    padding-left: 5px;
    font-size: 1rem;
    /* color: var(--primary-color); */
}

.visit-customer-website span:last-of-type{
    font-size: 2rem;
    /* color: var(--primary-color); */
}

.visit-customer-website a{
    align-items: center;
    /* background-color: gray; */
    /* border: solid 1px white; */
    display: flex;
    justify-content: center;
    padding: 5px;
}

.mySlides {
    display:none;
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
}

.slider-bar{
    align-items: center;
    gap: 30px;
    justify-content: center;
    width: 100%;
    display: flex;
    background-color: transparent;
    height: 100%;
    padding: 20px;
}

.slider-nav {
    border: 1px solid var(--nav-controls-color);
    color: var(--nav-controls-color);
    cursor: pointer;    
    height: 26px;
    margin: 0 10px;
    transform: rotate(-45deg);
    width: 26px;
}

.slider-nav:hover{
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.nav-direction{
    display: flex;
    justify-content: center;
    transform: rotate(45deg);
}

.badges{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px
}

.badge {
    background-color: #cecccc77;
    cursor:pointer;
    display: block;
    height:13px;
    width:13px;
    padding:0;
    border: solid 1px var(--nav-controls-color);
    transform: rotate(45deg);
}

.active-badge{
    background-color: var(--primary-color);
}


/*************************CONTACT US*******************************/
.contactus{
    align-items: center;
    display: flex;
    gap: 100px;
    /* min-height: calc( 85vh - var(--header-height)) ; */
    min-height: 85vh;
    padding-top: var(--header-height);
    justify-content: center;
    padding-right: var(--section-margin);
    padding-left: var(--section-margin);
}

.contact-main{
    color: var(--contact-us-main-color);
    display: flex;
    flex-direction: column;
    font-size: var(--contact-legend-font-size);
    font-family: var(--contact-us-font-family);
    justify-content: center;
    height: 100%;
    text-align: left;
    width: 50%;
    gap: 30px;
}

.contact-main h2{
    color: var(--contact-us-header-color);
    font-family: var(--contact-us-header-font-family);
    font-size: var(--contact-header-font-size);
    font-style: italic;
}

.contact-main p{
    line-height: 25px;
    margin-bottom: 1.5rem;
}

.contact-form{
    display: flex;
    height: 100%;
    width: 50%;
}

.contact-form form{
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, input:invalid ~ label,textarea:valid ~ label {
    font-size: 0.75em;
    /* color: #999; */
    color: #050505;
    top: 5px;
    -webkit-transition: all 0.225s ease;
    transition: all 0.225s ease;
}

.styled-input {
    float: left;
    width: 100%;
    margin: 1rem 0;
    position: relative;
    border-radius: 4px;
}

.styled-input label {
    /* color: #999; */
    font-family: var(--contact-form-label-font);
    font-size: 1rem;
    font-style: italic;
    left: 0;
    padding: 0 30px 1rem 30px;
    pointer-events: none;
    position: absolute;
    top: 18px;
    transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
}

.styled-input.wide { 
    width: 100%;
    max-width: 100%;
}

input,
textarea {
    padding: 14px 5px 5px 30px;
    border: solid 1px gray;
    height: 56px;
    width: 100%;
    font-size: 1rem;
    background-color: white;
    /* color: gray; */
    border-radius: 4px;
    box-shadow: 2px 2px gray;
}

textarea{
    resize: none;
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
    width: 100%;
    -webkit-transition: all 0.075s ease;
    transition: all 0.075s ease;
}

textarea {
    width: 100%;
    min-height: 15em;
}

.input-container {
    width: 100%;
    max-width: 100%;
    margin: 20px auto 25px auto;
}

.submit-btn {

    padding: 7px 35px;
    border-radius: 60px;
    display: inline-block;
    /* background-color: #4b8cfb; */
    background-color: #044EC8;
    color: white;
    font-family: var(--contact-form-submit-font);
    font-size: 1rem;
    font-style: italic;
    cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06),
              0 2px 10px 0 rgba(0,0,0,0.07);
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    width: 200px;
    text-align: center;
    
}

.submit-btn:hover {
    transform: translateY(1px);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
              0 1px 1px 0 rgba(0,0,0,0.09);
}

@media (max-width: 768px) {
    .submit-btn {
        width:100%;
        float: none;
        text-align:center;
    }
}

/**CONTACT US MODAL***/

.card {
    background: #fff;
    background-image: linear-gradient(48deg, #fff 0%, #e5e6ef 100%);
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
    box-shadow: -20px 20px 35px 1px rgba(10, 49, 86, 0.04);
    display: flex;
    flex-direction: column;
    padding: 32px;
    margin: 40px;
    max-width: 400px;
    width: 100%;
}

.modal-header {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
}

.close {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	height: 16px;
	text-decoration: none;
	width: 16px;
}

.modal-wrapper {
	align-items: center;
	background: rgba(0, 0, 0, 0.7);
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
}


#modal {
	opacity: 0;
	transition: var(--opacity-transition);
	visibility: hidden;

	&:target {
		opacity: 1;
		visibility: visible;

		.modal-body {
			opacity: 1;
			transform: translateY(1);
		}
	}

	.modal-body {
		max-width: 500px;
		opacity: 0;
		transform: translateY(-100px);
		transition: var(--opacity-transition);
		width: 100%;
		z-index: 1;
        font-family: var(--modal-font-family);
	}
}

/****************FOOTER*******************/

.footer{
    align-items: center;
    background-color: var(--footer-bg-color);
    color: var(--footer-font-color);
    display: flex;
    font-family: var(--footer-font-family);
    font-size: var(--footer-font-size);
    height: 15vh;
    justify-content: space-between;
    padding-right: var(--section-margin);
    padding-left: var(--section-margin);
    position: relative;
    bottom: 0;
    gap:30px;
}

.social-media{
    display: flex;
    gap: 20px;
}

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

    /***************SECTION GENERICS***********************/
    .section{
        /* min-height: calc(100vh - var(--header-height)); */
        min-height: 100vh;
        flex-direction: column;
        padding-left: var(--section-margin-mobile);
        padding-right: var(--section-margin-mobile);
        padding-top: calc( var(--header-height) + var(--section-margin-mobile) );
    }

    /*************SITE ESPECIFICS****************/

    /*HEADER-MENU*/

    .header{
        flex-direction: column;
        position: fixed;
        justify-content: space-between;
        padding: 0px;
        width: 100%;
        background-color: var(--header-primary-color-mobile);
        z-index: 999;
    }

    .header-logo{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        visibility: visible;
        min-height: var(--header-height);
        padding-left: var(--section-margin-mobile);
        padding-right: var(--section-margin-mobile);
    }

    .header-logo-img{
        display: flex;
    }

    .menu-list{
        background-color: var(--header-primary-color-mobile);
        width: 100%;
        left: -200vw;
        position: relative;
        transition: left 0.5s ease;
        /* min-height: calc(100vh - var(--header-height)); */
        min-height: 100vh;
    }
    
    .header-list{
        flex-direction: column;
        margin: 0;
        height: 100%;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: var(--padding-top-mobile);
    }

    .header-list li a{
        color: white;
    }

    .active-menu{
        left: 0;
    }

    .burger-icon{
        display: inline-block;
        cursor: pointer;
    }
    
    .burger-icon .line{
        display: block;
        width: 35px;
        height: 3px;
        background-color: white;
        border-radius: 10px;
        margin: 6px 0;
        transition: 0.4s;
    }

    /*HOME*/

    .slogan{
        width: 100%;
    }

    .slogan-title{
        font-size: var(--slogan-title-font-size-mobile);
    }

    .slogan-subtitle{
        font-size: var(--slogan-subtitle-font-size-mobile);
    }

    .logo-title{
        font-size: min(4rem,8vw);
    }


    /*SERVICES*/
    .services-content{
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
        font-size: min(2rem ,6vw);
        width: 100%;
        flex-grow: 1;
    }

    .services-main{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .services-main p{
        display: flex;
        width: 100%;
    }

    .services-list{
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .services-list ul::before{
        height: 90%;
    }

    /*ABOUT US*/

    .aboutus-content{
        min-height: 100vh;
        flex-direction: column;
        padding-left: var(--section-margin-mobile);
        padding-right: var(--section-margin-mobile);
        padding-top: calc( var(--header-height) + var(--section-margin-mobile) );
    }

    .aboutus-main{
        font-size: 1.88rem;
        width: 100%;
    }

    .aboutus-aside{
        width: 100%;
    }

    .aboutusimg{
        max-width: 100%;
    }

    .contact-mail{
        padding-left: var(--section-margin-mobile);
        padding-right: var(--section-margin-mobile);
    }

    .contact-mail-main{
        background-color: rgb(31, 41, 55);
        width: 100%;
    }

    /*contactus*/

    .contactus{
        padding-left: var(--section-margin-mobile);
        padding-right: var(--section-margin-mobile);
        padding-top: calc(var(--padding-top-mobile) + var(--header-height)) ;
        min-height: 100vh;
        flex-direction: column-reverse;
        width: 100%;
        gap: 10px;
    }

    .contact-form{
        width: 100%;
        padding-top: 0px;
        padding-bottom: 20px;
    }

    .contact-main{
        width: 100%;
        font-size: var(--contact-legend-font-size-mobile);
        text-align: justify;
    }

    .contact-main h2 {
        font-size: var(--contact-header-font-size-mobile);
        text-align: center;
    }

    .contact-main p{
        line-height: 30px;
        margin-bottom: 0.5rem;
    }

    .contact-icon{
        display: none;
    }

    /*footer*/

    .footer{
        height: 100px;
        padding-left: var(--section-margin-mobile);
        padding-right: var(--section-margin-mobile);
    }


}