@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500&display=swap');
/* CSS Document */

:root {
  /* 
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
*/
  /* Override Variables */
  --font-family-sans-serif: 'Poppins', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  --gray-dark: #202420;
  --green: #17aa51;

  /* Page Variables */
  --white: #ffffff;
  --light-gray: #f9f9f9;
  --dark-gray: #5B5F5B;
  --black: #0A0A0A;
  --color-text: var(--gray-dark);
  --font-family-text: var(--font-family-sans-serif);
}

/* override classes */
.py-8{
	padding-bottom: 6rem!important;
	padding-top: 6rem!important;
}
.pt-8{
	padding-top: 6rem!important;
}
.pb-8{
	padding-bottom: 6rem!important;
}
.mb-8{
	margin-bottom: 6rem!important;
}
.family-sans{
	font-family: var(--font-family-text);
}
.color-white{
	color: var(--white) !important;
}
.color-black{
    color:var(--black) !important;
}
.color-green{
	color: var(--green);
}
.bg-black{
	background-color: var(--black);
}
.bg-light-gray{
	background-color: var(--light-gray);
}
.bg-green{
	background-color: var(--green);
}
.bg-dark-gray{
	background-color: var(--dark-gray);
}
.btn-override{
	border-radius: 0;
    border: none;
    padding: .6em 2em;
    font-size: 1em;
	background-color: var(--green);
	color: var(--white);
	font-weight: 300;
}
.btn-override:hover{
	background-color: #149145;
	color: var(--white);
}
.bold{
	font-weight: 600;
	color: var(--green);
}
.bold-font{
	font-weight: 600;
	color: var(--black);
}
.navbar-toggler-override{
	border-color: #17aa51 !important;
}

/* Index page CSS */

body{
	font-family: var(--font-family-text);
	color: var(--color-text);
}
.navigation-link{
	font-size: 1.1em;
	font-weight: 300;
	color: var(--dark-gray) !important;
}
.navigation-link:hover{
	color: var(--black) !important;
}
.site-header{
	background: url(../images/background-ptc.jpg);
	background-repeat:no-repeat;
	background-position:center top;
}

.site-header .layout-hero{
	 min-height: 60vh; 
}

.site-header h1{
	font-size: 3em;
	font-weight: 600;
	color: var(--black);
	text-align: center;
}
.site-header h3{
	font-size: 2.4em;
	font-weight: 200;
	color: var(--dark-gray);
	text-align: center;
	line-height:1.2em;
}
.site-header h2{
	font-size: 3.8em;
	font-weight: 500;
	color: var(--black);
	text-align: center;
	line-height:1.5em;
}
.site-header h2 span{
    background-color:var(--green);
    padding:5px 20px;
    border-radius:35px;
}
.wrapper {
      text-align: center;
}
.wrapper h4{
    color:var(--white);
}
.countdown {
      display: flex;
}

    .countdown .day,
    .countdown .hour,
    .countdown .min,
    .countdown .sec {
      color: #2799ff;
      padding: 0vw 3vw;
      text-align: center;
    }

    .countdown .day .num,
    .countdown .hour .num,
    .countdown .min .num,
    .countdown .sec .num {
      display: block;
      font-size: 3vw;
      line-height: 1em;
    }

    .countdown .day .word,
    .countdown .hour .word,
    .countdown .min .word,
    .countdown .sec .word {
      display: block;
      font-size: 1vw;
      color: #8a99ab;
    }

.rackbank-info-section .title-area h6{
	font-size: 1.2em;
	text-align: center;
	font-weight: 300;
}
.rackbank-info-section .title-area h1{
	font-size: 2.8em;
	font-weight: 500;
	text-align: center;
}
.rackbank-info-section .title-area p{
	font-size: 1em;
	text-align: center;
	font-weight: 200;
}
.rackbank-info-section .title-area p span{
	background-color: var(--black);
	color: var(--white);
}
.rackbank-info-section .title-area{
	margin-bottom: 50px;
}
.rackbank-info-section .info-box-area .the-box{
	background-color: var(--light-gray);
	padding: 60px 30px;
	height: 200px;
}
.rackbank-info-section .info-box-area .the-box h3{
	font-size: 1.6em;
	font-weight: 500;
	text-align: right;
	z-index: 2;
}
.rackbank-info-section .info-box-area .the-box p{
	font-size: 1.2em;
	text-align: right;
	font-weight: 300;
	margin-bottom: 0;
	color:var(--dark-gray);
}
.rackbank-info-section .info-box-area .the-box{
	position: relative;
	overflow: hidden;
}
.rackbank-info-section .info-box-area .the-box img{
	position: absolute;
	top: -20px;
	left: -20px;
	z-index: 1;
}
.why-rackbank-section{
	background: url(../images/why-rackbank-bg.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover; 
}

.why-rackbank-section .why-hero{
	 min-height: 40vh; 
}
.why-rackbank-section .title-area h6{
	font-size: 1.2em;
	font-weight: 300;
	color: var(--white);
}
.why-rackbank-section .title-area h2{
	font-size: 2.8em;
	font-weight: 500;
	color: var(--white);
}
.free-section{
    background-color:var(--white);
    padding:30px;
}
.free-section .title-area h6{
	font-size: 1.2em;
	font-weight: 300;
	color: var(--dark-gray);
}
.free-section .title-area h2{
	font-size: 2.8em;
	font-weight: 500;
	color: var(--black);
	margin-bottom:10px;
}
.free-section .title-area h2 span{
    color:var(--green);
    text-decoration:underline;
}

.why-box-section .why-white-box{
	background-color: var(--white);
	padding: 3em 2.4em;
	box-shadow: 0 2px 2px rbga(0,0,0,0.5);
	z-index: 1;
}
.why-box-section .why-white-box h6{
	font-size: 1.5em;
	font-weight: 400;
	margin-bottom:20px;
}
.why-box-section .why-white-box h5{
	text-decoration: line-through;
	font-weight: 300;
}
.why-box-section .why-white-box h3{
	font-size: 2.8em;
	font-weight: 500;
}
.why-box-section .why-white-box p{
	font-size: .95em;
	font-weight: 300;
}
.why-box-section .why-white-box p span{
	font-weight: 500;
}
.location-section{
	background-color: var(--light-gray);
}
.location-section .location-bg{
	background: url(../images/gigacampus-location.jpg);
	background-position: right center;
	background-repeat: no-repeat;
}
.location-bg{
	min-height: 40vh;
}
.location-section .location-box h4{
	font-size: 2em;
	margin-bottom: 20px;
}
.location-section .location-box p{
	font-size: .95em;
	background-color: var(--light-gray);
	padding: 5px 5px 5px 0;
	font-weight: 200;
}
.info-box-area h5{
    font-size:24px;
    font-weight:500;
    margin-bottom:30px;
    color:var(--green);
}
.info-box-area ul{
    margin-left:-20px;
}
.info-box-area ul li{
    font-size:14px;
    margin-bottom:15px;
}
.tour-section{
	background-color: var(--black);
}
.tour-section .tour-text h3{
	font-size: 3.6em;
	color: var(--white);
	margin-bottom: 5px;
}
.tour-section .tour-text ul li{
	font-size: .95em;
	color: var(--white);
	margin-bottom: 10px;
	font-weight: 200;
	margin-left: -20px;
}
.footer-section .footer-location-link a{
	color: var(--green);
	font-size: 1.2em;
}
.footer-section .footer-location-link a:hover{
	text-decoration: underline;
	color: var(--black);
}
.footer-section .footer-location-link a::after{
	content: " ➝";
    width: 1rem;
}
.footer-section .footer-brand p{
	font-size: .95em;
	margin-bottom: 30px;
	font-weight: 200;
}
.footer-section .footer-nav h4{
	font-size: 1.4em;
	font-weight: 500;
	margin-bottom: 20px;
}
.footer-section .footer-nav ul{
	margin-left: -40px;
	list-style: none;
}
.footer-section .footer-nav ul li{
	margin-bottom: 10px;
}
.footer-section .footer-nav ul li a{
	font-size: .95em;
	font-weight: 300;
	color: var(--black);
}
.footer-section .footer-copyright p{
	font-size: .85em;
	font-weight: 200;
}
.footer-section .footer-tnc ul{
	list-style: none;
	display: block;
}
.footer-section .footer-tnc ul li{
	display: inline;
	margin-right: 30px;
}
.footer-section .footer-tnc ul li a{
	font-size: .85em;
	color: var(--black);
	font-weight: 200;
}
.social-media .social-icon{
	font-size: 1.6em;
}
.social-media .social-icon:hover{
	text-decoration: none;
}
/*  Whatsapp chat bot  */
.ccw_plugin .chip {display: inline-block;height: 32px;font-size: 13px;font-weight: 500;color: rgba(0, 0, 0, 0.6);line-height: 32px;padding: 0 12px;border-radius: 16px;background-color: #e4e4e4;margin-bottom: 5px;margin-right: 5px;}
.ccw_plugin *, .ccw_plugin *:before, .ccw_plugin *:after {box-sizing: inherit;}
.chatbot{position: fixed;z-index: 99999999;}


.inquiry-form{
    background-color:var(--black); 
    padding:50px 30px;
    margin-bottom:30px;
}
.inquiry-heading{
    text-size:2.2em;
    text-align:center;
    font-weight:500;
    color:var(--green);
}
.btn-inquiry{
    width:100%;
    background-color:#F59122;
    color:var(--white);
    padding:15px;
    border:none;
    font-size:1.6em;
}
.btn-inquiry:hover{
    background-color:#EC8318;
}
.form-group label{
    color:var(--white);
    font-weight:300;
}
.form-group input{
    font-weight:300;
}
.services-we-offer img{
    margin-bottom:20px;
}
.services-we-offer h4{
    color:var(--black);
    font-size:.9em;
    font-weight:500;
    margin-bottom:10px;
}
.services-we-offer h5{
    color:var(--white);
    background-color:var(--dark-gray);
    font-size:1em;
    font-weight:300;
    margin-bottom:30px;
    padding:5px;
}
.clients-logo img{
    margin-bottom:20px;
}
.form-box{
    background-color:var(--white);
    padding:30px;
    box-shadow:0 3px 3px rgba(0,0,0,0.2);
}
.form-box h3{
    font-size:30px;
    text-align:center;
    color:var(--green);
    margin-bottom:20px;
    font-weight:500;
}
.info-box-area h2{
    font-size:24px;
    font-weight:400;
    color:var(--black);
    margin-bottom:10px;
}
.info-box-area h3{
    font-size:16px;
    font-weight:300;
    color:var(--dark-gray);
    margin-bottom:30px;
}


/*  Extra large devices (large desktops, 1200px and up)  */
@media (max-width: 1300px){
    .rackbank-info-section .info-box-area .the-box h3{
        font-size:1.3em!important;
    }
    .why-box-section .why-white-box p{
        font-size:.75em!important;
    }
    
}



@media (max-width: 1600px){
    .rackbank-info-section .info-box-area .the-box{
        height: 230px;
    }
    .rackbank-info-section .info-box-area .the-box h6{
        font-size:4.5em;
    }
    .why-box-section .why-white-box p{
        font-size:.85em;
    }
    .why-box-section .why-white-box h3{
        font-size:2em;
    }
    
}

@media (max-width: 768px){

    .countdown .day .num,
    .countdown .hour .num,
    .countdown .min .num,
    .countdown .sec .num {
      display: block;
      font-size: 10vw;
      line-height: 1em;
    }

    .countdown .day .word,
    .countdown .hour .word,
    .countdown .min .word,
    .countdown .sec .word {
      display: block;
      font-size: 4vw;
      color: #8a99ab;
    }
    .site-header h2{
	font-size: 1.5em;
    }
    .why-rackbank-section .title-area h2{
	font-size: 2em;
    }
    .rackbank-info-section .title-area h1{
	font-size: 2em;
    }
    .free-section .title-area h2{
	font-size: 2em;
    }
    .rackbank-info-section .info-box-area .the-box p{
        font-size: 1.1em;
    }

}