.hero-cont{
    display: grid;
    grid-column-gap: 104px;
    max-width: 1400px;
    margin: auto;
    text-align:center;
    align-items: center;
}

/*-form-*/
.urlcheck{
position: relative;
    display: grid;
    grid-template-columns: 1fr;
    margin: 64px 0px 0px;
}

.urlcheck label {
    position: absolute;
    font-size: 17px;
    font-weight: 500;
    left: 0px;
    transform: translateY(-50%);
    background-color: var(--main);
    color: var(--white);
    padding: 0.35rem 0.6rem 0.3rem 0.6rem;
    margin: 0rem 1.2rem;
    transition: .1s ease-out;
    transform-origin: left top;
    pointer-events: none;
    border-radius: 3px;
    line-height: 1;
}

.urlcheck textarea {
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    outline: none;
    border: 1px solid hsl(0deg 0.72% 37.61% / 25%);
    border-radius: 10px;
    padding: 22px;
    color: inherit;
    background-color: #ededed;
    width: 100%;
    max-width: 100%;
    max-width: -moz-available;
    max-width: -webkit-fill-available;
    margin: auto;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

.urlcheck button {
    position: absolute;
    color: var(--black-color);
    background-color: hsl(207.95deg 100% 50%);
    cursor: pointer;
    border-radius: 10px 0px 10px 0px;
    border: none;
    padding: 15px;
    display: flex;
    bottom: 0px;
    right: 0px;
    transition: all 0.3s ease-in-out;
}

.urlcheck button span{
    width: 24px;
    height: 24px;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 27 28' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.45059 12.1552C2.45059 9.57615 3.48334 7.10279 5.32164 5.27916C7.15994 3.45553 9.65321 2.43103 12.253 2.43103C14.8527 2.43103 17.346 3.45553 19.1843 5.27916C21.0226 7.10279 22.0553 9.57615 22.0553 12.1552C22.0553 14.7342 21.0226 17.2075 19.1843 19.0311C17.346 20.8548 14.8527 21.8793 12.253 21.8793C9.65321 21.8793 7.15994 20.8548 5.32164 19.0311C3.48334 17.2075 2.45059 14.7342 2.45059 12.1552V12.1552ZM26.6416 25.9245L21.1584 20.4863C23.3091 18.2373 24.5074 15.2551 24.5059 12.1552C24.5059 5.44186 19.0203 0 12.253 0C5.48565 0 0 5.44186 0 12.1552C0 18.8684 5.48565 24.3103 12.253 24.3103C14.7793 24.312 17.2436 23.5343 19.3045 22.0847L24.9078 27.6445C25.3869 28.1185 26.1625 28.1185 26.6416 27.6445C27.1195 27.1692 27.1195 26.3998 26.6416 25.9245'%3E%3C/path%3E%3C/svg%3E");
}

.urlcheck button:hover {
    background-color: hsl(207.95deg 100% 60%);
    transform: scale(1.05);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.error {
    border: 1px solid #ff6c6c !important;
    box-shadow: 0 5px 10px rgb(255 38 38 / 25%) !important;
} 

.spinner {
    display:none;
    width: 80px;
    height: 80px;
    border: 4px solid var(--white-color);
    border-left-color: var(--blue-color);
    border-radius: 50%;
    position: absolute;
    left: 45%;
    right: 45%;
    top: 150px;
    margin: auto;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

@media only screen and (max-width:767px){
    .urlcheck textarea{
        height:299px;
    }
    
    .spinner {
        width: 50px;
        height: 50px;
        left: 30%;
        right: 30%;
    }
    
}
/*-form-*/
    
.analysis-report{
    max-width:1100px;
    margin:auto;
}

.resultshead{
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:34px;
}

.resultsli{
    list-style: none;
}

.resultsli li {
    background: #ededed;
    border-radius: 10px;
    margin-bottom: 30px;
    overflow: hidden;
    padding: 30px;
}

.murl{
    font-size: 20px;
    font-weight: 700;
}

.murl span{
    font-size: 18px;
    color: var(--brand-green-color);
    font-weight: 500;
}

.results_details{
    position:relative;
    display: flex;
    grid-column-gap: 40px;
    grid-row-gap: 24px;
    justify-content: space-between;
    z-index:1;
    align-items: center;
    margin: 22px 0px;
}

.rd_col1{
    position:relative;
}

.col1_rd_info{
    display: flex;
    justify-content: flex-start;
    grid-column-gap: 40px;
    grid-row-gap: 24px;
    align-items: flex-start;
}

.rdinfo_card{
    display: flex;
    flex-direction: column;
    font-size:17px;
    grid-row-gap: 3px;
    color: var(--d-text);
}

.rdinfo_card span{
    font-size:20px;
    font-weight:700;
    color: var(--main);
}


@media only screen and (max-width:767px){
    .col1_rd_info{
        display: flex;
        flex-direction:column;
        align-items: flex-start;
    }
}


/*-score-count-*/
.circular-bar-container {
    position: relative;
    width: 100px;
    height: 100px;
}

.circular-bar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(var(--default) 0deg, var(--default) calc(var(--progress) * 1deg), #ffffff calc(var(--progress) * 1deg));
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    color: black;
}

.result-excellent {
    --progress: 0;
    --default: darkgreen;
}

.result-very-good {
    --progress: 0;
    --default: green;
}

.result-good {
    --progress: 0;
    --default: lightgreen;
}

.result-average {
    --progress: 0;
    --default: orange;
}

.result-poor {
    --progress: 0;
    --default: red;
}

.goodresult {
    color: green;
}

.badresult {
    color: red;
}
    
.averageresult{
    color: orange;
}

.ratio-excellent {
    color: darkgreen;
}

.ratio-very-good {
    color: green;
}

.ratio-good {
    color: lightgreen;
}

.ratio-average {
    color: orange;
}

.ratio-poor {
    color: red;
}

/*-results-comment-*/
.results-comment{
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 5px;
    margin-top: 1px;
    font-size: 20px;
}

/*-tool-content-*/
.tools_content{
    display:grid;
    grid-template-columns: 1fr 0.5fr;
    max-width: 1500px;
    margin: auto;
}

/*-Content-Section-*/
.content-sec{
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: 0.6fr 2fr auto;
    grid-column-gap: 55px;
    grid-row-gap: 34px;
}

.single_content{
   font-size: 23px;
}

.single_content figure{
    margin: 24px 0px;
}

.single_content img{
    width:100%;
    width:-moz-available;
    width: -webkit-fill-available;
    margin: 24px 0px;
    border-radius: 8px;
}

.single_content h2{
    font-size: 45px;
    margin-top: 40px;
    margin-bottom: 30px;
}
.single_content h3{
    font-size: 34px;
    margin-bottom: 20px;
    margin-top: 30px;
}
.single_content h4{
    font-size: 28px;
    margin-bottom: 20px;
    margin-top: 30px;
}
.single_content h5,
.single_content h6{
    font-size: 24.33px;
    margin-bottom: 20px;
    margin-top: 30px;
}

.single_content p,
.single_content ul,
.single_content ol{
    margin-bottom: 25px;
}

.single_content p:last-child{
    margin-bottom:0px;
}

.single_content ul li,
.single_content ol li{
    list-style-type: square;
    margin-left: 26px;
    margin-bottom: 15px;
}

.single_content ul li:first-child,
.single_content ol li:first-child{
    margin-top:20px;
}
.single_content ul li:last-child,
.single_content ol li:last-child{
    margin-bottom:40px;
}

.single_content a:hover {
    text-decoration:underline;
}


@media only screen and (max-width:1080px) {
    .tools_content{
        grid-template-columns: 1fr;
    }
}
    
@media only screen and (max-width:767px) {
    .single_content{
        font-size: inherit;
    }
    
    .single_content h2{
        font-size: 32.81px;
    }
    
    .single_content h3{
        font-size: 28.18px;
    }
    
    .single_content h4,
    .single_content h5,
    .single_content h6{
        font-size: 24.18px;
    }
    
}
/*--tools-content--*/
.tools_colls{
    max-width: 1500px;
    margin: auto;
    margin-top:80px;
}

.tools_list{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    margin-top:20px;
}  

.tools_list a {
    color:var(--d-text);
    background: var(--l-hover);
    padding: 10px 10px 15px 20px;
    display: flex;
    width: -moz-available;
    width: -webkit-fill-available;
    height: 100px;
    font-weight: 700;
    border-radius: 10px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

.tools_list a:hover {
    background: var(--brand-primary-color);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.tools_list a span{
    display: flex;
    width: 100%;
    justify-content: flex-end;
    overflow:hidden;
}

.tools_list a span svg{
    transform: rotate(-45deg);
    transform-origin: 50% 50% 0px;
    transition: transform 0.4s ease-in-out;
}

.tools_list a:hover span svg{
    transform: translateY(-5px) rotate(0deg);
}

@media only screen and (max-width:1080px){
    .tools_list{
        grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and (max-width:767px){
    .tools_list{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width:599px){
    .tools_list{
        grid-template-columns: repeat(2, 1fr);
    }
}