*{
font-family:cairofont;
}
html{
scroll-behavior:smooth;
}
::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #DBDBDB;
}
::-webkit-scrollbar-thumb {
border-radius: 1px;
background: #B4B4B4;
border: solid 2px #dbdbdb;
}
::-webkit-scrollbar-corner {
background: #A4A4A4;
}
.bgimg-1 {
position: relative;
opacity: 1;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("../media/images/02.jpeg");
min-height: 100%;
}
@media screen and (max-width:550px){
.bgimg-1 {
position: relative;
opacity: 1;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
.bgimg-2 {
position: relative;
opacity: 1;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-2 {
background-image: url("../media/images/03.jpeg");
min-height: 100%;
}
@media screen and (max-width:550px){
.bgimg-2 {
position: relative;
opacity: 1;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
}
.featurestext{
font-size:17px;
margin-top:0px;
margin-bottom:0px;
line-height:30px;
font-weight:bold;
text-align:center;
}
.featurestexttitle{
font-size:23px;
margin-top:8px;
margin-bottom:5px;
line-height:30px;
font-weight:bolder;
color:#2B5192;
}
.featurestext2{
font-size:15px;
margin-top:0px;
margin-bottom:0px;
line-height:30px;
font-weight:bold;
text-align:center;
}
@media screen and (max-width:420px){
.featurestext{
font-size:15px;
margin-top:0px;
margin-bottom:0px;
line-height:30px;
}
}
.bgnbr2{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
height:200px;
padding-right:10px;
padding-left:10px;
padding-bottom:10px;
width:60%;
max-width:220px;
min-width:220px;
background-color:rgba(255,255,255,0.83);
border-radius:1px;
box-shadow:4px 4px 4px rgba(0,0,0,0.5);
margin:14px;
}
.mailfontclass{
width:auto;
}
@media screen and (max-width:712px){
.mailfontclass{
width:100%;
}}
.mainlogo{
width:200px;
}
@media screen and (max-width:400px){
.mainlogo{
width:165px;
}
}
.btnmain{
margin-right:3px;
margin-left:1px;
color:#2B5192;
text-decoration:none;
width:100px;
height:40px;
display:flex;
justify-content:center;
align-items:center;
font-weight:normal;
font-size:20px;
}
@media screen and (min-width:1800px){
.topmod{
margin-top: -300px;
}
}
@media screen and (max-width:1800px){
.topmod{
margin-top: -280px;
}
}
@media screen and (max-width:1600px){
.topmod{
margin-top: -260px;
}
}
@media screen and (max-width:1400px){
.topmod{
margin-top: -240px;
}
}
@media screen and (max-width:1260px){
.topmod{
margin-top: -225px;
}
}
@media screen and (max-width:1160px){
.topmod{
margin-top: -200px;
}
}
@media screen and (max-width:1000px){
.topmod{
margin-top: -160px;
}
}
.hover-underline-animation{
display:inline-block;
position:relative;
color:#2B5192;
}
.hover-underline-animation::after{
content:'';
position:absolute;
width:100%;
transform:scaleX(0);
height:2px;
bottom:0;
left:0;
background-color:#3a7fda;
transform-origin:bottom;
transition:transform 0.3s ease-out;
}
.hover-underline-animation:hover::after{
transform:scaleX(1);
transform-origin:bottom center;
}
.hover-underline-animation2{
display:inline-block;
position:relative;
color:#fff;
}
.hover-underline-animation2::after{
content:'';
position:absolute;
width:100%;
transform:scaleX(0);
height:2px;
bottom:0;
left:0;
background-color:#fff;
transform-origin:bottom;
transition:transform 0.3s ease-out;
}
.hover-underline-animation2:hover::after{
transform:scaleX(1);
transform-origin:bottom center;
}
.hover-underline-animation3{
display:inline-block;
position:relative;
color:blue;
}
.hover-underline-animation3::after{
content:'';
position:absolute;
width:100%;
transform:scaleX(0);
height:1px;
bottom:0;
left:0;
background-color:blue;
transform-origin:bottom;
transition:transform 0.3s ease-out;
}
.hover-underline-animation3:hover::after{
transform:scaleX(1);
transform-origin:bottom center;
}
.sosialclass1{
padding:5px;
border-radius:4px;
background-color:#DCB842;
opacity:0.4;
filter:invert(1);
margin-top:6px;
margin-left:3px;
margin-right:3px;
cursor:pointer;
}
.sosialclass1:hover{
opacity:0.8;
}
.sosialclass2{
padding:5px;
border-radius:4px;
background-color:rgb(33, 221, 221);
opacity:0.4;
filter:invert(1);
margin-top:6px;
margin-left:3px;
margin-right:3px;
cursor:pointer;
}
.sosialclass2:hover{
opacity:0.8;
}
.aboutclass{
grid-template-columns:repeat(1, 1fr);
grid-template-rows:repeat(2, 1fr);
}
.whengridis2{
padding-top:15px;
}
@media screen and (min-width:925px){
.aboutclass{
grid-template-columns:repeat(2, 1fr);
grid-template-rows:repeat(1, 1fr);
}
.whengridis2{
padding-top:0px;
margin-left:20px;
}
}
.spcmodule{
color:#5279D1;
}
.spcmodule:hover{
color:#6292FF;
}
.form-container {
background: #fff;
padding: 10px;
border-radius: 1px;
max-width: 400px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
margin: auto;
}
.form-group {
position: relative;
margin-bottom: 12px;
}
.form-group input {
width: -webkit-fill-available;
padding: 10px 5px 5px 15px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
background: white;
}
.form-group label {
position: absolute;
left: 12px;
top: 8px;
background: white;
padding: 0 4px;
color: #888;
font-size: 16px;
transition: 0.2s ease all;
pointer-events: none;
}
.form-group input:focus {
border-color: #007bff;
}
.form-group input:focus + label{
color: #007bff;
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
top: -11px;
left: 8px;
font-size: 12px;
color: #545454;
}
.form-groupR {
position: relative;
margin-bottom: 12px;
}
.form-groupR input {
width: -webkit-fill-available;
padding: 10px 5px 5px 15px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 2px;
outline: none;
background: white;
direction: rtl;
}
.form-groupR label {
position: absolute;
right: 12px;
top: 8px;
background: white;
padding: 0 4px;
color: #888;
font-size: 16px;
transition: 0.2s ease all;
pointer-events: none;
}
.form-groupR input:focus + label,
.form-groupR input:not(:placeholder-shown) + label {
top: -11px;
right: 12px;
font-size: 12px;
color: #545454;
}
.form-groupR input:focus {
border-color: #007bff;
}
.form-groupR input:focus + label{
color: #007bff;
}
#total {
margin-top: 15px;
font-size: 20px;
color: #191919;
}
button {
margin-top: 20px;
width: 100%;
padding: 10px;
background: #3a7fda;
color: white;
border: none;
font-size: 16px;
border-radius: 1px;
cursor: pointer;
}
button:hover {
background: #2d61a5;
}
.button2 {
margin-top: 20px;
width: 100%;
padding: 10px;
background: #3a7fda;
color: white;
border: none;
font-size: 16px;
border-radius: 1px;
cursor: pointer;
}
.button2:hover {
background: #2d61a5;
}
.popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 999;
}
@media screen and (min-width:835px){
.framepong{
animation: none;
}
}
@media screen and (max-width:835px){
.framepong{
animation: objPing 8s ease-in-out infinite alternate;
}
}
@keyframes objPing{
from {object-position: 0% 50%;}
to {object-position: 100% 50%;}
}