@font-face{
    font-display:fallback;
    font-family:"Oracle Sans";
    src:url(fonts/OracleSans-Lt.woff2) format("woff2"),url(fonts/OracleSans-Lt.woff) format("woff");
    font-weight:200;
    font-style:normal
}
@font-face{
    font-display:fallback;
    font-family:"Oracle Sans";
    src:url(fonts/OracleSans-LtIt.woff2) format("woff2"),url(fonts/OracleSans-LtIt.woff) format("woff");
    font-weight:200;
    font-style:italic
}
@font-face{
    font-display:fallback;
    font-family:"Oracle Sans";
    src:url(fonts/OracleSans-Rg.woff2) format("woff2"),url(fonts/OracleSans-Rg.woff) format("woff");
    font-weight:400;
    font-style:normal
}

@font-face{
    font-display:fallback;
    font-family:"Oracle Sans";
    src:url(fonts/OracleSans-It.woff2) format("woff2"),url(fonts/OracleSans-It.woff) format("woff");
    font-weight:400;
    font-style:italic
}
@font-face{
    font-display:fallback;
    font-family:"Oracle Sans";
    src:url(fonts/OracleSans-SBd.woff2) format("woff2"),url(fonts/OracleSans-SBd.woff) format("woff");
    font-weight:500;
    font-style:normal
}
@font-face{
    font-display:fallback;
    font-family:"Oracle Sans";
    src:url(fonts/OracleSans-SBdIt.woff2) format("woff2"),url(fonts/OracleSans-SBdIt.woff) format("woff");
    font-weight:500;
    font-style:italic
}
@font-face{
    font-display:fallback;
    font-family:"Oracle Sans";
    src:url(fonts/OracleSans-Bd.woff2) format("woff2"),url(fonts/OracleSans-Bd.woff) format("woff");
    font-weight:700;
    font-style:normal
}
@font-face{
    font-display:fallback;
    font-family:"Oracle Sans";
    src:url(fonts/OracleSans-BdIt.woff2) format("woff2"),url(fonts/OracleSans-BdIt.woff) format("woff");
    font-weight:700;
    font-style:italic
}
@font-face{
    font-display:fallback;
    font-family:"Oracle Sans";
    src:url(fonts/OracleSans-XBd.woff2) format("woff2"),url(fonts/OracleSans-XBd.woff) format("woff");
    font-weight:800;
    font-style:normal
}
@font-face{
    font-display:fallback;
    font-family:"Oracle Sans";
    src:url(fonts/OracleSans-XBdIt.woff2) format("woff2"),url(fonts/OracleSans-XBdIt.woff) format("woff");
    font-weight:800;
    font-style:italic
}
img.card-icon {
margin-right: 20px;
}

img.redwood-illustration {
    left: 900px;
    top: -280px;
    position: relative;
    width: 35%;
    margin-bottom: -250px;
}




.wrap-content {
    inline-size: 100%;
}

.uk-card {
    transition: all .3s ease-in-out;

}

.row {
    display: flex; /* equal height of the children */
  }
  
  .col {
    flex: 400;
    width: 100px; /* additionally, equal width */
    
    padding: 1em;

  }

.blog-card {
    height: 480px;
    border-radius: 15px;
  }


.uk-card-title {
    font-family: 'Oracle Sans';
    font-weight: 450;
    font-size: 20px;
}

.uk-card:hover{
    box-shadow: 0 0 20px rgba(33,33,33,.2); 
    transition: 0.5s;
    transform: scale(1.02); 


}

.cloud-title {
    bottom: 0;
    left: 0;
}

.cloud-title:hover {
    box-shadow: 0 0 20px rgba(33,33,33,.2); 
    transition: 0.5s;
}

.code-block {
    width: 700px;


   
}

.code-block .javascript {
    height: 50px;
}

.code-block { 
    transition: all .3s ease-in-out; 
    }
    
    .code-block:hover { 
    transform: scale(1); 
    }

.uk-offcanvas-bar {

    position: fixed;
    
}

.hidden-card {
    visibility: hidden;
}

iconify-icon {
    vertical-align: middle;
    padding-right: 10px;
    padding-bottom: 5px;
}

#flex-cards {
    display: flex;

    align-items: center;
    justify-content: center;

}
#flex-cards .uk-card{
    width: 472px;
    height: 260px;
    border-radius: 15px;
    padding: 40px, 55px, 40px, 55px;
    gap: 10px;
    margin-left: 20px;
    radius: 15px;
    font-size: 24px;
}

.sidebar {
  position: absolute;
  height: 100vh;
  width: 20vw;
  border: 20px;
}

.sidebar-card {
    float: right;
    height: 100vw;
    display: block;
    box-shadow: 2px;
    border-right: solid;
}

.sidebar-heading {
    color: black;

}


.sub ul {
    margin-left: 2px;
    font-weight: lighter;
}

.sub ul:hover {
    transition: 0.3s;
    transform: scale(1.1); 
    color: black;
}


p {
    color: rgb(105 115 134);

    font-size: 18px;
    font-family: "Oracle Sans";

}

.sidebar-heading-txt {
    margin-left: -20px;
    font-size: 18px;

}

#linksection {
    margin-top: 40px;
    margin-bottom: 1200px;
}

#exploreplatformlink {
    margin-left: 50px;
    font-size: 17px;
    color: #21316d;
}

.landing-h2 {
    font-weight: 400;
    margin-top: 100px;
    margin-left: 20px;
}

h2 {
    font-family: 'Oracle Sans';
    font-weight: 600;
}

.sdk-group button {
    width: 100%; /* Set a width if needed */
    cursor: pointer; /* Pointer/hand icon */
    display: block; /* Make the buttons appear below each other */
    border: 5px;
    background-color: #eef1f5;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
  }

  .sdk-group button:hover {
    color: #5369d4;
    background-color: #e6e8ed;
  }

  .download-code {
    background-color: #5269d4;
    color: white;
    margin-left: 40px;
    position: relative;
    border-radius: 6px;
  }

  .download-code:hover {
    background-color: #3145a2;
    color: white;
  }

  iconify-icon.download-icon {
    right: 25px;
    position: relative;
  }

  .button-txt {
    position: relative;
    right: 15px;
  }

  body {
    background-image: url('img/background-texture.png');
    background-repeat: repeat-xy;
  }

  .main-content {
    padding-left: 50px;
    padding-right: 50px;
  }

  a:hover{
    text-decoration: none;

  }

  .media-title-heading {
font-weight: 500;


    font-size: 25px;
  }


.uk-badge {
    background-color: #437c93c6;
    font-size: 11px;
    width: 76px;
    height: 25px;
    position: relative;


}

.media-read-time {
    position: absolute;
    margin-left: 10px;

}

.read-time-icon {
    position: absolute;
    margin-right: 42px;
    margin-top: 5px;

}

.uk-padding {
    padding-bottom: 20px;
    padding-left: 0px;


}


.welcome-cards {
    width: 100% !important;
    margin-top: -60px;
}

.media-date {
    font-family: "Oracle Sans";
    margin-top: 10px;
}

.blog-img {
    width: 5000;
    height: 100;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.stripe-teal {
    background-image: url('img/color-strip.png');
  }

.stripe-background {
    height: 6px;
    border-radius: 6px 6px 0 0;
}

.heading-txt{
    color: #333333; 
}

.uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before {
    margin:0 10px 0 calc(10px - 4px);
}

.uk-list-primary>::before {
    color:#437C93!important
}


  .accordion {
    background-color: #ffffff;
    color: #000000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border-radius: 15px;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    font-family: "Oracle Sans";
  }
  
  .active, .accordion:hover {
    background-color: #f3f3f3;
  }
  
  .panel {
    padding: 0 18px;
    background-color: #ffffff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .accordion-heading {
    font-family: "Oracle Sans";
    font-weight: bold;
    font-size: 20px;
  }

  .accordion-subcontent-heading {
    font-family: "Oracle Sans";
    color: #234050;
  }

  .accordion-subcontent {
    margin-bottom: 50px;
    left: 45px;
    position: relative;
    inline-size: 90%;
  }

  .accordion-ojet-icon .oj-ux-icon, [class*="oj-ux-"], [class^="oj-ux-"] {
    margin-right: 10px;
    position: relative;
    top: 3px;
  }

  .accordion-ojet-icon:hover, .oj-ux-icon, [class*="oj-ux-"], [class^="oj-ux-"] {
    
  }

  .accordion-ojet-icon .oj-ux-icon, [class*="oj-ux-"], [class^="oj-ux-"] {
    color: #234050;
  }





.video-player {
    width: 400px;
    height: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.video-card {
    text-align: center;
    width: 400px;
    height: 300px;
    border-radius: 8px;
    box-shadow: 3px;

}

.video-sub {
    font-family: "Oracle Sans";
    font-size: 13px;
    text-align: left;
    position: relative;
    bottom: 10px;
}

.video-title {
    text-align: left;
    font-size: 18px;
}

@media only screen and (min-width: 768px) {
    /* For everything bigger than 768px */
    .col-1{
      width: 8.33%;
    }

}

.accordion-subheading {
    right: 100px;
}

.accordion-align {
    position: relative;
    left: 45px;
    inline-size: 85%;
}

.material-icons {
    position: relative;
    top: 3px;
    margin-right: -200px;
}

img.landing-sub-img {
    float: right;
    position: relative;
    bottom: 125px;
    right: 125px;
    margin-bottom: -250px;
    width: 200px;
    opacity: 80%;


}