@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root{
    --theme-color: #112D46;
    --yellow-color: #FEE674;
}

.rws-wrap{
    padding: 60px 0;
    h2{
        font-size:48px;
        font-weight:300;
        line-height:55px;
        margin-bottom: 10px;
    }
    p{
        font-family: Roboto, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
    }
    .rws-resources-top-wrap{
        padding-bottom: 50px;
    }
    .rws-resources-top {
        justify-content: space-between;
        display: flex;
        align-items: center;
        margin-bottom: 25px;
    }
	.rws-title{
        font-size: 12px;
        letter-spacing: 1.2px;
        line-height:normal;
        font-weight:700;
        text-transform: uppercase;
        padding: 0;
        span{
            position: relative;
            padding-right: 25px;
        }
        span:after{
            content: "";
            position: absolute;
            width: 12px;
            height: 1px;
            background-color: var(--theme-color);
            opacity: 0.5;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
        }
    }
    .rws-resources-link {
        position: relative;
        padding-right: 20px;
        font-family: "Inter", sans-serif;
        color: var(--theme-color);
        span{
            position: absolute;
            transition: all .25s linear;
            right: 0;
            display: inline-block;
            margin-left: 5px;
        }
    }
    .rws-resource-single-card {
        height: 500px;
        color: var(--theme-color);
        border-bottom: 1px dashed #19537B;
        background-color: rgb(235 235 232 / 35%);
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        img{
            height: 100%;
            max-width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            border-bottom: 5px solid transparent;
            
        }
        .rws-content {
            padding: 17px;
            flex: 1 1 auto;
            span{
                margin: 0 0 12px;
                display: inline-block;
            }
            h3{
                font-size:24px;
                font-weight:500;
                line-height:30px;
                margin-bottom: 10px;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                padding: 0;
            }
            p{
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
        .rws-content-only{
            h3{
                font-size: 28px;
                line-height: 36px;
                -webkit-line-clamp: 7;
            }
            p{
                -webkit-line-clamp: 4;
            }
        }
        .rws-resources-link{
            padding: 0 17px 17px 17px;
            span{
                margin-left: 10px;
                position: relative;
            }
        }
        &.no-img:hover{
            background-color: var(--yellow-color);
        }
        &:hover{
            img{
                border-bottom-color: #FFE14F;
            }
        }
    }
    .rws-taxonomy-single-card{
        padding: 0 0 10px;
        border-bottom: 1px dashed #123c59;
        height: 100%;
        display: block;
        text-decoration: none;
        color: var(--theme-color);
        img{
            aspect-ratio: 4 / 5;
            object-fit: cover;
            display: block;
            width: 100%;
            max-width: 100%;
            margin-bottom: 15px;
        }
        h4{
            color: #2680BE;
            font-weight: 500;
            font-size: 24px;
            line-height: 32px;
        }
        .tax-title{
            letter-spacing: 0.42px;
            font-size: 14px;
            line-height: normal;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
    }
    .owl-nav {
        margin-top: 60px;
    }
    .owl-carousel .owl-nav button:hover{
        background-color: var(--yellow-color) !important
    }
    .owl-carousel .owl-nav span {
        font-size: 0;
    }
    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next{
        margin-right: 24px;
        background: url('data:image/svg+xml,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_898_3220)"><circle cx="24" cy="24" r="23.5" stroke="%23EBEBE8"/><path d="M23 18L17 24M17 24L23 30M17 24H32.75" stroke="%23123C59" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_898_3220"><rect width="48" height="48" fill="white"/></clipPath></defs></svg>');
        height: 48px;
        width: 48px;
        background-repeat: no-repeat;
        border-radius: 50%;
    }
    .owl-carousel .owl-nav button.owl-next{
        background: url('data:image/svg+xml,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_898_3223)"><circle cx="24" cy="24" r="23.5" transform="matrix(-1 0 0 1 48 0)" stroke="%23EBEBE8"/><path d="M25 18L31 24M31 24L25 30M31 24H15.25" stroke="%23123C59" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_898_3223"><rect width="48" height="48" fill="white" transform="matrix(-1 0 0 1 48 0)"/></clipPath></defs></svg>');
    }
    .owl-carousel .owl-dots .owl-dot {
        background-color: #ABB1B7;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        margin: 0 5px;
    }
    .owl-carousel .owl-dots {
        text-align: center;
        margin-right: 20px;
        margin: 50px 0 0;
    }
    .owl-carousel .owl-dots .owl-dot.active {
        background-color: #17242F;
    }
    .owl-flex .owl-stage {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .owl-flex .owl-item{
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        height: auto !important;
    }
    .owl-flex .item{width:100%;}
}