/*=========================================================================================
font
===========================================================================================*/

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
*{font-family: 'Roboto', sans-serif;}

/*=========================================================================================
scroll bar
===========================================================================================*/

::-webkit-scrollbar{width: 13px;}
::-webkit-scrollbar-track{background: #cacaca; border-radius: 3px;}
::-webkit-scrollbar-thumb{background: var(--primary-color); border-radius: 3px;}
::-webkit-scrollbar-thumb:hover{background: var(--bs-link-color);}

/*=========================================================================================
color
===========================================================================================*/

:root{
    --primary-color: #172983;
    --cloud: #4a96c5;
    --digital: #439855;
    --web: #f5864a;
}

.bg-primary{background: var(--primary-color);}
.bg-cloud{background: var(--cloud);}
.bg-digital{background: var(--digital);}
.bg-web{background: var(--web);}

/*=========================================================================================
border radius
===========================================================================================*/

.border-sx-radius{border-top-left-radius: 5px; border-bottom-left-radius: 5px;}
.border-dx-radius{border-top-right-radius: 5px; border-bottom-right-radius: 5px;}

/*=========================================================================================
nav
===========================================================================================*/

nav .nav-link{border-radius: 5px;}
nav .navbar-brand img{width: 350px;}

/*=========================================================================================
intro
===========================================================================================*/

#intro hr.line{opacity: 1; border: 1px solid var(--primary-color); width: 300px; margin: 1rem auto;}
#intro h2{color: var(--primary-color);}
#intro .servicebox:before, #intro .servicebox:after{border: 10px solid var(--primary-color);}

/*=========================================================================================
cloud
===========================================================================================*/

#cloud h2{font-size: 3rem;}
#cloud .servicebox i{color: var(--cloud);}
#cloud .servicebox:before, #cloud .servicebox:after{border: 10px solid var(--cloud);}

/*=========================================================================================
digital
===========================================================================================*/

#digital h2{font-size: 3rem;}
#digital .servicebox i{color: var(--digital);}
#digital .servicebox:before, #digital .servicebox:after{border: 10px solid var(--digital);}

/*=========================================================================================
web
===========================================================================================*/

#web h2{font-size: 3rem;}
#web .servicebox i{color: var(--web);}
#web .servicebox:before, #web .servicebox:after{border: 10px solid var(--web);}

/*=========================================================================================
box
===========================================================================================*/

.servicebox{padding: 35px 28px 25px; z-index: 1;}
.servicebox p{color: #999999;}
.servicebox h4{font-size: 1.3rem;}
.servicebox i{font-size: 40px;}
.servicebox:before, .servicebox:after{
    content: ""; border-radius: 5px;
    clip-path: polygon(65% 0, 100% 0, 100% 35%, 35% 100%, 0 100%, 0 65%);
    position: absolute; top: 0; right: 0; left: 0; bottom: 0;
}
.servicebox:after{
    clip-path: polygon(0 0, 60% 0, 55% 5%, 96% 44%, 100% 40%, 100% 100%, 40% 100%, 43% 95%, 5% 55%, 0 60%);
    top: 3px; bottom: 3px; right: 3px; left: 3px; border-width: 3px !important; 
}

/*=========================================================================================
table
===========================================================================================*/

table small{font-size: .8rem; color: #999999;}
table i{color: var(--primary-color); font-size: 1.5rem;}
.table-hover>tbody>tr.not:hover>*{--bs-table-accent-bg: #fff;}

/*=========================================================================================
partner
===========================================================================================*/

#partner .servicebox:before, #partner .servicebox:after{border: 10px solid var(--primary-color);}

/*=========================================================================================
footer
===========================================================================================*/

footer a{color: var(--primary-color);}