@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --color1: #11142d;
    --placeholder-color: #60626e;
    --white-color: #fff;
    --color2: #5452dc;
    --color3: #9fa2b4;
    --button-color: #159c2d;
    --background-body-color: #f9f9f9;
}

@font-face {
	font-family: "urdu-font";
	src: url(fonts/urdu.ttf);
  }

.urdu{
	direction: rtl !important;
	float: right !important;
	font-family: "urdu-font" !important;
	font-size: 18px !important;
	letter-spacing:1.1px !important;
	font-weight:bold !important;
}

* {
    font-family: "Archivo", sans-serif;
}

body {
    background-color: var(--background-body-color);
}


/* login Page */

.solarPanel_loginBanner_div {
    position: relative;
    background: url("../assets/login-banner1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

.solarPanelLogInForm {
    width: 68%;
}

.solarPanelLogInForm button,
.sendLinkBtn {
    width: 100%;
    color: var(--white-color);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 27.881px;
    border-radius: 11.152px;
    background-color: var(--button-color);
    height: 50px;
}

.solarPanelLoginLogoHeading {
    color: var(--color1);
    text-align: center;
    font-size: 36px;
    font-weight: 600;
}

.solarPanelLoginLogoHeading1 {
    font-weight: 300;
    font-size: 18px;
    color: var(--color1);
}

.solarPanelLogInForm form label {
    color: var(--color1);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.418px;
}

.solarPanelLogInForm input:not([type="checkbox"]),
.solarPanelLogInForm .input-group-text {
    height: 50px;
    border: 1.20px solid #929292;
    border-radius: 10px;
}

.solarPanelLogInForm form input::placeholder {
    color: var(--placeholder-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 27.881px;
}

.solarPanelLogInForm form a {
    color: var(--color2);
    font-size: 14px;
    font-weight: 500;
    line-height: 120%;
}

.solarPanelLogInForm p {
    color: #565656;
    font-size: 16px;
    font-weight: 500;
    line-height: 27.881px;
}

.solarPanelLogInForm p span {
    color: var(--color2);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 27.881px;
}


/* #eye-icon {
    color: var(--color3);
} */

.form-check input {
    border: 2px solid var(--button-color);
    height: 20px;
    width: 20px;
}


/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Firefox */

input[type="number"] {
    -moz-appearance: textfield;
}

.mobileLogoDiv h6 {
    font-weight: 700;
    font-size: 22px;
    text-align: center;
    color: #333;
}

.mobileLogoDiv p {
    font-weight: 400;
    font-size: 18px;
    color: #333;
}

.solarPanel_loginBanner_div h4 {
    font-weight: 700;
    font-size: 22px;
    text-align: center;
}

.solarPanel_loginBanner_div h5 {
    font-weight: 400;
    font-size: 18px;
}

.solarSignUpDiv1 {
    max-height: 100vh;
}


/* scroll bar */

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

 ::-webkit-scrollbar-track {
    background: transparent;
}

 ::-webkit-scrollbar-thumb {
    background: var(--button-color);
    border-radius: 10px;
}

 ::-webkit-scrollbar-thumb:hover {
    background: var(--button-color);
}

.captcha-img img {
    height: 50px;
    border-radius: 10px;
    width: 100%;
}

.input-group-text {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media screen and (min-width: 1920px) {
    .solarPanel_loginBanner_div .z-3 img {
        width: 90% !important;
    }
    .solarPanel_loginBanner_div h4 {
        font-size: 32px;
    }
    .solarPanel_loginBanner_div h5 {
        font-size: 26px;
    }
    .solarPanelLogInForm input:not([type="checkbox"]),
    .solarPanelLogInForm .input-group-text {
        height: 64px;
    }
    .solarPanelLogInForm form label,
    .solarPanelLogInForm p,
    .solarPanelLogInForm p span {
        font-size: 16px;
    }
    .solarPanelLogInForm button {
        height: 58px;
    }
}

@media screen and (min-width: 1200px) {
    .w-xl-50 {
        width: 50% !important;
    }
}

@media screen and (max-width: 1024px) {
    .solarPanel_loginBanner_div .z-3 img {
        width: 70% !important;
    }
}

@media screen and (width: 1024px) and (height: 768px) {
    .solarPanel_loginBanner_div img {
        width: 80% !important;
    }
}

@media screen and (max-width: 991px) {
    .solarPanelLogInForm {
        width: 85%;
    }
    .solarSignUpDiv1 {
        max-height: 100vh;
    }
    .solarPanelLoginLogoHeading {
        color: #009859;
    }
}

@media screen and (max-width: 576px) {
    .solarPanelLogInForm {
        width: 95%;
    }
    .mobileLogoDiv h6 {
        font-size: 18px;
    }
    .mobileLogoDiv p {
        font-size: 13px;
    }
    .solarPanelLoginLogoHeading {
        font-size: 32px;
    }
    .mobileLogoDiv img {
        width: 28% !important;
    }
    .solarPanelLoginLogoHeading1 {
        font-size: 10px !important;
    }
}

@media screen and (max-width: 430px) {
    body {
        padding: 50px 0px;
    }
}