body {
    background-color: #fff;
   font-family: "Ubuntu", sans-serif;
   /* background: #000;
background: linear-gradient(171deg, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, 1) 0%, rgba(54, 161, 255, 1) 100%); */
}
a:hover {
color: #36A1FF !important;
}
.cTextAlignCenter {
    text-align: center;
}
.cColourMode {
    background-color: transparent;
    height: 30px;
    width: 30px;
    display: inline-block;
    background-size: 30px;
    cursor: pointer;
    margin-top: 5px;
    margin-left: 10px;
}




.cOcNav {
	padding-right: 20px;
    	box-shadow: 1px 3px 4px 0 #adadad33;
    
}
.cColourMode.cLightModeOn {
 background-image: url(../img/dark-mode.webp);
}
/* .cColourMode.cDarkModeOn {
 background-image: url(../img/dark-mode.webp);
} */

.cLightBackground {
    background-color: #fff;
}
.cDarkBackground {
    background-color: #f7f8fb;
}

.cIntroLogo {
    width: 175px;
    margin-bottom: 40px;
    margin-left: auto;
  margin-right: auto;
}


.navbar {background-color: #fff !important;}
section {
    padding: 100px 0;
}
section.cIntro {
    padding: 90px 0 100px 0;
    background-color: #f7f8fb;
    text-align: center;
}

.cLOGO {
    font-weight: 800;
    font-size: 30px;
    color: #000;
    margin-bottom: 30px;
    display: inline-block;
}
h1 {
    color: #000;
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 30px;

}

h2 {
    color: #000;
    margin-bottom: 10px;
}

.cIntro h2 {
    margin-bottom: 30px;
}

h3 {
    font-size: 24px;
    line-height: 30px;
    margin-top: 0px;
    margin-bottom: 15px;
}

h4 {
    font-size: 18px;
    line-height: 30px;
    margin-top: 0px;
    margin-bottom: 15px;
    font-weight: 600;
}

.cH2Line {
    height: 5px;
    width: 90px;
    margin-top: 10px;
    margin-bottom: 60px;
    background-color: #36A1FF;
    display: inline-block;
}
p , p a {
    color: #3a3a3a;
}
p.cStrong {
    font-weight: 600;
}

.cButton {
    background-color: #36A1FF;
    padding: 20px 30px 20px 20px;
    border-radius: 10px;
    color: #121212;
    font-weight: 400;
    font-size: 22px;
    line-height: 32px;
    text-decoration: none;
    display: inline-block;
    margin: 20px 0;
    border: 1px solid #36A1FF;
}

.cOutlineButton {
    background-color: transparent;
    padding:20px 30px 20px 30px;
    border-radius: 10px;
    color: #121212;
    font-weight: 400;
    font-size: 22px;
    line-height: 32px;
    text-decoration: none;
    display: inline-block;
    margin: 20px 0;
    border: 1px solid #36A1FF;
    margin-left: 15px;
}

a.cButton:hover , .cOutlineButton:hover {
background-color: #fff;
}

.cButtonIcon {
	background-image: url(../img/github.webp);
	background-size: 30px;
	background-position: 24px center;
	background-repeat: no-repeat;
	padding-left: 70px;
}

.cIcon {
    margin-bottom: 10px;
     /* filter: invert(1); */
    
}
 img.cIcon {
    width: 70px;
    height: 70px;
}
.cCard {
    text-align: center;
    background-color:#f7f8fb;
    padding: 50px !important;
    border-radius: 10px;
    /* border: 1px solid #36A1FF; */
    min-height: 345px;

    max-width: 600px; 
    margin: auto;

    /* box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75);
-webkit-box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75);
-moz-box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75); */
}

.cCard.cFilledCard.cDocs {
    min-height: 360px !important;
}

.cCard.cWithoutBoxshadow {
    box-shadow: none !important;
    margin-bottom: 20px;
    background-color: #fff !important;
} 

.cVideoContainerInner {
    /* border: 1px solid ; */
    /* box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75);
-webkit-box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75);
-moz-box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75); */
}

.cCard ul {
    margin-bottom: 40px;
    padding-left: 0;
}

.cCard li {
	text-align: left;
	background-image: url(../img/tick.webp);
	background-size: 15px;
	background-repeat: no-repeat;
	list-style: none;
	padding-left: 25px;
	margin-bottom: 15px;
	background-position: 2px 5px;
}
.cCard.cFilledCard.cDocs li {
	background-image: url(../img/docs.svg) !important;
	background-position: 0px 1px;
}
.cSidePanel {
    border-bottom: 1px solid #353535;
    padding: 15px 0;
}
.cSidePanel:last-child {
    border: none !important;
}

.cCard h3 , .cSidePanel h3 {
    color: #36A1FF;
}
.cSidePanel p {
    margin-bottom: 0;
}

.cCard.cFilledCard {
    background-color: #f7f8fb;
    border-radius: 10px;
    text-align: left;
    padding: 30px;
    min-height: 200px;
    margin-bottom: 25px;
  
}

.cButton.cOutlineCTA {
    /* background-image: url(../img/bgicons-new-01.webp); */
    background-size: 40px;
    background-position: 10px center;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 60px;
    
    width: auto;
    background-color: transparent;
    border: 1px solid #36A1FF;
    color: #000;
    min-width: 60%;
    text-align: left;
}


.cButton.cOutlineCTA.cQuickStart {
    background-image: url(../img/open-choreo-icons_Quick_start_guide.svg);
}
.cButton.cOutlineCTA.cFlexibleInstall  {
    background-image: url(../img/open-choreo-icons_Full_install_guide.svg);
}

.cButton.cOutlineCTA.cReady-to-Use-Samples {
    background-image: url(../img/Icons-black_ready-to-use-samples.webp);
}

.cButton.cOutlineCTA.cContribute {
    background-image: url(../img/open-choreo-icons_Contribute.svg);
}

.cButton.cOutlineCTA.cReportIssues {
    background-image: url(../img/open-choreo-icons_Report_issues.svg);
}

.cButton.cOutlineCTA.cJoinOurDiscord {
    background-image: url(../img/open-choreo-icons_join_our_discord.svg);
}

.cLastLines {
	margin-top: 80px;
	font-size: 20px;
}

.cButton.cOutlineCTA:hover {
    background-color: #36A1FF;
    color: #000 !important;
}
.cVideo {
    border-radius: 10px;
    margin-top: 15px;
}
.cVideoContainer {
    padding-right: 30px;
}
.cVideoContainerInner {
    height: 100%;
    background: #fff;
    vertical-align: middle;
    border-radius: 10px;
}

.cFilledCard.cDocs ul {
    padding-left: 0;
}

.cFilledCard.cDocs  li {
  list-style: none;
  margin-bottom: 10px;
  
}

.cCard.cFilledCard.cDocs {
    background-image: none !important;
}

.cFilledCard.cDocs li a {
  /* background-color: rebeccapurple !important; */
  text-decoration: none;
  color: #000;
}

.cFilledCard.cDocs li {

}

/* .cFilledCard.cDocs li::before {
	content: '➔';
    color: #36A1FF;
    margin-right: 10px;
} */

.cLogos {
    width: 150px;
    background-color: #fff;
    padding: 0px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid transparent;
}
.cLogos img {
    width: 100%;
    max-width: 60px;
}
.cLogos:hover {
     box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75);
-webkit-box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75);
-moz-box-shadow: 15px 24px 84px -37px rgba(54,161,255,0.75);
border: 1px solid #36A1FF;
}
.cTextContainer {
    padding: 60px;
}


.cBandIsection {
    padding-top: 30px;
    border-top: 1px solid #359df9;
    margin-top: 30px;
}

.cIcol {
    border-left: 1px solid #359df9;
    padding-left: 30px;
    padding-right: 0;
}
.cBcol {
    padding-right: 30px;
    padding-left: 0;
}
.cTextCol {
    padding-left: 0;
}

.cLeftSide {
    padding-left: 0;
}
.cRightSide {
    padding-right: 0;
}

.cButtonContainer {
    text-align: center;
}

.cHeart {
	color: red;
	font-size: 23px;
	line-height: 24px;
}
.cFooterLinks ul  {
    padding: 0px;
}

.cFooterLinks ul li , .cFooterLinks ul li a  {
    list-style: none;
    color: #3a3a3a;
}
.cFooterLinks ul li {
    margin-bottom: 10px;
}



.cBlackLogo {
    display: block ;
}
.cWhiteLogo {
    display: none !important;
}



/* Tooltips */

  
 .tooltip-container {
      position: relative;
      display: inline-block;
      /* margin: 50px; */
    }

    .tooltip-target {
      cursor: pointer;
      padding: 20px;
      display: inline-block;
    }

    .custom-tooltip {
      position: absolute;
      display: none;
      background: #fff;
      color: #000;
      padding: 15px;
      border-radius: 8px;
    box-shadow: 0 -8px 16px rgba(0,0,0,0.2);
      z-index: 10;
      width: 240px;
    }

    .tooltip-content h2 {
      margin-top: 0;
      font-size: 16px;
    }

    .tooltip-arrow {
      width: 0;
      height: 0;
      position: absolute;
    }

    /* Tooltip positioning */
    .custom-tooltip.top {
      bottom: 120%;
      left: 0;
    }

    .custom-tooltip.top .tooltip-arrow {
      bottom: -10px;
      left: 20px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #fff;
    }

    .custom-tooltip.right {
      top: 0;
      left: 120%;
    }

    .custom-tooltip.right .tooltip-arrow {
      left: -10px;
      top: 20px;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 10px solid #fff;
    }

    .custom-tooltip.bottom {
      top: 100%;
      left: -25%;
    }

    .custom-tooltip.bottom .tooltip-arrow {
      top: -10px;
      left: 44%;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #fff;
    }

    .custom-tooltip.left {
      top: 0;
      right: 120%;
    }

    .custom-tooltip.left .tooltip-arrow {
      right: -10px;
      top: 20px;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 10px solid #fff;
    }

/* DARK */
body.cDarkMode {
    background-color: black;
    font-family: "Lato", sans-serif;
}

body.cDarkMode  .cColourMode {
 background-image: url(../img/light-mode.webp) !important;
}
body.cDarkMode .cButton {
	color: #fff !important;
}
body.cDarkMode .cButton:hover {
	color: #36A1FF !important;
}

body.cDarkMode .cOutlineButton {
     color: #fff !important;
}
body.cDarkMode .cOutlineButton:hover {
     color: #36A1FF !important;
     background-color: #fff;
}

body.cDarkMode section.cIntro {
    background-color: #000;
}
body.cDarkMode .cLOGO {
	color: #fff;
}

body.cDarkMode h1 {
	color: #fff;
}
body.cDarkMode h2 {
	color: #fff;
}
body.cDarkMode h3 {
	color: #fff !important;
}
body.cDarkMode h4 {
	color: #fff;
}

body.cDarkMode p {
	color: #B7B7B7;
}
body.cDarkMode .cIcon {
	margin-bottom: 10px;
	filter: invert(88%);
}

body.cDarkMode .cCard.cFilledCard {
background-color: #000;
}

body.cDarkMode .cLightBackground {
  background-color: #0f0f0f;
}
body.cDarkMode .cDarkBackground {
    background-color: #000;
}

body.cDarkMode .cButton.cOutlineCTA {
    color: #fff;
}

body.cDarkMode .cButton.cOutlineCTA.cQuickStart {
    background-image: url(../img/Icons_quick-start.webp);
}
body.cDarkMode .cButton.cOutlineCTA.cFlexibleInstall  {
    background-image: url(../img/Icons_flexible-install.webp);
}

body.cDarkMode .cButton.cOutlineCTA.cReady-to-Use-Samples {
    background-image: url(../img/Icons_ready-to-use-samples.webp);
}

body.cDarkMode .cButton.cOutlineCTA.cContribute {
    background-image: url(../img/Icons_contribute.webp);
}

body.cDarkMode .cButton.cOutlineCTA.cReportIssues {
    background-image: url(../img/Icons_report-issues.webp);
}

body.cDarkMode .cButton.cOutlineCTA.cJoinOurDiscord {
    background-image: url(../img/Icons_join-our-discord.webp);
}

body.cDarkMode .cButton.cOutlineCTA:hover {
    color: #000 !important;
}

body.cDarkMode .cFilledCard.cDocs li a {
  /* background-color: rebeccapurple !important; */
  text-decoration: none;
  color: #B7B7B7;
}

body.cDarkMode .cCard {
background-color: #202020 !important;
}

body.cDarkMode .cCard li {
    color: #B7B7B7;
}

body.cDarkMode .cBlackLogo {
    display: none !important;
} 
body.cDarkMode .cWhiteLogo {
    display: block !important;
}

body.cDarkMode .cFooterLinks ul li ,body.cDarkMode .cFooterLinks ul li a  {
    list-style: none;
    color: #B7B7B7;
}

body.cDarkMode .navbar {
    background-color: #000 !important;
}

body.cDarkMode a.nav-link {
    color: #B7B7B7 !important;
}

  /* body.cDarkMode .tooltip-content h2 {
      margin-top: 0;
      font-size: 16px;
      color: #000 !important;
    } */
body.cDarkMode {

}

body.cDarkMode .custom-tooltip {
	position: absolute;
	display: none;
	background: #3e3e3e !important;
	color: #000;

}

/* 
body.cDarkMode .custom-tooltip.bottom .tooltip-arrow .custom-tooltip.bottom .tooltip-arrow {

	border-bottom: 10px solid #3e3e3e !important;
} */

body.cDarkMode .custom-tooltip.bottom .tooltip-arrow {
	top: -10px;
	left: 44%;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #3e3e3e;
}

body.cDarkMode  p a {
       color: #B7B7B7 !important;
}

.cDarkMode .navbar-toggler-icon {
	filter: invert(1);
}