.g-recaptcha{
    padding: 20px 0px;
}
.errors{
    color: rgb(143, 9, 9);
    padding: 10px;
    display: none;
    text-transform: capitalize;
}
.success{
    color: rgb(21, 61, 21);
    padding: 10px;
    display: none;
    text-transform: capitalize;
}
.dark {
    --primary-dark:#111111;
    --primary-light: #ffffff;
    --my-background-color: #1d1d1d;
}
.light {
    --primary-dark:#ffffff;
    --primary-light: #111111;
    --my-background-color: #f0f0f0;
}
html, body{
    overflow-x: hidden;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
}
.img-fluid{
    min-width:100%;
}
form{
    font-size: 15px;
    color: var(--primary-light);
    text-transform: capitalize;
}
.form-group{
    padding: 5px 0px;
}
.input-group-text{
    background-color: var(--primary-dark);
    border:0px;
    color: var(--primary-light);
    font-size: 15px; 
}
.input-group-text i{
    font-size: 15px;
}
label{
    padding: 5px 0px 5px 0px;
}
.form-control, .form-check-input{
    background-color: var(--primary-dark);
    border:0px;
    color: var(--primary-light);
    font-size: 15px;
}
.w-10{
    width: 7%;
}
.w-90{
    width: 93%;
}
.form-control:focus{
    background-color: var(--primary-dark);
    border:0px;
    color: var(--primary-light);
}
.form-check-input:checked{
    background-color: #563D7C;
}
.circle{
    border-radius: 300px;
    border: 4px solid var(--primary-light);
    animation: scale4 0.75s infinite ease-in-out;
}
.supporters{
    display:block;
    font-size:16px;
    padding-bottom: 10px;
    color: var(--primary-light);
}
#Main{
    background-color: var(--my-background-color);
    color: var(--primary-light);
}
.min-vh-100{
    min-height: 2000px !important;
}
header{
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: #563D7C;
    --tw-gradient-to: rgb(136 61 231 / 0);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to: rgb(159 84 255 / 0);
    --tw-gradient-stops: var(--tw-gradient-from),#563D7C,var(--tw-gradient-to);
    --tw-gradient-to: #e490b0;
    padding: 20px;
    min-height: 80px;
}
#mode {
    min-width:50px;
}
#mode i{
    font-size: 22px;
    padding: 3px;
    min-width:30px;
    display: inline-block;
    animation: scale3 1.5s infinite ease-in-out;
}
.footer{
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: #563D7C;
    --tw-gradient-to: rgb(136 61 231 / 0);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to: rgb(159 84 255 / 0);
    --tw-gradient-stops: var(--tw-gradient-from),#563D7C,var(--tw-gradient-to);
    --tw-gradient-to: #e490b0;
    font-size: 12px !important;
}
p, .text-justify, ul, select{
    font-size: 14px !important;
    color: var(--primary-light) !important;
}
.my-opacity-0{
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.my-opacity-1{
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.logo{
    cursor: pointer;
    display: block;
    max-width: 200px; 
    width: 100%;
    height: auto;
}
select{
    color:#111111 !important;
}
.button-primary-large, .button-primary-large:visited, .button-primary-large:focus {
    padding: 15px;
    border-radius: 100px;
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: #563D7C;
    --tw-gradient-to: rgb(136 61 231 / 0);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to: rgb(159 84 255 / 0);
    --tw-gradient-stops: var(--tw-gradient-from),#563D7C,var(--tw-gradient-to);
    --tw-gradient-to: #e490b0;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    font-size: 22px;
    text-align: center;
    display: block;
    border:none;
}
.button-primary-large:hover {
    background-image: unset;
    background-color: var(--primary-dark) !important;
    color: var(--primary-light);
}
i{
    font-size: 48px;
}
.nav-masthead .nav-link {
    color: var(--primary-light);
    border-bottom: .25rem solid transparent;
    min-width: fit-content;
    border: none;
    background-color: transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
    color: var(--primary-dark);
}
.nav-masthead .nav-link + .nav-link {
    margin-left: 1rem;
}
.nav-link{
    cursor: pointer;
    font-size: 16px;
}
#AboutLink{
    min-width:100px;
}
.dropdown-item{
    cursor: pointer;
    max-width: 320px;
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
}
.dropdown-item:hover{
    color: var(--primary-light);
    font-style: italic;
    font-weight: 300;
}
.w-180px {
    width: 180px;
    padding: 10px 20px;
    display: inline-block;
}
.w-240px {
    width: 240px;
}
.w-360px {
    width: 360px;
    max-width: 100%px;
}
.title {
    color:#563D7C;
    font-weight: bold;
    text-transform: uppercase;
    font-size:24px !important;
}
.white {
    color: var(--primary-light);
}
.yellow {
    color:#e9a608;
    font-size: 12px;
    display: inline-block;
    animation: scale3 1.5s infinite ease-in-out;
}
.category-block{
    background-color: var(--primary-dark);
    color: var(--primary-light);
    border-radius: 30px !important;
    min-height: 470px;
    position: relative;
    animation: scale4 2s infinite ease-in-out;
}
.category-block:hover{
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: #563D7C;
    --tw-gradient-to: rgb(136 61 231 / 0);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to: rgb(159 84 255 / 0);
    --tw-gradient-stops: var(--tw-gradient-from),#563D7C,var(--tw-gradient-to);
    --tw-gradient-to: #e490b0;
}
@keyframes scale4{
    0% { transform: scale(1, 1); }
    50% { transform: scale(1.025, 1.025); }
    100% { transform: scale(1, 1); }
}
.category-block h2{
    text-transform: uppercase;
    font-size:22px !important;
    color: var(--primary-light);
}
.category-block:hover h2{
    color: var(--primary-dark);
}
.category-block:hover .count{
    background-color: var(--primary-light); 
}
.category-photo{
    display: block;
    position: relative;
    left: 50%;
    margin-left: -128px;
    width: 256px;
    height: 256px;
    background-repeat: no-repeat;
    background-position: center top;
    animation: scale1 1s infinite ease-in-out;
}
@keyframes scale1{
    0% { transform: scale(1, 1); }
    50% { transform: scale(1.05, 1.05); }
    100% { transform: scale(1, 1); }
}
.category-block:hover .category-photo{
    background-position: center bottom;
}
#Inspiration-photo{
    background-image: url("../img/Inspiration.png");   
}
#Websites-Awards-photo{
    background-image: url("../img/Websites Awards.png");   
}
#Read-And-Learn-photo{
    background-image: url("../img/Read And Learn.png");   
}
#Watch-And-Learn-photo{
    background-image: url("../img/Watch And Learn.png");   
}
#E-Books-photo{
    background-image: url("../img/E-Books.png"); 
}
#UXUI-Tools-photo{
    background-image: url("../img/UXUI Tools.png");
}
#UXUI-Challenges-photo{
    background-image: url("../img/UXUI Challenges.png");
}
#UXUI-Chrome-Extensions-photo{
    background-image: url("../img/Best Chrome Extensions.png");
}
#Figma-photo{
    background-image: url("../img/Figma.png");
}
#Photo-photo{
    background-image: url("../img/Photo.png");
}
#Best-InVision-UIKits-photo{
    background-image: url("../img/Best InVision UIKits.png");
}
#Typography-photo{
    background-image: url("../img/Typography.png");
}
#Colors-photo{
    background-image: url("../img/Colors.png");
}
#Stock-Videos-photo{
    background-image: url("../img/Stock Videos.png");
}
#Music-And-Sound-FX-photo{
    background-image: url("../img/Music And Sound FX.png");
}
#Presentation-Templates-photo{
    background-image: url("../img/Presentation Templates.png");
}
#Mockups-photo{
    background-image: url("../img/Mockups.png");
}
#Mockups-photo{
    background-image: url("../img/Mockups.png");
}
#Prepare-for-Interview-photo{
    background-image: url("../img/Prepare for Interview.png");
}
#Jobs-photo{
    background-image: url("../img/Jobs.png");
}
.count{
    background-color: #563D7C;
    color:var(--primary-dark);
    border-radius: 100px;
    width:60px;
    height: 60px;
    top: 30px;
    right:30px;
    position: absolute;
    font-size: 26px;
    padding-top: 10px;
    animation: scale2 0.75s infinite ease-in-out;
}
@keyframes scale2{
    0% { transform: scale(1, 1); }
    50% { transform: scale(1.1, 1.1); }
    100% { transform: scale(1, 1); }
}
.btn-outline-light {
    border-radius: 100px;
    --bs-btn-color: var(--primary-light);
    --bs-btn-border-color: var(--primary-light);
    --bs-btn-hover-color: var(--primary-dark);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-light);
    --bs-btn-focus-shadow-rgb: 248,249,250;
    --bs-btn-active-color:  var(--primary-dark);
    --bs-btn-active-bg: var(--primary-light);
    --bs-btn-active-border-color: var(--primary-light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary-light);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-light);
    --bs-gradient: none;
    animation: scale3 1.5s infinite ease-in-out;
}
.btn-outline-light2 {
    border-radius: 100px;
    --bs-btn-color: var(--primary-light);
    --bs-btn-border-color: var(--primary-light);
    --bs-btn-hover-color: var(--primary-dark);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-focus-shadow-rgb: 248,249,250;
    --bs-btn-active-color:  var(--primary-dark);
    --bs-btn-active-bg: var(--primary-light);
    --bs-btn-active-border-color: var(--primary-light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary-light);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-light);
    --bs-gradient: none;
    position: absolute;
    bottom:25px;
    width:200px;
    margin-left: -100px;
    font-size: 16px;
    animation: scale3 1.5s infinite ease-in-out;
}
@keyframes scale3{
    0% { transform: scale(1, 1); }
    50% { transform: scale(1.1, 1.1); }
    100% { transform: scale(1, 1); }
}
.btn-outline-light{
    border-radius: 100px;
    position: absolute;
    bottom:20px;
    left:20px;
    min-width:100px;
    font-size: 16px;
}
.btn-outline-light:hover, .btn-outline-light2:hover{
    background-color:  var(--primary-dark);
    color:var(--primary-light);
    border-color: var(--primary-light);
}
.feature-block {
    background-color:  var(--primary-dark);
    border-radius: 20px;
    padding: 20px;
    min-width: 100%;
    min-height: 285px;
    position: relative;
    
}
.feature-block:hover{
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: #563D7C;
    --tw-gradient-to: rgb(136 61 231 / 0);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to: rgb(159 84 255 / 0);
    --tw-gradient-stops: var(--tw-gradient-from),#563D7C,var(--tw-gradient-to);
    --tw-gradient-to: #e490b0;
}
.counter {
    font-size: 12px;
    color: var(--primary-light);
    display: inline-block;
}
.feature-block h3{
    font-weight: bold;
    font-size: 24px !important;
    color:#563D7C;
}
.feature-block:hover h3{
    color: var(--primary-dark);
    font-weight: bold;
}
.back-to-top{
    border-radius: 6px;
    border:1px solid var(--primary-light);
    background-color:  var(--primary-dark);
    position: fixed;
    width:50px;
    height: 50px;
    bottom:30px;
    right:30px;
    cursor: pointer;
}
.back-to-top:hover{
    background-color: #563D7C;
}
.back-to-top i{
    color:var(--primary-light);
    font-size: 20px;
    margin-left: 15px;
    margin-top: 15px;
}
@media all and (max-width: 419px) {
    .logo{
        text-align: center;
        max-width: 100%;
    }
    .logo img{
        width:100%;
    }
    .count{
        width:40px;
        height: 40px;
        top: 15px;
        right: 15px;
        position: absolute;
        font-size: 20px;
        padding-top: 5px;
    }
    .category-block{
        min-height: 300px;
    }
    .category-photo{
        margin-left: -52px;
        width: 96px;
        height: 96px;
        background-size: 100% 200%;
    }
    .category-block h2{
        font-size: 17px !important;
    }
}
@media all and (min-width: 420px) and (max-width: 768px) {
    .logo{
        text-align: center;
        max-width: 100%;
    }
    .logo img{
        width:200px;
    }
}
@media all and (min-width: 769px) and (max-width: 991px) {
    .logo{
        max-width: 125px;
    }
    .logo img{
        margin-top:5px;
        width:105%;
    }
    .nav-masthead .nav-link + .nav-link {
        margin-left: 5px;
    }
    .category-block{
        min-height: 450px;
    }
    .feature-block {
        min-height: 225px;
    }
}
@media all and (min-width: 1200px) and (max-width: 1400px){
    .feature-block {
        min-height: 250px;
    }
}
@media all and (min-width: 1401px){
    .feature-block {
        min-height: 225px;
    }
}