/*
Theme Name: base3
Text Domain: base3
Version: 1.1
Tested up to: 1.0
Requires at least: 1.0
Requires PHP: 7.0
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. complete editor styles give you a good idea of online_portal your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns, block-styles, wide-blocks, accessibility-ready
author: EfirM~edia
author URI: https://efirmedia.com/
Theme URI: https://efirmedia.com/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

all files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share online_portal you've learned
with others.
*/
@font-face {
    font-family: 'SFP';
    src: url('assets/fonts/SFProDisplay-r.woff2');
    font-weight: 400;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: 'SFP';
    src: url('assets/fonts/SFProDisplay-m.woff2');
    font-weight: 500;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: 'SFP';
    src: url('assets/fonts/SFProDisplay-l.woff2');
    font-weight: 300;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: 'icon';
    src: url('assets/fonts/icon.woff2');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'SFP', sans-serif;
	color: #101010;
    outline: 0;
    font-size: 14px;
    font-weight: 400;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}
footer {
    margin-top: auto;
}
a {
	text-decoration: none;
}
img {
    display: block;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"],
textarea,
input[type="tel"],
select,
input[type="submit"] {
    -webkit-appearance: none;
}
input[placeholder] {
    text-overflow: ellipsis;
}
textarea {
    resize: vertical;
    min-height: 70px;
    max-height: 400px;
}
:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 50px #fff !important;
    box-shadow: inset 0 0 0 50px #fff !important;
}
:focus::-webkit-input-placeholder {
    color: transparent;
    transition: 0.3s;
}
::selection {
    background-color: rgba(35, 33, 22, 0.7);
    color: #fff;
}
.wrapper {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}
header.index {
    position: fixed;
    z-index: 101;
    width: 100%;
}
header:not(.index) {
    margin-bottom: 100px;
}
header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
    position: relative;
}
header:not(.index) .wrapper::after,
footer.dark .wrapper .bottom::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: scaleX(1);
    border-top: 2px solid #ec3e32;
    content: '';
    transform-origin: left;
    animation: border 2s forwards cubic-bezier(0,0,0.1,1);
}
@keyframes border {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
header.index .wrapper {
    padding-top: 25px;
}
header.index .logo {
    position: fixed;
    width: 306px;
    top: calc(50% - 48px);
    left: calc(50% - 153px);
    animation: pre 2.5s 0.8s forwards cubic-bezier(0,0,0.2,1);
}
@keyframes pre {
    0% {
        width: 306px;
        top: calc(50% - 48px);
        left: calc(50% - 153px);
    }
    100% {
        width: 158px;
        top: 30px;
        left: calc((100% - 1400px)/2);
    }
}
header .logo {
    z-index: 101;
}
header .logo img {
    display: none;
}
header.index .logo img.white {
    display: block;
}
header:not(.index) .logo img.black {
    display: block;
}
header .logo img {
    width: 100%;
}
header .menu {
    margin-left: auto;
}
.menu {
    position: relative;
}
.hamburger {
    display: none;
    align-items: center;
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
header .show .hamburger {
    z-index: 99;
    position: fixed;
    top: 20px;
    right: 20px;
}
.hamburger span,
.hamburger span::before {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: #101010;
    transition: 0.25s;
    border-radius: 4px;
}
header.index .hamburger span,
header.index .hamburger span::before {
    background: #fff;
}
.hamburger span {
    top: 15px;
}
.hamburger span::before {
    content: '';
    top: 10px;
}
header .show .hamburger span {
    transform: rotate(45deg);
    top: 18px;
}
header .show .hamburger span::before {
    top: 0;
    transform: rotate(90deg);
}
header .ws-menu ul,
footer .menu-main-container ul {
    display: flex;
    align-items: center;
}
header .ws-menu ul li,
footer .menu-main-container ul li {
    list-style-type: none;
    margin-left: 80px;
}
header .ws-menu ul li:first-child {
    margin-left: 0;
}
header .ws-menu ul li a,
footer .menu-main-container ul li a {
    font-size: 26px;
    position: relative;
}
header.index .ws-menu ul li a {
    color: #fff;
    font-weight: 300;
    opacity: 0;
    animation: opacity 2s forwards cubic-bezier(0,0,0.2,1);
}
header.index .ws-menu ul li:first-child a {
    animation-delay: 1.8s;
}
header.index .ws-menu ul li:nth-child(2) a {
    animation-delay: 2.1s;
}
header.index .ws-menu ul li:nth-child(3) a {
    animation-delay: 2.4s;
}
header.index .ws-menu ul li:nth-child(4) a {
    animation-delay: 2.7s;
}
header.index .ws-menu ul li:nth-child(5) a {
    animation-delay: 3.0s;
}
header.index .ws-menu ul li:nth-child(6) a {
    animation-delay: 3.4s;
}
@keyframes opacity {
    0%  {
        opacity: 0;
    }
    100%    {
        opacity: 1;
    }
}
header .ws-menu ul li a::after,
footer .menu-main-container ul li a::after {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    transform: scaleX(0);
    border-top: 2px solid #101010;
    content: '';
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.25,0,0.4,1);
}
header.index .ws-menu ul li a::after,
footer .menu-main-container ul li a::after {
    border-top: 2px solid #fff;
}
header .ws-menu ul li a:hover::after,
footer .menu-main-container ul li a:hover::after,
header .ws-menu ul li.selected a::after,
header .ws-menu ul li.selected a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
.main-title {
    display: flex;
    flex-wrap: wrap;
}
.main-title div {
    position: relative;
    overflow: hidden;
    margin-right: 25px;
    height: 116px;
}
.main-title div span {
    font-weight: 400;
    font-size: 110px;
    line-height: 110px;
    color: #101010;
    letter-spacing: -0.05em;
    left: -2px;
    position: relative;
    top: 100%;
}
.main-title.view div span {
    animation: show 0.5s forwards linear;
}
@keyframes show {
    0% {
        top: 100%;
    }
    70% {
        top: 0;
    }
    80% {
        top: -10px;
    }
    100% {
        top: 0;
    }
}
footer {
    background: #fff;
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(.455,.03,.515,.955);
    height: 100vh;
}
footer * {
    color: #101010;
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(.455,.03,.515,.955);
}
footer.dark {
    background: #101010;
}
footer.dark * {
    color: #fff;
}
footer .wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}
footer .top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    align-items: center;
    padding-top: 6rem;
    height: 100%;
}
footer .top span {
    font-size: 35px;
    line-height: 42px;
    font-weight: 400;
    max-width: 440px;
    letter-spacing: -0.02em;
}
footer .top a {
    display: flex;
    align-items: flex-end;
    font-size: 110px;
    line-height: 110px;
    margin-right: auto;
    margin-left: 15px;
    letter-spacing: -0.03em;
}
footer .top a::after {
    content: "\e001";
    font-family: 'icon';
    font-size: 113px;
    line-height: 100px;
    margin-left: 45px;
    transform: translateX(0);
    transition: 0.6s;
}
footer .top a:hover::after {
    transform: translateX(20px);
}
footer .bottom {
    padding: 80px 0;
    position: relative;
    display: flex;
    height: 13rem;
}
footer .bottom::before {
    bottom: unset !important;
    top: 0;
}
footer .bottom p {
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -0.01em;
    margin-right: auto;
}
footer .menu-main-container {
    margin-left: auto;
    margin-right: 20px;
}
footer .menu-main-container ul li {
    margin-left: 60px;
}
footer .menu-main-container ul li:first-child {
    margin-left: 0;
}
footer .menu-main-container ul li a,
footer .developer {
    font-size: 18px;
    letter-spacing: -0.01em;
}
footer .developer {
    margin-left: auto;
}
@media screen and (max-width: 1400px) {
    .wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
    @keyframes pre {
        0% {
            width: 306px;
            top: calc(50% - 48px);
            left: calc(50% - 153px);
        }
        100% {
            width: 158px;
            top: 30px;
            left: 20px;
        }
    }
    header:not(.index) {
        position: relative;
    }
    header:not(.index)::before,
    header:not(.index)::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 20px;
        background: #fff;
        z-index: 97;
    }
    header:not(.index)::before {
        left: 0;
    }
    header:not(.index)::after {
        right: 0;
    }
}
@media screen and (max-width: 1200px) {
    .main-title div {
        height: 84px;
    }
    .main-title div span {
        font-size: 80px;
        line-height: 80px;
    }
}
@media screen and (max-width: 1000px) {
    footer .top {
        grid-template-columns: 100%;
        grid-template-rows: repeat(2, 1fr);
        padding-top: unset;
        align-items: flex-end;
    }
    footer .top a {
        padding-bottom: 66px;
    }
    footer .bottom {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: space-between;
        padding-top: 30px;
        padding-bottom: 40px;
        grid-gap: 3rem;
    }
    footer .bottom p {
        order: 1;
    }
    footer .menu-main-container {
        order: 3;
        grid-column: 1/-1;
        margin: 0 auto;
    }
    footer .menu-main-container ul li {
        margin-left: 90px;
    }
    footer .developer {
        order: 2;
    }
}
@media screen and (max-height: 420px) {
    footer .top span {
        font-size: 25px;
        line-height: 30px;
    }
    footer .top a {
        font-size: 47px;
        line-height: 47px;
    }
    footer .top a::after {
        font-size: 56px;
        line-height: 40px;
    }
    footer .menu-main-container,
    footer .menu-main-container ul {
        width: 100%;
        margin: 0 auto;
    }
    footer .bottom p,
    footer .menu-main-container ul li a,
    footer .developer {
        font-size: 14px;
    }
    footer .menu-main-container ul li {
        margin: 0;
    }
    footer .menu-main-container ul {
        justify-content: space-between;
        max-width: 335px;
    }

}
@media screen and (max-width: 1200px){
    header .ws-menu ul li {
        margin-left: 30px;
    }
}
@media screen and (max-width: 1000px){
    header:not(.index) {
        margin-bottom: 80px;
    }
    header .wrapper,
    header.index .wrapper {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    header:not(.index) .logo .black {
        animation: header-show-2 0.8s forwards linear;
    }
    header:not(.index) .show .logo .black {
        display: none;
        animation: header-show 0.8s forwards linear;
    }
    header:not(.index) .show .logo .white {
        display: block;
        animation: header-show-2 0.8s forwards linear;
    }
    @keyframes header-show {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @keyframes header-show-2 {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .hamburger {
        display: flex;
    }
    header:not(.index) .show .hamburger span,
    header:not(.index) .show .hamburger span::before {
        background: #fff;
    }
    .ws-menu {
        position: fixed;
        background: #101010;
        width: 100%;
        padding: 155px 20px 60px 0;
        top: -800px;
        right: 0;
        transition: 0.8s;
        display: flex;
        max-height: 100vh;
        z-index: 98;
    }
    header .show .ws-menu {
        top: 0;
    }
    .ws-menu .menu-main-container {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        overflow-y: auto;
    }
    header .ws-menu ul {
        flex-direction: column;
        align-items: flex-end;
        overflow-y: auto;
    }
    header .ws-menu ul li {
        margin-bottom: 40px;
    }
    header .ws-menu ul li a {
        font-size: 50px;
        color: #fff;
        font-weight: 300;
        opacity: 0;
        animation: opacity 2s forwards cubic-bezier(0,0,0.2,1);
    }
    @keyframes show {
        0% {
            top: 100%;
        }
        70% {
            top: 0;
        }
        80% {
            top: -2px;
        }
        100% {
            top: 0;
        }
    }
    .main-title div {
        height: 49px;
        margin-right: 8px;
    }
    .main-title div span {
        font-size: 47px;
        line-height: 47px;
        letter-spacing: -0.03em;
    }
    .main-title div span:not(:first-child) {
        left: -4px;
    }
}
@media screen and (max-width: 768px) {

    footer .top span {
        font-size: 25px;
        line-height: 30px;
    }
    footer .top a {
        font-size: 47px;
        line-height: 47px;
    }
    footer .top a::after {
        font-size: 56px;
        line-height: 40px;
    }
    footer .menu-main-container,
    footer .menu-main-container ul {
        width: 100%;
        margin: 0 auto;
    }
    footer .bottom p,
    footer .menu-main-container ul li a,
    footer .developer {
        font-size: 14px;
    }
    footer .menu-main-container ul li {
        margin: 0;
    }
    footer .menu-main-container ul {
        justify-content: space-between;
        max-width: 335px;
    }
}
@media screen and (max-width: 578px) {
    .wrapper {
        padding-left: 10px;
        padding-right: 10px;
    }
    header:not(.index)::before,
    header:not(.index)::after {
        width: 10px;
    }
    header.index .logo {
        position: fixed;
        width: 250px;
        top: calc(50% - 38px);
        left: calc(50% - 125px);
        animation: pre 2.5s 0.8s forwards cubic-bezier(0,0,0.2,1);
    }
    @keyframes pre {
        0% {
            width: 250px;
            top: calc(50% - 38px);
            left: calc(50% - 125px);
        }
        100% {
            width: 115px;
            top: 20px;
            left: 10px;
        }
    }
    header .show .hamburger {
        right: 10px;
        top: 23px;
    }
    .ws-menu {
        padding: 155px 10px 60px 0;
    }
}
@media screen and (max-height: 375px) {
    .ws-menu {
        padding: 80px 20px 60px 0;
    }
}








/*new pages*/
footer .menu-main-container ul li:nth-child(4), footer .menu-main-container ul li:nth-child(5){
    display: none;
}
.page-template-page-online-portal header .ws-menu ul li a::after{
    border-color: #FFFFFF;
}

.page-template-page-online-portal header{
    margin-bottom: 0;
    z-index: 1;
    position: relative;
}

.page-template-page-online-portal header .wrapper::after,
.page-template-page-online-portal header::before,
.page-template-page-online-portal header::after{

    display: none;
}
.page-template-page-online-portal header .logo img.white {
    display: block;
}

.page-template-page-online-portal header .logo img.black {
    display: none;
}
.page-template-page-online-portal header .hamburger span,
.page-template-page-online-portal header .hamburger span::before {
    background: #fff;
}
.page-template-page-online-portal header .ws-menu ul li a {
    color: #fff;
    font-weight: 300;
}

.page-template-page-online-portal .top-section-online-portal{
    background: url(./assets/images/onlineportal/op_top_bg.png) center center no-repeat;
    background-size: cover;
    margin-top: -125px;
    padding-top: 325px;
    padding-bottom: 64px;
    
}
.page-template-page-online-portal .top-section-online-portal .wrapper{
    display: flex;
    gap: 50px;
}
.page-template-page-online-portal .top-section-online-portal .col-left{
    width: 50%;
}

.page-template-page-online-portal .top-section-online-portal .col-text{
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 120%;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    max-width: 340px;
    margin-bottom: 26px;
}
@media screen and (max-width: 768px){
    .page-template-page-online-portal .top-section-online-portal .col-text{
        font-size: 20px;
        max-width: 260px;
    }
}
.page-template-page-online-portal .top-section-online-portal .col-right{
    width: 50%;
}
.page-template-page-online-portal .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    background: #F92D2D;
    position: relative;
    z-index: 0;
}
header.index .red-button a{
    color: #f5f5f5;
}
.red-button a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 48px;
    background: #F92D2D;
    position: relative;
    z-index: 0;
    font-size: 26px;
    line-height: 30px;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
header .ws-menu ul li.red-button a:hover:after{
    color: #F92D2D;
}
.red-button a:hover {
    color: #F92D2D;
}
.page-template-page-online-portal .link span {
    color: #f5f5f5;
    font-size: 26px;
    line-height: 30px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    z-index: 0;
}
.page-template-page-online-portal .link i  {
    display: block;
    position: absolute;
    top: calc(100% - 2px);
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #f5f5f5;
    transition: 0.2s;
    z-index: -1;
}
.red-button a:before{
    content: "";
    display: block;
    position: absolute;
    top: calc(100% - 2px);
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #f5f5f5;
    transition: 0.2s;
    border: none;
    z-index: -1;
}
.red-button a:hover:before{
    top: 2px;
}
header.index .ws-menu ul li.red-button a:hover{
    color: #F92D2D;
}
.page-template-page-online-portal .link:hover span, .page-template-page-online-portal .link:active span {
    color: #F92D2D;
}
.page-template-page-online-portal .link:hover i, .page-template-page-online-portal .link:active i {
    top: 2px;
}
.page-template-page-online-portal .link b {
    font-weight: normal;
    width: 28px;
    overflow: hidden;
    margin-left: 10px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.page-template-page-online-portal .link b::after {
    content: '\e001';
    font-family: 'icon';
    color: #F5F5F5;
    font-size: 28px;
    line-height: 18px;
    z-index: 1;
    box-sizing: border-box;
}
.page-template-page-online-portal header .ws-menu ul li.red-button a:after{
    color: #F5F5F5;
}
.page-template-page-online-portal header .ws-menu ul li.red-button a:hover:after{
    color: #F92D2D;
}
header.index .ws-menu ul li.red-button a:after{
    color: #F5F5F5;
}
header.index .ws-menu ul li.red-button a:hover:after{
    color: #F92D2D;
}
.red-button a:after{
    content: '\e001';
    font-family: 'icon';
    color: #101010;
    font-size: 28px;
    line-height: 18px;
    z-index: 0;
    box-sizing: border-box;
    border: none;
    margin-left: 8.4px;
}
header .ws-menu ul li.red-button a:after {
    position: relative;
    bottom: auto;
    left: auto;
    width: auto;
    transform: none;
    border-top: none;
    content: '\e001';
    font-family: 'icon';
    color: #101010;
    font-size: 28px;
    line-height: 18px;
    z-index: 0;
    box-sizing: border-box;
    margin-left: 8.4px;
    transform-origin: 0;
    transition: none;
}
@media screen and (max-width: 1000px){
    header .ws-menu ul li.red-button a:after{
        color: #F5F5F5;
    }
}
.page-template-page-online-portal header .ws-menu ul li.red-button a:hover{
    color: #F92D2D;
}
.red-button a:hover:after{
    color: #F92D2D;
    position: relative;
}
.page-template-page-online-portal .link:hover b:after, .page-template-page-online-portal .link:active b:after {
    color: #F92D2D;
    position: relative;
}
.page-template-page-online-portal .top-section-online-portal .main-title div *{
    color: #FFFFFF;
}

.online_portal {
    background: #ffffff;
    padding: 130px 0;
    margin-bottom: 73px;
}

.online_portal .main-title {
    margin-bottom: 55px;
}

.online_portal .items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
}

.online_portal .items.view::before,
.online_portal .items.view::after {
    position: absolute;
    left: 0;
    width: 100%;
    transform: scaleX(1);
    border-top: 2px solid #ec3e32;
    content: '';
    transform-origin: left;
    animation: border 2s forwards cubic-bezier(0, 0, 0.1, 1);
}

.online_portal .items::before {
    top: 0;
}

.online_portal .items::after {
    bottom: 0;
}

.online_portal .items .item {
    display: flex;
    flex-direction: column;
    padding: 60px 60px 64px;
    text-align: left;
    position: relative;
}

.online_portal .items.view .item:nth-child(2)::before,
.online_portal .items.view .item:nth-child(2)::after {
    position: absolute;
    top: 0;
    height: 100%;
    transform: scaleY(1);
    border-left: 2px solid #ec3e32;
    content: '';
    transform-origin: top;
    animation: border-op 2s forwards cubic-bezier(0, 0, 0.1, 1);
}


.online_portal .items.view .item:nth-child(3)::before,
.online_portal .items.view .item:nth-child(3)::after {
    position: absolute;
    top: 0;
    height: 100%;
    transform: scaleY(1);
    border-left: 2px solid #ec3e32;
    content: '';
    transform-origin: top;
    animation: border-op 2s forwards cubic-bezier(0, 0, 0.1, 1);
}

.online_portal .items.view .item:nth-child(2)::before {
    left: 0;
}

.online_portal .items.view .item:nth-child(2)::after {
    right: 0;
}

.online_portal .items.view .item:nth-child(3)::before {
    display: none;
}

.online_portal .items.view .item:nth-child(3)::after {
    right: 0;
}

@keyframes border-op {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(1);
    }
}

.online_portal .items .item h2 {
    font-size: 35px;
    line-height: 42px;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    font-weight: normal;
}

.online_portal .items .item p {
    font-size: 18px;
    line-height: 20px;
    font-weight: normal;
    letter-spacing: -0.01em;
    font-weight: 300;
}
.your_way{
    margin-bottom: 216px;
}
.your_way .main-title{
    margin-bottom: 98px;
}
.your-way-cols{
    display: flex;
    gap: 79px;
}
@media screen and (max-width: 768px){
    .your-way-cols{
        gap: 30px;
    }
    .your-way-col-description .your-way-col-text{
        font-size: 20px;
    }
    .online_portal{
        padding: 70px 0;
    }
    .your_way{
        margin-bottom: 70px;
    }
}

@media screen and (max-width: 700px){
    .your-way-cols{
        gap: 20px;
        flex-flow: column;
    }
    .your_way .main-title {
        margin-bottom: 30px;
    }
    .page-template-page-online-portal .top-section-online-portal .wrapper{
        flex-flow: column-reverse;
    }
    .page-template-page-online-portal .top-section-online-portal .col-left, .page-template-page-online-portal .top-section-online-portal .col-right{
        width: 100%;
    }
    .page-template-page-online-portal .top-section-online-portal{
        padding-top: 200px;
    }
}


.your-way-col-description{
    max-width: 279px;
}
.your-way-col-description .your-way-col-text{
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 110%;
    letter-spacing: -0.03em;
    margin-bottom: 39px;
}
.your-way-col-links{
    display: flex;
    gap: 18.34px;
}
.your-way-col-img{
    max-width: 1042px;
}
.your-way-col-img img{
    max-width: 100%;
}
@media screen and (max-width: 1400px) {
  

    .online_portal .items .item {
        padding: 60px 35px 64px;
    }

    .online_portal .items .item:first-child {
        padding-left: 0;
    }

    .online_portal .items .item h2 {
        font-size: 31px;
        line-height: 38px;
    }
}

@media screen and (max-width: 1200px) {

    .online_portal .items {
        grid-template-columns: 100%;
    }

    .online_portal .items .item {
        padding: 50px 0;
    }

    .online_portal .items.view .item:nth-child(2)::before,
    .online_portal .items.view .item:nth-child(2)::after {
        left: 0;
        height: unset;
        right: unset;
        width: 100%;
        transform: scaleX(1);
        border-top: 2px solid #ec3e32;
        border-left: unset;
        content: '';
        transform-origin: left;
        animation: border 2s forwards cubic-bezier(0, 0, 0.1, 1);
    }

    .online_portal .items.view .item:nth-child(2)::before {
        top: 0;
    }

    .online_portal .items.view .item:nth-child(2)::after {
        bottom: 0;
        top: unset;
    }
    .online_portal .items.view .item:nth-child(3)::before,
    .online_portal .items.view .item:nth-child(3)::after {
        left: 0;
        height: unset;
        right: unset;
        width: 100%;
        transform: scaleX(1);
        border-top: 2px solid #ec3e32;
        border-left: unset;
        content: '';
        transform-origin: left;
        animation: border 2s forwards cubic-bezier(0, 0, 0.1, 1);
    }

    .online_portal .items.view .item:nth-child(3)::before {
       display: none;
    }

    .online_portal .items.view .item:nth-child(3)::after {
        bottom: 0;
        top: unset;
    }

}

@media screen and (max-width: 1000px) {
    
}

@media screen and (max-width: 768px) {
   
}

@media screen and (max-width: 578px) {
   
    .online_portal {
        padding-top: 80px;
        padding-bottom: 80px;
        margin-bottom: 0;
    }

    .online_portal .main-title {
        margin-bottom: 60px;
    }

    .online_portal .items .item {
        padding: 30px 0;
    }

    .online_portal .items .item h2 {
        font-size: 25px;
        line-height: 30px;
    }

    .online_portal .items .item p {
        font-size: 14px;
        line-height: 16px;
    }

}

.your-way-cols {
    opacity: 0;
    transition: opacity 1s;

}

.your-way-cols.view {
    opacity: 1;
}