@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body{ background-image: url(../../assets/img/fantasy-cloud4.png); background-size: cover;font-family: 'Rubik', sans-serif; direction: rtl; overflow-x: hidden;}
a{transition: 0.5s;}
#logorow{padding: 50px 0px;}
/*#test{height: 100vh}*/

.whatsapp-icon { position: fixed; bottom: 20px; left: 10px; background-color: green; padding: 10px; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); z-index: 999; transition: background-color 0.3s;}
.whatsapp-icon i { font-size: 24px; color: white; display: block;}
.whatsapp-icon:hover { background-color: #128C7E;}
.whatsapp-icon:hover { background-color: #128C7E;}

h1, h2, h4, h4, h5, h6{margin-bottom: 0px;}
.line { margin: 40px auto 0px; text-align: center;}

#mainHeading h1{font-size: 80px; line-height: 128.5%; font-weight: 700; font-style: normal; flex: none; order: 0; flex-grow: 0;}
#subHeading h2{font-size: 40px;  font-style: normal; font-weight: 400;  flex: none; order: 0; flex-grow: 0;}
.text-purple{color: #7989fd;}
#server_init_price{padding: 50px 0px 40px;}
#server_init_price h2{font-weight: 700; font-size: 40px;}

/*Form Elements*/
input{padding-right: 20px!important;}
input[type=text]:focus{background-color: transparent!important;}
input[type=tel]:focus{background-color: transparent!important;}
input:-internal-autofill-selected {background-color: transparent!important;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
/* Firefox */
input[type=number] {-moz-appearance: textfield;}
.errorsdiv {margin: 10px;}
.errorsdiv .text-danger {color: pink!important;}

/*Map*/
#map{max-width: 800px; margin: 10px auto;}

/*First form*/
#form1{ border: 1px solid #9CA9FF; box-shadow: 0px 0px 65px 4px rgba(196, 203, 255, 0.4); border-radius: 30px; padding: 40px; max-width: 1250px}
.form1input{ border: 1px solid #9CA9FF; border-radius: 60px; background-color: transparent; line-height: 30px; color: #fff; padding: 20px 15px; width: 90%; margin: 10px 0px; text-align: right; overflow-y: hidden;}
.form1input::placeholder{padding: 0px 0px; color: #fff; font-size: 20px;}
#form1left { padding-right: 80px;}
button#form1submit { background-color: #7989fd; width: 90%; border-radius: 60px; padding: 20px 15px; color: #fff; font-size: 20px; margin: 10px 0px;}
#form1right {text-align: right; padding-right: 20px; font-size: 40px;  font-weight: 700;}
#formHeading{margin-bottom: 30px;}
#formsubHeading {text-align: right;  font-size: 38px;  font-weight: 400; font-style: normal; line-height: normal;}
#formPhoneHeading { margin-top: 10px; text-decoration: underline; font-weight: 400; font-size: 50px;}
#formPhoneHeading img {position: relative; top:-5px; right: 20px;}
.text-purple a:hover{color: #6e7bdd;}

/*Video*/
#setupvideotext{margin: 20px auto;}

/*Features*/
.featurebox{margin-bottom: 50px;}
div#features { max-width: 1440px; margin: 70px auto 0px; padding: 0px;}
.featureText { color: #fff; position: relative; right: 30px; top: 10px;}
.featureText span { font-size: 20px; display: block;}
.feature img { float: right; max-height: 60px; position: relative; top: 10px;max-width: 65px}
.featureText { float: right;}
.lastinrow { padding-right: 120px;}
.secondinrow { padding-right: 25px;}

/*Logos*/
.clients{margin: 30px auto; font-size: 30px; color: #fff;}
#logos{padding: 10px 40px; animation-duration:1s;}
#logos img:hover{transform: scale(1.2); transition: 0.5s; }

/*Footer*/
.call { font-size: 36px; font-weight: 400;}
.footerInput { background-color: transparent; border: 1px solid #9CA9FF; border-radius: 60px; padding: 10px; margin: 5px 0px; width: 100%; color: #fff;}
.footerInput::placeholder{color: #fff; padding-right: 0px;}
#footerForm { padding: 15px 0px;}
button#footerSubmit { background-color: #7989FD; border-radius: 50%; padding: 12px; border: none; position: relative; top: 3px;}
input#footerPhone::placeholder {text-align: right;}
input#footerPhone {text-align: right;}
#footer{margin-bottom: 40px;}

/*Credit*/
#credit{margin: 60px auto 40px;}
#credit a{color: #9CA9FF; text-decoration: none;}

a.btn.btn-purple {
    background-color: #7989fd;
    width: 50%;
    border-radius: 60px;
    color: #ddd;
    padding: 15px;
}

a.btn.btn-special {
    background-color: #7989fd;
    color: #fff;
    padding: 20px 40px;
    border-radius: 16px;
    font-weight: 700;
    margin: 40px 0px;
}

/*Modal*/
.modal-content { background-color: #2e1d4e; text-align: center; color: #fff;border: 1px solid #9CA9FF;box-shadow: 0px 0px 65px 4px rgb(196 203 255 / 40%);border-radius: 30px;}
.modal-body h2 {font-size: 24px; margin: 10px auto;}
button.btn.btn-purple {margin: 10px auto;color: #fff;}

@media only screen and (max-width: 991px){
.modal{padding: 20px!important;}
#mainHeading h1 { font-size: 40px;}
.line img {max-width: 80%;}
div#features {max-width: 90%;}
.lastinrow { padding-right: 0px;}
.secondinrow { padding-right: 0px;}
.logorow { padding: 5px 0px;}
div#cibus {padding: 0px;}
div#footer { padding: 20px;}
.footerlink { font-size: 30px;}
#formPhoneHeading {margin-top: -10px;}
.footerlink img{width: 30px;}
.call {font-size: 26px;}
.footerInput {width: 80%;}
button#footerSubmit {top: -53px;left: -86%;}
#logos img{margin: 10px;}
div#formHeading {font-size: 25px; margin-bottom: 0px;}
div#formsubHeading {font-size: 23px;}
div#formPhoneHeading a {font-size: 25px;}
div#formPhoneHeading img {width: 30px;}
div#form1left {padding: 0px;}
form#pageForm1 {padding: 0px;}
div#form1 {padding: 20px;}
.form1input {padding: 15px;}
 button#form1submit {padding: 15px;}
div#features img {max-width: 55px;padding-right: 10px;}
.line {margin: 0px;}
div#video {max-width: 100%;}
#video video{max-width: 90%; margin: 20px auto;}
#map{max-width: 90%;}
.row {padding: 0px;}
.featureText {right: 20px;}
.firstinrow {margin-right: -15px;}
.featureText span { font-size: 17px;}
div#video .col-lg-12 { padding: 0px; margin-right: 15px;}
 a.btn.btn-purple { background-color: #7989fd; width: 100%; border-radius: 60px; color: #ddd; padding: 15px;}
video.video_shader {
    height: 200px;
}
	.whatsapp-icon { position: fixed; bottom: 20px; right: 10%; background-color: green; padding: 10px; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); z-index: 999; transition: background-color 0.3s;}