html {
scroll-behavior: smooth;
}
*{ margin: 0; padding: 0; box-sizing: border-box; letter-spacing: 0.15px; }
*::before,
*::after {
box-sizing: border-box;
}
.bgf2f2f2 {
background-color: #f2f2f2;
}
.bgf2f2f2 {
background-color: #fff !important;
}
body { background-color: #F4F5FA; font-family: Arial, Helvetica, sans-serif; }
a { text-decoration: none; }
.img { width: 100%; overflow: hidden; }
.img img { width: 100%; }
.left {
text-align: left;
}
.right {
text-align: left;
}
.center {
text-align: center;
}
/*BORDER CODE END ////////////////////////// */
.border { border: solid 1px #e7e7e7; }
.border-left { border-left: solid 1px #e7e7e7; }
.border-right { border-right: solid 1px #e7e7e7; }
.border-bottom { border-bottom: solid 1px #e7e7e7; }
.border-top { border-top: solid 1px #e7e7e7; }
.border-none { border: none !important; }
.border-radius4 { border-radius: 4px;}
.border-radius6 { border-radius: 6px;}
.border-radius8 { border-radius: 8px;}
.border-radius10 { border-radius: 10px;}
.border-radius12 { border-radius: 12px;}
/*BORDER CODE END ////////////////////////// */
/*BUTTONS CSS CODE START //////////////////// */
/* https://www.codehim.com/demo/candy-color-button-animation/ */
.button-center {
text-align: center;
width: 100%;
clear: both;
}
.button {
width:fit-content;
height: 45px;
color: #fff;
border-radius: 5px;
padding: 12px 32px;
font-family: lato,sans-serif;
font-size: 18px;
font-weight: 500;
background: 0 0;
cursor: pointer;
transition: all .3s ease;
position: relative;
display: inline-block;
box-shadow: inset 2px 2px 2px 0 rgb(255 255 255 / 50%), 7px 7px 20px 0 rgb(0 0 0 / 10%), 4px 4px 5px 0 rgb(0 0 0 / 10%);
outline: none;
margin: 10px 0px;
}
.custom-btn {
width:fit-content;
height: 45px;
color: #fff;
border-radius: 5px;
padding: 12px 32px;
font-family: lato,sans-serif;
font-size: 18px;
font-weight: 500;
background: 0 0;
cursor: pointer;
transition: all .3s ease;
position: relative;
display: inline-block;
box-shadow: inset 2px 2px 2px 0 rgb(255 255 255 / 50%), 7px 7px 20px 0 rgb(0 0 0 / 10%), 4px 4px 5px 0 rgb(0 0 0 / 10%);
outline: none;
margin: 10px 0px;
}
.btn-1 {
background:#060e83;
background:linear-gradient(0deg,rgba(6,14,131,1) 0%,rgba(12,25,180,1) 100%);
border:none
}
.btn-1:hover{
background:#0003ff;
background:linear-gradient(0deg,rgba(0,3,255,1) 0%,rgba(2,126,251,1) 100%)
}
.btn-2{
background:#6009f0;background:linear-gradient(0deg,rgba(96,9,240,1) 0%,rgba(129,5,240,1) 100%);
border:none
}
.btn-2:before{height:0%;width:2px}
.btn-2:hover{box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.4)}
.btn-3{background:#00acee;background:linear-gradient(0deg,rgba(0,172,238,1) 0%,rgba(2,126,251,1) 100%);width:130px;height:40px;line-height:42px;padding:0;border:none}
.btn-3 span{position:relative;display:block;width:100%;height:100%}
.btn-3:before,.btn-3:after{position:absolute;content:"";right:0;top:0;background:#027efb;transition:all .3s ease}
.btn-3:before{height:0%;width:2px}
.btn-3:after{width:0%;height:2px}
.btn-3:hover{background:0 0;box-shadow:none}
.btn-3:hover:before{height:100%}
.btn-3:hover:after{width:100%}
.btn-3 span:hover{color:#027efb}
.btn-3 span:before,
.btn-3 span:after{position:absolute;content:"";left:0;bottom:0;background:#027efb;transition:all .3s ease}
.btn-3 span:before{width:2px;height:0%}
.btn-3 span:after{width:0%;height:2px}
.btn-3 span:hover:before{height:100%}
.btn-3 span:hover:after{width:100%}
.btn-5{width:130px;height:40px;line-height:42px;padding:0;border:none;background:#ff1b00;background:linear-gradient(0deg,rgba(255,27,0,1) 0%,rgba(251,75,2,1) 100%)}
.btn-5:hover{color:#f0094a;background:0 0;box-shadow:none}
.btn-5:before,.btn-5:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;transition:400ms ease all}.btn-5:after{right:inherit;top:inherit;left:0;bottom:0}
.btn-5:hover:before,
.btn-5:hover:after{width:100%;transition:800ms ease all}
.btn-9{border:none;transition:all .3s ease;overflow:hidden}
.btn-9:after{position:absolute;content:" ";z-index:-1;top:0;left:0;width:100%;height:100%;background-color:#1fd1f9;background-image:linear-gradient(315deg,#1fd1f9 0%,#b621fe 74%);transition:all .3s ease}
.btn-9:hover{background:0 0;box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3);color:#fff}
.btn-9:hover:after{-webkit-transform:scale(2) rotate(180deg);transform:scale(2) rotate(180deg);box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)}
.btn-10{background:#1609f0;background:linear-gradient(0deg,rgba(22,9,240,1) 0%,rgba(49,110,244,1) 100%);color:#fff;border:none;transition:all .3s ease;overflow:hidden}.btn-10:after{position:absolute;content:" ";top:0;left:0;z-index:-1;width:100%;height:100%;transition:all .3s ease;-webkit-transform:scale(.1);transform:scale(.1)}
.btn-10:hover{color:#fff;border:none;background:0 0}
.btn-10:hover:after{background:#0003ff;background:linear-gradient(0deg,rgba(2,126,251,1) 0%,rgba(0,3,255,1)100%);-webkit-transform:scale(1);transform:scale(1)}
.btn-12{position:relative;right:20px;bottom:20px;border:none;box-shadow:none;width:130px;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px}.btn-12 span{background:#00acee;background:linear-gradient(0deg,rgba(0,172,238,1) 0%,rgba(2,126,251,1) 100%);display:block;position:absolute;width:130px;height:40px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);border-radius:5px;margin:0;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s;transition:all .3s}.btn-12 span:nth-child(1){box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.btn-12 span:nth-child(2){-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.btn-12:hover span:nth-child(1){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}.btn-12:hover span:nth-child(2){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);color:transparent;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg)}
.btn-13{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3 0%,#03c8a8 74%);border:none;z-index:1}
.btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:5px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all .3s ease}.btn-13:hover{color:#fff}.btn-13:hover:after{top:0;height:100%}.btn-13:active{top:2px}
.btn-15{background:#b621fe;border:none;z-index:1}.btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#663dff;border-radius:5px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all .3s ease}.btn-15:hover{color:#fff}.btn-15:hover:after{left:0;width:100%}.btn-15:active{top:2px}
/*BUTTONS CSS CODE END //////////////////// */
h1 {
color: #333333;
font-weight: 700;
margin-top: 0;
margin-bottom: 0;
line-height: 1.41;
font-size: 40px;
}
h1 span {
color: #086AD8;
}
h5 {
color: #333333;
font-weight: 600;
margin-top: 0;
margin-bottom: 0;
line-height: 1.41;
font-size: 18px;
}
h1 span {
color: #086AD8;
}
.card01 {
width: 100%;
background-color: #fff;
padding: 10px;
overflow: hidden;
}
.card01 .img {
width: 100%;
}
.card01 .img img {
width: 100%;
}
.card01 .icon {
width: 100px;
margin: 0px auto;
text-align: center;
}
.card01 .icon img {
width: 100px;
margin: 0px auto;
text-align: center;
animation: shakeY 15s linear infinite;
}
.card01 .card01-category {
width: 100%;
font-size:14px;
font-weight: 300;
color: #3ea9f5;
}
.card01 .card01-category a {
color: #3ea9f5;
text-decoration: none;
}
.card01 .card01-category a:hover {
color: #ff0000;
}
.card01 h5 {
width: 100%;
font-weight: 500;
color: #0e2b5c;
font-size: 2.25rem;
line-height: 1.2em;
}
.card01 p {
width: 100%;
font-weight: 500;
color: #0e2b5c;
font-size: 1.25rem;
line-height: 1.2em;
}
.card02 {
width: 100%;
background-color: #fff;
padding: 10px;
overflow: hidden;
}
.card02 .img {
width: 80px;
margin: 0px auto;
}
.card02 .img img {
width: 80px;
margin: 0px auto;
}
.card02 .card02-category {
width: 100%;
font-size:14px;
font-weight: 300;
color: #3ea9f5;
}
.card02 .card02-category a {
color: #3ea9f5;
text-decoration: none;
}
.card02 .card02-category a:hover {
color: #ff0000;
}
.card02 h5 {
width: 100%;
font-weight: 500;
color: #0e2b5c;
font-size: 30px;
line-height: 50px;
}
.card02 p {
width: 100%;
font-weight: 500;
color: #0e2b5c;
font-size: 1rem;
line-height: 1.6em;
}
.card03 {
position: relative;
display: block;
margin-bottom: 30px;
}
.card03-img {
position: relative;
display: block;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
z-index: 1;
}
.card03-img:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
background-color: rgba(var(--insur-black-rgb), .30);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transition: all 500ms ease;
transform: translate3d(0px, -100%, 0px);
z-index: 1;
}
.card03:hover .card03-img:before {
transform: translate3d(0px, 0, 0px);
}
.card03-img img {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.card03:hover .card03-img img {
transform: scale(1.05);
}
.card03-content {
position: relative;
display: block;
background-color: rgb(255, 255, 255);
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.07);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 37px 30px 28px;
}
.card03-icon {
position: absolute;
top: -40px;
right: 20px;
height: 60px;
width: 60px;
background-color: rgb(255, 255, 255);
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.05);
border-radius: var(--insur-bdr-radius);
display: flex;
align-items: center;
justify-content: center;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
z-index: 3;
}
.card03:hover .card03-icon {
background-color: var(--insur-base);
}
.card03-icon span {
position: relative;
display: inline-block;
font-size: 36px;
color: var(--insur-base);
transition: all 500ms linear;
transition-delay: 0.1s;
transform: scale(1);
}
.card03:hover .card03-icon span {
color: var(--insur-white);
transform: scale(0.9);
}
.card03-title {
position: relative;
display: inline-block;
font-size: 20px;
font-weight: 700;
line-height: 30px;
letter-spacing: var(--insur-letter-spacing);
margin-bottom: 5px;
}
.card03-title:before {
position: absolute;
content: "";
left: 0;
top: -16px;
height: 4px;
width: 40px;
background-image: -moz-linear-gradient(0deg, rgb(1, 95, 201) 0%, rgb(12, 224, 255) 100%);
background-image: -webkit-linear-gradient(0deg, rgb(1, 95, 201) 0%, rgb(12, 224, 255) 100%);
background-image: -ms-linear-gradient(0deg, rgb(1, 95, 201) 0%, rgb(12, 224, 255) 100%);
}
.card03-title a {
color: var(--insur-black);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.card03:hover .card03-title a {
color: var(--insur-base);
}
.card03-text {
font-size: 16px;
letter-spacing: var(--insur-letter-spacing);
line-height: 32px;
}
.card04 {
width: 100%;
background: #F2F6F9;
padding-bottom: 10px;
border-radius: 6px 6px 0px 0px;
}
.card04 .img {
width: 100%;
}
.card04 .img img {
width: 100%;
border-radius: 6px 6px 0px 0px;
overflow: hidden;
}
.card04 .content {
width: 86%;
margin: -40px auto 0px auto;
background-color: #fff;
z-index: 999;
position: relative;
padding: 10px;
border-radius: 2px;
text-align: center;
}
.card04 .content h4 {
font-size: 16px;
line-height: 22px;
font-weight: 400;
color: #ff0000;
}
.card04 .content h3 {
font-size: 22px;
line-height: 32px;
font-weight: 600;
color: #333;
}
.card04 .content p {
font-size: 16px;
line-height: 22px;
color: #595959;
}
.card04 .more {
text-align: center;
font-size: 16px;
}
.card04 .more a {
text-decoration: none;
color: #0054E0;
}
.card04 .more a:hover {
text-decoration: none;
color: #ff1b00;
}
/*test end*/
.googlemap {
width: 100%;
margin: 0px;
padding: 0px;
}
.googlemap iframe {
width: 100%;
margin: 0px;
padding: 0px;
border: 0;
min-height: 450px;
}
.google-map {
width: 100%;
margin: 0px;
padding: 0px;
}
.google-map iframe {
width: 100%;
margin: 0px;
padding: 0px;
border: 0;
min-height: 450px;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=email] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=tel] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
.morebutton-01 {
width: 200%;
}
.morebutton-02 {
width: 200%;
}
.morebutton-03 {
width:60px;
height: 60px;
text-align: center;
padding-top: 14px;
background-color: #f2f2f2;
border: solid 1px #e7e7e7;
border-radius: 100%;
margin: 10px auto;
}
.morebutton-03 a {
text-align: center;
vertical-align: middle;
text-decoration: none;
color: #086AD8;
}
.morebutton-03 a {
text-align: center;
vertical-align: middle;
text-decoration: none;
color: #ff0000;
}
.box1 {
width: 100%;
background-color: #fff;
border: solid 1px #e7e7e7;
padding: 10px;
}
.box2 {
width: 100%;
background-color: #fff;
border: solid 1px #e7e7e7;
padding: 10px;
}
.box3 {
width: 100%;
background-color: #fff;
border: solid 1px #e7e7e7;
padding: 10px;
}
.box4 {
position: relative;
display: block;
border-radius: 30px;
background-color: rgb(255, 255, 255);
box-shadow: inset 0px 0px 18px 0px rgb(0 0 0 / 20%);
padding: 15px;
z-index: 1;
}
.flex { width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; }
.flex .flex-box { width: 100%; flex-grow: 1; }
.flex-inline { width: 100%; display:inline-flex; flex-wrap: nowrap; }
.flex-inline .flex-inline-box { padding: 10px; flex-grow: 0; margin: 10px 0px; }
/* CLEAR FIX CSS START //////////////////////// */
.clear0 { clear: both; height: 0px; } .clear1 { clear: both; height: 1px; } .clear2 { clear: both; height: 2px; } .clear3 { clear: both; height: 3px; } .clear4 { clear: both; height: 4px; } .clear5 { clear: both; height: 5px; } .clear10 { clear: both; height: 10px; } .clear15 { clear: both; height: 15px; } .clear20 { clear: both; height: 20px; } .clear25 { clear: both; height: 25px; } .clear30 { clear: both; height: 30px; } .clear35 { clear: both; height: 35px; } .clear40 { clear: both; height: 40px; } .clear45 { clear: both; height: 45px; } .clear50 { clear: both; height: 50px; } .clear55 { clear: both; height: 55px; } .clear60 { clear: both; height: 60px; } .clear65 { clear: both; height: 65px; } .clear70 { clear: both; height: 70px; } .clear75 { clear: both; height: 75px; } .clear80 { clear: both; height: 80px; } .clear85 { clear: both; height: 85px; } .clear90 { clear: both; height: 90px; } .clear95 { clear: both; height: 95px; } .clear100 { clear: both; height: 100px; }
/* CLEAR FIX CSS END //////////////////////// */
/*ALIGN CODE START ////////////////////////// */
.left { text-align: left; } .left-center { text-align: left; } .left-right { text-align: left; } .right { text-align: right; } .right-center { text-align: right; } .right-left { text-align: right; } .center { text-align: center; } .center-left { text-align: center; } .center-right { text-align: center; }
/*ALIGN CODE END ////////////////////////// */
.page-layout {
width: 100%;
padding: 10px 8%;
}
.page-layout .pagelayout-in {
width: 100%;
}
.pagelayout {
width: 100%;
padding: 40px 8%;
}
.pagelayout .pagelayout-in {
width: 100%;
height: fit-content;
}
/* ////////////// TITLE CSS CODE START ///////////////////////////////// */
.page-title-01 {
width: 100%;
padding: 20px 8%;
color: #333;
background-color: #f2f2f2;
border-bottom: solid 1px #e7e7e7;
font-size: 30px;
font-weight: 700;
margin-top: 60px;
margin-bottom: 40px;
width: 100%;
min-height: 60px;
}
/* Page Title 02 Start */
.page-title-02 {
margin: 0px 0px 0px 0px;
clear: both;
padding: 60px 0px 40px 0px;
background-image: url("../images/page-title-bg.jpg");
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.page-title-02 h2 {
color:#fff;
font-size: 50px;
font-weight: 500;
}
.page-title-02 ul {
width: 100%;
}
.page-title-02 ul li {
display: inline-block;
list-style: none;
margin: 0px 10px;
font-size: 18px;
color: #fff;
}
.page-title-02 ul li a {
text-decoration: none;
color:#fff;
}
.page-title-02 ul li a:hover {
color:#f2f2f2;
}
/*
*/
/* Page Title 01 END */
.page-title-03 {
background-color: #3f6bb7;
padding: 30px 0px;
font-size: 30px;
color: #fff;
font-weight: 700;
}
/* Titles-01 Start */
.title-01 h3 {
font-size: 27px;
z-index: 1;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
position: relative;
text-align: left;
font-weight: normal;
}
.title-01 .line {
background: #000;
border-top: solid 1px #e3e3e3;
position: absolute;
height: 1px;
display: block;
top: 16px;
width: 100%;
}
.title-01 .text {
background-color: #f3f3ff;
z-index: 20;
position: relative;
text-align: center;
padding: 0px 18px 0px 0px;
}
/* Title Example
LinStar Theme
*/
/*Title 1 End//// */
.title-02 h3 {
font-size: 27px;
z-index: 1;
position: relative;
text-align: left;
font-weight: 300;
}
.title-02 .line {
background: #000;
border-top: solid 1px #dbdada;
position: absolute;
height: 1px;
display: block;
top: 14px;
width: 100%;
}
.title-02 .line2 {
background: #000;
border-top: solid 1px #dbdada;
position: absolute;
height: 1px;
display: block;
top: 18px;
width: 100%;
}
.title-02 .text {
background-color: #f3f3ff;
z-index: 20;
position: relative;
text-align: center;
padding: 0px 18px 0px 0px;
}
.title-02 strong {
font-weight: 500;
}
/*Title 3 Start */
.title-03 h3 {
font-size: 27px;
color: #0F365C;
padding-bottom: 16px;
z-index: 1;
position: relative;
text-align: left;
font-weight: normal;
}
.title-03 .line {
background: #9eca45;
position: absolute;
height: 2px;
display: block;
bottom: 0px;
width: 72px;
}
.title-03 .text {
z-index: 20;
position: relative;
text-align: center;
}
/*
LinStar Theme
*/
/*Title 3 End*/
.title-04 .line {
background: #9eca45;
position: absolute;
height: 3px;
display: block;
bottom: 0px;
width: 100px;
}
.title-04 .line2 {
background: #000;
border-top: solid 1px #e3e3e3;
position: absolute;
height: 1px;
display: block;
bottom: 1px;
width: 100%;
}
.title-04 .text {
z-index: 20;
position: relative;
text-align: center;
}
.title-04 h3 {
font-size: 27px;
padding-bottom: 16px;
z-index: 1;
position: relative;
text-align: left;
font-weight: normal;
margin-bottom: 25px;
}
.title-04 h3.nmb {
margin-bottom: 3px;
}
.title-05 {
margin-top: -6px;
padding-bottom: 43px;
position: relative;
padding-left: 24px;
}
.title-05:before {
position: absolute;
top: 6px;
left: 0;
width: 3px;
height: 52px;
background: #01305e;
content: "";
}
.title-05 h3 {
color: #292929;
font-size: 30px;
font-weight: 600;
line-height: 36px;
text-transform: uppercase;
margin-top: -7px;
}
.title-05 p {
color: #01305e;
font-size: 16px;
line-height: 24px;
margin: 0 0 12px;
text-transform: capitalize;
}
.title-06 {
width: 100%;
clear: both;
font-size: 50px;
color: #0e54ae;
font-weight: 800;
line-height: 60px;
}
.title-06 span {
width: 100%;
font-size: 40px;
font-weight: 400;
width: 100%;
color: #bc74a5;
}
/*
We Would Love To
See You Smile
*/
/* Style 7
----------------------------- */
.title-07 h3 {
text-align: center;
font-size:30px; font-weight:300; color:#222; letter-spacing:1px;
text-transform: uppercase;
display: grid;
grid-template-columns: 1fr max-content 1fr;
grid-template-rows: 27px 0;
grid-gap: 20px;
align-items: center;
}
.title-07 h3:after {
content: " ";
display: block;
border-bottom: 1px solid #c50000;
border-top: 1px solid #c50000;
height: 5px;
}
.title-07 h3:before {
content: " ";
display: block;
border-bottom: 1px solid #c50000;
border-top: 1px solid #c50000;
height: 5px;
}
/*
Title 07
*/
.title-08 h3 {
text-align:center;
text-transform:uppercase;
font-size:26px; letter-spacing:1px;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 16px 0;
grid-gap: 22px;
}
.title-08 h3:after {
content: " ";
display: block;
border-bottom: 2px solid #e7e7e7;
}
.title-08 h3:before {
content: " ";
display: block;
border-bottom: 2px solid #e7e7e7;
}
/*
Title 08
*/
.title-09 h3 {
font-size:34px; font-weight:500; text-transform:uppercase;
}
.title-09 h3:before {
background-color: #c50000;
border-radius: 0.25rem;
content: '';
display: block;
height: 0.25rem;
width: 42px;
margin-bottom: 1.25rem;
}
/*
Style Ten
*/
.title-10 h3 {
font-size:26px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
width:100px;
text-align:center;
margin:auto;
white-space:nowrap;
padding-bottom:13px;
}
.title-10 h3:before {
background-color: #c50000;
content: '';
display: block;
height: 3px;
width: 15px;
margin-bottom: 5px;
}
.title-10 h3:after {
background-color: #c50000;
content: '';
display: block;
position:absolute; right:0; bottom:0;
height: 3px;
width: 15px;
margin-bottom: 0.25em;
}
/*
Title 10
*/
.subtitle-01 {
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
line-height: 22px;
margin: 0 0 21px 0;
display: inline-block;
position: relative;
margin-left: 35px;
color: #2db7ff;
}
.subtitle-01:before {
content: "";
width: 25px;
position: absolute;
background: #2db7ff;
height: 3px;
left: -35px;
top: 50%;
transform: translateY(-50%);
}
.sub-title-01:before {
content: "";
width: 25px;
position: absolute;
background: #2db7ff;
height: 3px;
left: -35px;
top: 50%;
transform: translateY(-50%);
}
.bgtitle-01 {
width: 100%;
padding: 10px 5px;
font-size: 26px;
font-weight: 500;
background: #0054E0;
color: #fff;
text-align: center;
}
.sectiontitle-01 {
text-align: center;
}
.sectiontitle-01 em {
display: block;
font-size: 18px;
margin-top: 5px;
font-style: normal;
font-weight: 400;
}
.sectiontitle-01 .line {
background: url(../images/h-line2.png) no-repeat center top;
height: 3px;
display: block;
bottom: 0px;
width: 210px;
margin: 18px auto 0 auto;
}
.sectiontitle-02 h2 {
font-size: 35px;
z-index: 1;
position: relative;
text-align: center;
font-weight: 300;
}
.sectiontitle-02 .line {
background: url(../images/h-line.jpg) no-repeat center top;
position: absolute;
height: 1px;
display: block;
top: 18px;
width: 100%;
margin: 0 auto;
}
.sectiontitle-02 .text {
background-color: #ffffff;
z-index: 20;
position: relative;
text-align: center;
padding: 0px 25px;
}
/*Title 7 End */
.sectiontitle-03 {
text-align: center;
}
.sectiontitle-03 em {
display: block;
font-size: 16px;
margin-top: 5px;
font-style: normal;
font-weight: 400;
}
.sectiontitle-03 .line {
background: #9eca45;
height: 3px;
display: block;
bottom: 0px;
width: 100px;
margin: 18px auto 0 auto;
}
.sectiontitle-04 {
color: #333333;
font-weight: 700;
margin-top: 0;
margin-bottom: 0;
line-height: 1.41;
font-size: 40px;
text-align: center;
}
.sectiontitle-04 span {
color: #086AD8;
}
.sectiontitle-04 h3 {
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
/*PURE CSS SLIDE START */
#slide-layout {
width: 100%;
overflow: hidden;
clear: both;
}
#cssslide-01 {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 35s purecss-slider infinite;
}
#cssslide-01 figure {
margin: 0px;
padding: 0px;
z-index: 9;
}
#cssslide-01 figure img {
width: 20%;
float: left;
}
@keyframes purecss-slider {
0% {
left: 0;
}
15% {
left: 0;
}
20% {
left: -100%;
}
35% {
left: -100%;
}
45% {
left: -200%;
}
55% {
left: -200%;
}
65% {
left: -300%;
}
80% {
left: -300%;
}
90% {
left: -400%;
}
100% {
left: -400%;
}
}
/*PURE CSS SLIDE END*/
/* ////////////// TITLE CSS CODE END ///////////////////////////////// */
.p-title01 {
font-size: 22px;
color: #015fc9;
font-weight: 500;
line-height: 34px;
letter-spacing: -0.02em;
padding-bottom: 9px;
margin: 5px 0px 5px 0px;
}
.p-main {
font-size: 20px;
line-height: 36px;
font-weight: 300;
text-align: center;
font-style: italic;
color: #15135F;
background-color: #f1f7fa;
padding: 20px;
}
p {
font-size: 16px;
line-height: 24px;
color: #333;
margin-top: 0;
margin-bottom: 1rem;
font-family: Arial, Helvetica, sans-serif;
}
.p1 {
font-size: 18px;
line-height: 30px;
color: #333;
margin-top: 5;
margin-bottom: 1rem;
font-family: Arial, Helvetica, sans-serif;
}
.p2 {
font-size: 20px;
line-height: 40px;
font-weight: 300;
color: #333;
margin-top: 10;
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-size: 26px;
line-height: 26px;
color: #333;
margin-top: 0;
font-family: Arial, Helvetica, sans-serif;
}
.padding10 {
padding: 10px;
}
/* LIST CSS START ////////////////////////////////// */
.list-normal {
width: 100%;
margin: 0px 0px 1rem 0px;
padding: 0px;
}
.list-normal li {
list-style: none;
font-size: 14px;
line-height: 24px;
color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.list-bullet {
width: 100%;
margin: 0px 0px 1rem 1rem;
padding: 0px;
}
.list-bullet li {
list-style: none;
font-size: 18px;
line-height: 36px;
font-weight: 300;
color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.list-bullet li:before {
content: url('../images/icon-tickmark.png');
margin-left: -1.5em;
}
.list-decimal {
width: 100%;
margin: 0px 0px 1rem 1rem;
padding: 0px;
}
.list-decimal li {
list-style: decimal;
font-size: 14px;
line-height: 24px;
color: #333;
font-family: Arial, Helvetica, sans-serif;
}
/* LIST CSS END ////////////////////////////////// */
/*MEGA NAV CSS START */
.meganav{
z-index: 9999999999;
width: 100%;
top:0;
background: #fff;
z-index: 9999999999999;
position: sticky;
top: 0px;
transition: all .5s linear;
}
.meganav .meganav-wrapper{
position: relative;
max-width: 1300px;
padding: 0px 2px;
height: 100px;
line-height: 100px;
margin:auto auto auto auto;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 9999;
}
.meganav-wrapper .logo a{
color: #333;
font-size: 30px;
font-weight: 600;
text-decoration: none;
z-index: 9;
}
.meganav-wrapper .logo img {
height: 100px;
margin-top: 40px;
}
.meganav-wrapper .nav-links{
display: inline-flex;
}
.meganav .nav-links li{
list-style: none;
}
.meganav .nav-links li a{
color: #333;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 9px 15px;
border-radius: 5px;
transition: all 0.3s ease;
}
.meganav .nav-links li a:hover{
background: #ff0000;
}
.meganav .nav-links li a .active {
background: #ff0000;
}
.meganav .nav-links li .active {
background: #ff0000;
}
.meganav .nav-links .active {
background: #ff0000;
}
.meganav .nav-links .mobile-item{
display: none;
}
.meganav .nav-links .mobile-item1{
display: none;
}
.meganav .nav-links .drop-menu{
position: absolute;
background: #242526;
width: 180px;
line-height: 45px;
top: 80px;
opacity: 0;
visibility: hidden;
box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
.meganav .nav-links li:hover .drop-menu,
.meganav .nav-links li:hover .mega-box{
transition: all 0.3s ease;
top: 50px;
opacity: 1;
visibility: visible;
z-index:9999999999;
}
.meganav .nav-links li:hover .mega-box1{
transition: all 0.3s ease;
top: 50px;
opacity: 1;
visibility: visible;
z-index:9999999999;
}
.meganav .drop-menu li a{
width: 100%;
display: block;
padding: 0 0 0 15px;
font-weight: 400;
border-radius: 0px;
}
.meganav .mega-box{
position: absolute;
left: 0;
width: 100%;
padding: 0 30px;
top: 85px;
opacity: 0;
visibility: hidden;
}
.meganav .mega-box1{
position: absolute;
left: 0;
width: 100%;
padding: 0 30px;
top: 85px;
opacity: 0;
visibility: hidden;
}
.meganav .mega-box .content{
background: #242526;
padding: 25px 20px;
display: flex;
width: 100%;
justify-content: space-between;
box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}
.meganav .mega-box .content .row{
width: calc(25% - 30px);
line-height: 45px;
}
.meganav .content .row img{
width: 100%;
height: 100%;
object-fit: cover;
}
.meganav .content .row header{
color: #f2f2f2;
font-size: 20px;
font-weight: 500;
}
.meganav .content .row .mega-links{
margin-left: -40px;
border-left: 1px solid rgba(255,255,255,0.09);
}
.meganav .row .mega-links li{
padding: 0 20px;
}
.meganav .row .mega-links li a{
padding: 0px;
padding: 0 20px;
color: #fff;
font-size: 17px;
display: block;
}
.meganav .row .mega-links li a:hover{
color: #f2f2f2;
}
.meganav .meganav-wrapper .btn{
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.meganav .meganav-wrapper .btn.close-btn{
position: absolute;
right: 30px;
top: 10px;
}
@media screen and (max-width: 970px) {
.meganav .meganav-wrapper .btn{
display: block;
}
.meganav .nav-links li a{
color: #fff;
}
.meganav .meganav-wrapper .nav-links{
position: fixed;
height: 100vh;
width: 100%;
max-width: 350px;
top: 0;
left: -100%;
background: #242526;
display: block;
padding: 50px 10px;
line-height: 50px;
overflow-y: auto;
box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
transition: all 0.3s ease;
}
.meganav .row .mega-links li a{
color: #fff;
}
.meganav .row .mega-links li a:hover{
color: #f2f2f2;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #242526;
}
::-webkit-scrollbar-thumb {
background: #3A3B3C;
}
#menu-btn:checked ~ .nav-links{
left: 0%;
}
#menu-btn:checked ~ .btn.menu-btn{
display: none;
}
#close-btn:checked ~ .btn.menu-btn{
display: block;
}
.meganav .nav-links li{
margin: 15px 10px;
}
.meganav .nav-links li a{
padding: 0 20px;
display: block;
font-size: 20px;
}
.meganav .nav-links .drop-menu{
position: static;
opacity: 1;
top: 65px;
visibility: visible;
padding-left: 20px;
width: 100%;
max-height: 0px;
overflow: hidden;
box-shadow: none;
transition: all 0.3s ease;
}
#showDrop:checked ~ .drop-menu,
#showMega:checked ~ .mega-box{
max-height: 100%;
}
#showMegaOne:checked ~ .mega-box{
max-height: 100%;
}
#showMegaTwo:checked ~ .mega-box{
max-height: 100%;
}
#showMegaThree:checked ~ .mega-box{
max-height: 100%;
}
#showMegaFour:checked ~ .mega-box{
max-height: 100%;
}
#showMegaFive:checked ~ .mega-box{
max-height: 100%;
}
#showMegaSix:checked ~ .mega-box{
max-height: 100%;
}
.meganav .nav-links .desktop-item{
display: none;
}
.meganav .nav-links .mobile-item{
display: block;
color: #f2f2f2;
font-size: 20px;
font-weight: 500;
padding-left: 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
}
.meganav .nav-links .mobile-item:hover{
background: #3A3B3C;
}
.meganav .drop-menu li{
margin: 0;
}
.meganav .drop-menu li a{
border-radius: 5px;
font-size: 18px;
}
.meganav .mega-box{
position: static;
top: 65px;
opacity: 1;
visibility: visible;
padding: 0 20px;
max-height: 0px;
overflow: hidden;
transition: all 0.3s ease;
}
.meganav .mega-box .content{
box-shadow: none;
flex-direction: column;
padding: 20px 20px 0 20px;
}
.meganav .mega-box .content .row{
width: 100%;
margin-bottom: 15px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.meganav .mega-box .content .row:nth-child(1),
.meganav .mega-box .content .row:nth-child(2){
border-top: 0px;
}
.meganav .content .row .mega-links{
border-left: 0px;
padding-left: 15px;
}
.meganav .row .mega-links li{
margin: 0;
}
.meganav .content .row header{
font-size: 19px;
}
}
.meganav input{
display: none;
}
/*MEGA NAV CSS END */
/* LOGOS SLIDES START */
.logos-slide {
width: 100%;
clear: both;
background-color: #fff;
padding: 0px 8%;
}
.logos-slide .logos-slide-in {
margin: 0px auto;
}
.logos-slide .logos-slide-in .slider {
height:250px;
margin:auto;
position:relative;
width:100%;
display:grid;
place-items:center;
overflow:hidden;
}
.logos-slide .logos-slide-in .slide-tract {
display:flex;
width: calc(250px * 18);
animation: scroll 60s linear infinite;
}
.logos-slide .logos-slide-in .slide-tract:hover {
animation-play-state:paused;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 9));
-webkit-transform: translateX(calc(-250px * 9));
-moz-transform: translateX(-250px * 9);
transform: translateX(-250px * 9);
}
}
.logos-slide .logos-slide-in .slide {
height: 200px;
width:250px;
display:flex;
align-items:center;
padding:15px;
perspective: 100px;
}
.logos-slide .logos-slide-in img {
width: 100%;
transition: transform 1s;
}
.logos-slide .logos-slide-in img:hover {
transform: translateZ(20px);
}
.logos-slide .logos-slide-in .slider::before,
.slider::after {
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
content: '';
height:100%;
position:absolute;
width:15%;
z-index:2;
}
.logos-slide .logos-slide-in .slider::before {
left:0;
top:0;
}
.logos-slide .logos-slide-in .slider::after {
right:0;
top:0;
transform: rotateZ(180deg);
}
/*LOGOS SLIDES END*/
/*Vertical Tabs Start*/
.verticaltabscontainer{
width:100%;
padding: 40px 50px 40px 40px;
background: #fff;
margin: 0 20px;
}
.verticaltabscontainer .topic{
font-size: 30px;
font-weight: 500;
margin-bottom: 20px;
}
.verticaltabs{
display: flex;
/*align-items: center;
justify-content: space-between;*/
}
.verticaltabs .list{
display: flex;
flex-direction: column;
width: 100%;
margin-right: 50px;
position: relative;
}
.verticaltabs .list label{
height: 60px;
font-size: 18px;
font-weight: 500;
line-height: 60px;
cursor: pointer;
padding-left: 25px;
border-bottom: solid 1px #e7e7e7;
color: #333;
z-index: 12;
}
#verticaltabs001:checked ~ .list label.home,
#verticaltabs002:checked ~ .list label.blog,
#verticaltabs003:checked ~ .list label.help,
#verticaltabs004:checked ~ .list label.code,
#verticaltabs005:checked ~ .list label.about{
color: #fff;
}
.verticaltabs .list label:hover{
border-right: solid 4px #0003ff;
}
.verticaltabs .slider{
position: absolute;
left: 0;
top: 0;
height: 60px;
width: 100%;
border-radius: 0px;
border-right: solid 4px #0003ff;
transition: all 0.4s ease;
}
#verticaltabs001:checked ~ .list .slider{
top: 0;
}
#verticaltabs002:checked ~ .list .slider{
top: 60px;
}
#verticaltabs003:checked ~ .list .slider{
top: 120px;
}
#verticaltabs004:checked ~ .list .slider{
top: 180px;
}
#verticaltabs005:checked ~ .list .slider{
top: 240px;
}
.verticaltabs .text-content{
width: 100%;
height: 100%;
}
.verticaltabs .text{
display: none;
}
.verticaltabs .text .title{
font-size: 25px;
margin-bottom: 10px;
font-weight: 500;
}
.verticaltabs .text p{
text-align: justify;
}
.verticaltabs .text-content .home{
display: block;
}
#verticaltabs001:checked ~ .text-content .verticaltabs001,
#verticaltabs002:checked ~ .text-content .verticaltabs002,
#verticaltabs003:checked ~ .text-content .verticaltabs003,
#verticaltabs004:checked ~ .text-content .verticaltabs004,
#verticaltabs005:checked ~ .text-content .verticaltabs005{
display: block;
}
#verticaltabs002:checked ~ .text-content .verticaltabs001,
#verticaltabs003:checked ~ .text-content .verticaltabs001,
#verticaltabs004:checked ~ .text-content .verticaltabs001,
#verticaltabs005:checked ~ .text-content .verticaltabs001{
display: none;
}
.verticaltabs input{
display: none;
}
/* Vertical Tabs End */
/*POPUP CODE START */
.popupmodal01-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
visibility: hidden;
opacity: 0;
transition: opacity .2s ease-in-out, visibility 0s .2s;
z-index: 9999;
}
.popupmodal01-container {
position: relative;
margin: 0 auto;
color: #fff;
background: #219136;
border-radius: 8px;
text-align: center;
overflow-y: auto;
overflow-x: hidden;
max-height: 85vh;
box-sizing: border-box;
transform: translateY(30%);
transition: all .28s ease-in-out .15s;
}
.popupmodal01-btn {
display: inline-block;
color: #2879FF;
transition: all .2s ease-in-out;
padding: 10px;
}
.popupmodal01-btn,
.popupmodal01-btn-close {
text-align: center;
cursor: pointer;
user-select: none;
}
.popupmodal01-btn-close {
position: absolute;
top: 5%;
right: 5%;
color: #fff;
font-size: 60px;
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 20%;
transition: background-color .2s ease-in-out;
z-index: 1;
}
.popupmodal01-btn-close:hover {
background-color: hsla(0, 0%, 100%, .3);
}
.popupmodal01-btn:hover,
.popupmodal01-btn:active,
.popupmodal01-btn:focus {
color: #0055E2;
}
.popupmodal01-btn:active:hover,
.popupmodal01-btn:active:focus {
color: #000;
}
.popupmodal01-container::-webkit-scrollbar-track {
border-radius: 10px;
}
.popupmodal01-container::-webkit-scrollbar {
width: 8px;
border-radius: 10px;
background-color: hsla(0, 0%, 100%, .1);
}
.popupmodal01-container::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: hsla(0, 0%, 100%, .5);
}
@media only screen and (min-width: 576px) {
.popupmodal01-container {
width: 540px;
max-width: 100%;
}
}
.popupmodal01-wrapper button,
.popupmodal01-wrapper input {
font-family: inherit;
}
.email-field input {
display: block;
width: 100%;
outline: none;
}
form > div {
position: relative;
margin: 30px 0 15px;
display: flex;
}
.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
cursor: pointer;
opacity: .8;
}
.switcher {
display: none;
}
.switcher:checked+.popupmodal01-wrapper {
transition: visibility 0s, opacity .2s ease-in-out;
visibility: visible;
opacity: 1;
}
.switcher:checked+.popupmodal01-wrapper .popupmodal01-container {
transform: translateY(0);
opacity: 1;
}
@media only screen and (min-width: 320px) {
.popupmodal01-wrapper .popupmodal01-container {
padding: 20px;
}
.call { display:inline !important; position:fixed; z-index:999; bottom:78px; right:8px; width:50px; height:50px; float:right; }
.call img { width:100%;}
}
@media only screen and (min-width: 576px) {
.popupmodal01-wrapper .popupmodal01-container {
padding: 30px;
}
.call { display:inline !important; position:fixed; z-index:999; bottom:78px; right:8px; width:50px; height:50px; float:right; }
.call img { width:100%;}
}
@media only screen and (max-width: 576px) {
.popupmodal01-wrapper .popupmodal01-container {
max-width: 90vw;
}
}
/*POPUP CODE END*/
/*Pure CSS According Start */
.css-accordion {
max-width: 100%;
overflow: hidden;
font-family: "Quicksand", sans-serif;
background: #6C63B5;
}
.css-accordion__label,
.css-accordion__content {
padding: 14px 20px;
border-bottom:solid 1px #e7e7e7
}
.css-accordion__label {
display: block;
color: #ffffff;
font-weight: 500;
cursor: pointer;
position: relative;
transition: background 0.1s;
}
.css-accordion__label:hover {
background: rgba(0, 0, 0, 0.1);
}
.css-accordion__label::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
width: 12px;
height: 6px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
transition: transform 0.4s;
}
.css-accordion__content {
background: #ffffff;
line-height: 1.6;
font-size: 0.85em;
display: none;
}
.css-accordion__input {
display: none;
}
.css-accordion__input:checked ~ .css-accordion__content {
display: block;
}
.css-accordion__input:checked ~ .css-accordion__label::after {
transform: translateY(-50%) rotate(0.5turn);
}
/*Pure Css According End*/
/*Pure CSS Gallery Start */
.thumb {
max-height: 200px;
border: solid 2px #ccc;
margin:10px 10px;
}
.lightbox {
position: fixed;
z-index: 999;
height: 0;
width: 0;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 4%;
opacity: 0;
}
.lightbox:target {
outline: none;
width: 100%;
height: 100%;
opacity: 1 !important;
}
.lightbox:target img {
border: solid 4px white;
opacity: 1;
webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.light-btn {
color: #fafafa;
background-color: #333;
border: solid 3px white;
padding: 5px 15px;
border-radius: 1px;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
position: absolute;
top: 45%;
z-index: 99;
}
.light-btn:hover {
background-color: #111;
}
.btn-prev {
left: 7%;
}
.btn-next {
right: 7%;
}
.btn-close {
position: absolute;
right: 10%;
top: 10%;
color: #fff;
background-color:#00357B;
border:solid 2px white;
padding: 15px 18px;
border-radius: 1px;
text-decoration: none;
}
.btn-close:hover {
background-color: #0046A4;
color:#fff;
}
/*Pure CSS Gallery End */
.designby {
width: 100%;
padding: 20px 5px;
color: #000;
font-size: 14px;
}
.designby a {
font-size: 12px ;
color: #9792A9;
}
.designby a:hover {
color:#e7e7e7;
}
/*MEDIA QUERY START MAX 480 -------------------------------- */
@media screen and (max-width: 768px) {
.parallax-tirupathi {
/* The image used */
background-image: url("../images/parallax.jpg");
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding: 80px 0px;
}
.parallax-tirupathi h1 {
color: #fff;
font-size: 36px;
font-weight: 500;
line-height: 80px;
color: #fff;
}
.parallax-tirupathi h1 span {
color: #f0094a;
font-size: 46px;
font-weight: 600;
}
.call { display:inline !important; position:fixed; z-index:999; bottom:140px; right:8px; width:50px; height:50px; float:right; }
.call img { width:100%;}
.api-whatapp-chat-bottom { display:inline !important; position:fixed; z-index:999; bottom:8px; right:8px; width:50px; height:50px; float:right; }
.api-whatapp-chat-bottom img { width:100%;}
.web-whatapp-chat-bottom { display: none !important;}
}
/*
/*MEDIA QUERY START FROM 1025 and MAX 1200 START -------------------------------- */
@media (min-width: 1201px) {
.api-whatapp-chat-bottom { display:none !important;}
.web-whatapp-chat-bottom { display:inline !important; position:fixed; z-index:999; bottom:50px; right:50px; width:80px; height:80px; float:right; }
.web-whatapp-chat-bottom img { width:100%;}
}
.parallax-tirupathi {
/* The image used */
background-image: url("../images/parallax.jpg");
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding: 120px 0px;
}
.parallax-tirupathi h1 {
color: #fff;
font-size: 50px;
font-weight: 600;
line-height: 100px;
color: #fff;
}
.parallax-tirupathi h1 span {
color: #f0094a;
font-size: 70px;
font-weight: 700;
}
.registernow {
width: 80%;
margin: 1px auto;
border-radius: 10px;
padding: 2px 20px;
text-align: center;
}
.registernow h4 {
font-size: 30px;
line-height: 50px;
color: #FF3000;
}
.call-whatsapp {
color: #0e54ae;
font-size: 30px;
line-height: 60px;
text-align: center;
font-weight: 900;
margin-top: 20px;
}
.call-whatsapp a {
color: #0e54ae;
font-size: 30px;
line-height: 60px;
text-align: center;
font-weight: 900;
}
.call-whatsapp2 {
color: #0e54ae;
font-size: 20px;
line-height: 40px;
text-align: center;
font-weight: 500;
margin-top: 10px;
margin-bottom: 20px;
}
.call-whatsapp2 a {
color: #0e54ae;
font-size: 20px;
line-height: 40px;
text-align: center;
font-weight: 700;
}
/*PURE CSS SLIDE START */
#slide-layout {
width: 100%;
overflow: hidden;
clear: both;
}
#cssslide-01 {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s purecss-slider infinite;
}
#cssslide-01 figure {
margin: 0px;
padding: 0px;
}
#cssslide-01 figure img {
width: 20%;
float: left;
}
@keyframes purecss-slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
/*PURE CSS SLIDE END*/
/*BUTTONS CSS CODE START //////////////////// */
/* https://www.codehim.com/demo/candy-color-button-animation/ */
.button-center {
text-align: center;
width: 100%;
clear: both;
}
.button {
width:fit-content;
height: 45px;
color: #fff;
border-radius: 5px;
padding: 12px 32px;
font-family: lato,sans-serif;
font-size: 18px;
font-weight: 500;
background: 0 0;
cursor: pointer;
transition: all .3s ease;
position: relative;
display: inline-block;
box-shadow: inset 2px 2px 2px 0 rgb(255 255 255 / 50%), 7px 7px 20px 0 rgb(0 0 0 / 10%), 4px 4px 5px 0 rgb(0 0 0 / 10%);
outline: none;
margin: 10px 0px;
}
.custom-btn {
width:fit-content;
height: 45px;
color: #fff;
border-radius: 5px;
padding: 12px 32px;
font-family: lato,sans-serif;
font-size: 18px;
font-weight: 500;
background: 0 0;
cursor: pointer;
transition: all .3s ease;
position: relative;
display: inline-block;
box-shadow: inset 2px 2px 2px 0 rgb(255 255 255 / 50%), 7px 7px 20px 0 rgb(0 0 0 / 10%), 4px 4px 5px 0 rgb(0 0 0 / 10%);
outline: none;
margin: 10px 0px;
}
.btn-1 {
background:#060e83;
background:linear-gradient(0deg,rgba(6,14,131,1) 0%,rgba(12,25,180,1) 100%);
border:none
}
.btn-1:hover{
background:#0003ff;
background:linear-gradient(0deg,rgba(0,3,255,1) 0%,rgba(2,126,251,1) 100%)
}
.btn-2{
background:#6009f0;background:linear-gradient(0deg,rgba(96,9,240,1) 0%,rgba(129,5,240,1) 100%);
border:none
}
.btn-2:before{height:0%;width:2px}
.btn-2:hover{box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.4)}
.btn-3{background:#00acee;background:linear-gradient(0deg,rgba(0,172,238,1) 0%,rgba(2,126,251,1) 100%);width:130px;height:40px;line-height:42px;padding:0;border:none}
.btn-3 span{position:relative;display:block;width:100%;height:100%}
.btn-3:before,.btn-3:after{position:absolute;content:"";right:0;top:0;background:#027efb;transition:all .3s ease}
.btn-3:before{height:0%;width:2px}
.btn-3:after{width:0%;height:2px}
.btn-3:hover{background:0 0;box-shadow:none}
.btn-3:hover:before{height:100%}
.btn-3:hover:after{width:100%}
.btn-3 span:hover{color:#027efb}
.btn-3 span:before,
.btn-3 span:after{position:absolute;content:"";left:0;bottom:0;background:#027efb;transition:all .3s ease}
.btn-3 span:before{width:2px;height:0%}
.btn-3 span:after{width:0%;height:2px}
.btn-3 span:hover:before{height:100%}
.btn-3 span:hover:after{width:100%;}
.btn-3:hover { color: #060e83; }
.btn-5{width:130px;height:40px;line-height:42px;padding:0;border:none;background:#ff1b00;background:linear-gradient(0deg,rgba(255,27,0,1) 0%,rgba(251,75,2,1) 100%)}
.btn-5:hover{color:#f0094a;background:0 0;box-shadow:none}
.btn-5:before,.btn-5:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;transition:400ms ease all}.btn-5:after{right:inherit;top:inherit;left:0;bottom:0}
.btn-5:hover:before,
.btn-5:hover:after{width:100%;transition:800ms ease all}
.btn-9{border:none;transition:all .3s ease;overflow:hidden}
.btn-9:after{position:absolute;content:" ";z-index:-1;top:0;left:0;width:100%;height:100%;background-color:#1fd1f9;background-image:linear-gradient(315deg,#1fd1f9 0%,#b621fe 74%);transition:all .3s ease}
.btn-9:hover{background:0 0;box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3);color:#fff}
.btn-9:hover:after{-webkit-transform:scale(2) rotate(180deg);transform:scale(2) rotate(180deg);box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)}
.btn-10{background:#1609f0;background:linear-gradient(0deg,rgba(22,9,240,1) 0%,rgba(49,110,244,1) 100%);color:#fff;border:none;transition:all .3s ease;overflow:hidden}.btn-10:after{position:absolute;content:" ";top:0;left:0;z-index:-1;width:100%;height:100%;transition:all .3s ease;-webkit-transform:scale(.1);transform:scale(.1)}
.btn-10:hover{color:#fff;border:none;background:0 0}
.btn-10:hover:after{background:#0003ff;background:linear-gradient(0deg,rgba(2,126,251,1) 0%,rgba(0,3,255,1)100%);-webkit-transform:scale(1);transform:scale(1)}
.btn-12{position:relative;right:20px;bottom:20px;border:none;box-shadow:none;width:130px;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px}.btn-12 span{background:#00acee;background:linear-gradient(0deg,rgba(0,172,238,1) 0%,rgba(2,126,251,1) 100%);display:block;position:absolute;width:130px;height:40px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);border-radius:5px;margin:0;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s;transition:all .3s}.btn-12 span:nth-child(1){box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.btn-12 span:nth-child(2){-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.btn-12:hover span:nth-child(1){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}.btn-12:hover span:nth-child(2){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);color:transparent;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg)}
.btn-13{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3 0%,#03c8a8 74%);border:none;z-index:1}
.btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:5px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all .3s ease}.btn-13:hover{color:#fff}.btn-13:hover:after{top:0;height:100%}.btn-13:active{top:2px}
.btn-15{background:#b621fe;border:none;z-index:1}.btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#663dff;border-radius:5px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all .3s ease}.btn-15:hover{color:#fff}.btn-15:hover:after{left:0;width:100%}.btn-15:active{top:2px}
/*BUTTONS CSS CODE END //////////////////// */
/* LOGOS SLIDES START */
.logos-slide {
width: 100%;
clear: both;
background-color: #fff;
padding: 0px 8%;
}
.logos-slide .logos-slide-in {
margin: 0px auto;
}
.logos-slide .logos-slide-in .slider {
height:250px;
margin:auto;
position:relative;
width:100%;
display:grid;
place-items:center;
overflow:hidden;
}
.logos-slide .logos-slide-in .slide-tract {
display:flex;
width: calc(250px * 18);
animation: scroll 60s linear infinite;
}
.logos-slide .logos-slide-in .slide-tract:hover {
animation-play-state:paused;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 9));
-webkit-transform: translateX(calc(-250px * 9));
-moz-transform: translateX(-250px * 9);
transform: translateX(-250px * 9);
}
}
.logos-slide .logos-slide-in .slide {
height: 200px;
width:250px;
display:flex;
align-items:center;
padding:15px;
perspective: 100px;
}
.logos-slide .logos-slide-in img {
width: 100%;
transition: transform 1s;
}
.logos-slide .logos-slide-in img:hover {
transform: translateZ(20px);
}
.logos-slide .logos-slide-in .slider::before,
.slider::after {
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
content: '';
height:100%;
position:absolute;
width:15%;
z-index:2;
}
.logos-slide .logos-slide-in .slider::before {
left:0;
top:0;
}
.logos-slide .logos-slide-in .slider::after {
right:0;
top:0;
transform: rotateZ(180deg);
}
/*LOGOS SLIDES END*/
/*ABOUT US PAGE 01 CODE END */
.aboutus-01 {
clear: both;
width: 100%;
}
.aboutus-01 .aboutus-in {
width: 100%;
}
.aboutus-01 .aboutus-in .aboutus-section-01 {
width: 100%;
padding: 10px 8% 250px 8%;
display: grid;
grid-template-rows: auto;
grid-template-columns: 68% 28%;
gap: 4%;
background-image: url("../images/aboutuspage-01-bg.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(7,8,19,0.8);
}
.aboutus-01 .aboutus-in .aboutus-left {
margin: 0px;
width: 100%;
}
.aboutus-01 .aboutus-in .aboutus-right {
margin: 0px;
width: 100%;
}
.aboutus-01 .aboutus-in .aboutus-right img {
width: 100%;
overflow: hidden;
}
.aboutus-01 .aboutus-in .aboutus-right img .img {
width: 100%;
overflow: hidden;
}
.aboutus-01 .aboutus-in .aboutus-section-02 {
width: 100%;
margin-top: -250px;
padding: 10px 8% 10px 8%;
}
.aboutus-01 .aboutus-in .aboutus-section-02 .td03 {
width: 100%;
background-color: #fff;
text-align: center;
padding: 15px;
-webkit-box-shadow: 0 0 20px #e7e7e7;
box-shadow: 0 0 20px #e7e7e7;
}
.aboutus-01 .aboutus-in .aboutus-section-02 .td03 p {
font-size: 18px;
font-weight: 400;
line-height: 40px;
margin-top: 30px;
}
.aboutus-01 .p {
font-size: 18px;
font-weight: 400;
line-height: 40px;
margin-top: 10px; }
.aboutus-01 .p1 {
font-size: 22px;
font-weight: 400;
line-height: 40px;
margin-top: 30px; }
/*ABOUT US PAGE 01 END */
/*ABOUT US PAGE 01 CODE END */
.aboutus-02 {
clear: both;
width: 100%;
}
.aboutus-02 .aboutus-in {
width: 86%;
margin: 0px auto;
}
.aboutus-02 .aboutus-02-left {
width: 100%;
height: auto;
}
.aboutus-02 .aboutus-02-left .img01 {
width: 70%;
border-radius: 10px;
}
.aboutus-02 .aboutus-02-left .img01 img {
width: 100%;
border-radius: 10px;
}
.aboutus-02 .aboutus-02-left .img02 {
width: 70%;
right: 0;
float: right;
border-radius: 10px;
margin-top: -30%;
z-index: 9999;
}
.aboutus-02 .aboutus-02-left .img02 img {
width: 100%;
border-radius: 10px;
z-index: 99;
}
.aboutus-02 .aboutus-02-right {
width: 100%;
}
/*ABOUT US PAGE 01 CODE END */
.aboutus-01 {
clear: both;
width: 100%;
}
.aboutus-01 .aboutus-in {
width: 100%;
}
.aboutus-01 .aboutus-in .aboutus-section-01 {
width: 100%;
padding: 10px 8% 250px 8%;
display: grid;
grid-template-rows: auto;
grid-template-columns: 68% 28%;
gap: 4%;
background-image: url("../images/aboutuspage-01-bg.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(7,8,19,0.8);
}
.aboutus-01 .aboutus-in .aboutus-left {
margin: 0px;
width: 100%;
}
.aboutus-01 .aboutus-in .aboutus-right {
margin: 0px;
width: 100%;
}
.aboutus-01 .aboutus-in .aboutus-right img {
width: 100%;
overflow: hidden;
}
.aboutus-01 .aboutus-in .aboutus-right img .img {
width: 100%;
overflow: hidden;
}
.aboutus-01 .aboutus-in .aboutus-section-02 {
width: 100%;
margin-top: -250px;
padding: 10px 8% 10px 8%;
}
.aboutus-01 .aboutus-in .aboutus-section-02 .td03 {
width: 100%;
background-color: #fff;
text-align: center;
padding: 15px;
-webkit-box-shadow: 0 0 20px #e7e7e7;
box-shadow: 0 0 20px #e7e7e7;
}
.aboutus-01 .aboutus-in .aboutus-section-02 .td03 p {
font-size: 18px;
font-weight: 400;
line-height: 40px;
margin-top: 30px;
}
.aboutus-01 .p {
font-size: 18px;
font-weight: 400;
line-height: 40px;
margin-top: 10px; }
.aboutus-01 .p1 {
font-size: 22px;
font-weight: 400;
line-height: 40px;
margin-top: 30px; }
/*ABOUT US PAGE 01 END */
/*ABOUT US PAGE 02 CODE END */
.aboutus-02 {
clear: both;
width: 100%;
padding:4% 8%;
margin: 0px auto;
}
.aboutus-02 .aboutus-in {
width: 100%;
margin: 0px auto;
}
.aboutus-02 .aboutus-02-left {
width: 100%;
height: auto;
}
.aboutus-02 .aboutus-02-left .img01 {
width: 70%;
border-radius: 10px;
}
.aboutus-02 .aboutus-02-left .img01 img {
width: 100%;
border-radius: 10px;
}
.aboutus-02 .aboutus-02-left .img02 {
width: 70%;
right: 0;
float: right;
border-radius: 10px;
margin-top: -30%;
z-index: 9999;
}
.aboutus-02 .aboutus-02-left .img02 img {
width: 100%;
border-radius: 10px;
z-index: 99;
}
.aboutus-02 .aboutus-02-right {
width: 100%;
}
/*ABOUT US PAGE 02 CODE END */
/*ABOUT US PAGE 03 CODE START */
.aboutus-03 {
clear: both;
width: 100%;
}
.aboutus-03 .aboutus-in {
width: 86%;
margin: 0px auto;
}
/*CONTACT US START */
.contact {
width: 100%;
clear: both;
padding: 10px 12%;
}
.contact .contact-in {
width: 100%;
display: grid;
grid-template-columns: 50% 45%;
gap:5%
}
.contact .contact-in .contact-left {
width: 100%;
}
.contact .contact-in .contact-right {
width: 100%;
}
/* Style inputs with type="text", select elements and textareas */
.contact .contact-in input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
.contact .contact-in input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
.contact .contact-in input[type=submit]:hover {
background-color: #45a049;
}
.contact .contact-in h3 {
font-size: 30px;
line-height: 45px;
font-weight: 400;
}
.contact .contact-in h4 {
font-size: 26px;
line-height: 45px;
font-weight: 400;
}
.contact .contact-in h5 {
font-size: 20px;
line-height: 45px;
font-weight: 300;
}
/*CONTACT US END */
.contactpage-01 {
width: 100%;
padding: 10px 8%;
}
.contactpage-01 .contactpage01-in {
width: 100%;
}
.contactpage-02 {
width: 100%;
padding: 10px 8%;
}
.contactpage-02 .contactpage02-in {
width: 100%;
}
.contactpage-02 .contactpage02-in .contact02-box {
width: 90%;
margin: -90px auto 10px auto;
background: #fff;
z-index: 999;
padding:5%;
border-radius: 6px;
}
.contactpage-02 .contactpage02-in .contact02-box h5 {
font-size: 22px;
font-weight: 400;
}
.contactpage-02 .contactpage02-in .contact02-box p {
font-size: 18px;
}
.detailspage-01 {
width: 100%;
padding: 10px 8%;
}
.detailspage-01 .detailspage01-in {
width: 100%;
}
.detailspage-01 .detailspage01-in .top-img {
width: 100%;
border-radius: 30px;
overflow: hidden;
}
.detailspage-01 .detailspage01-in .top-img img {
width: 100%;
border-radius: 30px;
overflow: hidden;
}
.footer-01 {
width: 100%;
background-color: #0B071A;
padding: 40px 8%;
color: #fff;
}
.footer-01 .footer01-in {
width: 100%;
}
.footer-01 .footer01-in h5 {
font-size: 26px;
font-weight: 300;
line-height: 45px;
color: #ffff00;
}
.footer-01 .footer01-in .socialmedia {
width: 100%;
margin: 0px;
padding: 0px;
}
.footer-01 .footer01-in .socialmedia li {
list-style: none;
display: initial;
margin-right: 20px;
}
.footer-01 .footer01-in .socialmedia li a {
text-decoration: none;
color: #fff;
}
.footer-01 .footer01-in .quicklink {
width: 100%;
margin: 0px;
padding: 0px;
}
.footer-01 .footer01-in .quicklink li {
list-style: none;
padding: 20px;
border-bottom: solid 1px #362D58;
}
.footer-01 .footer01-in .quicklink li a {
text-decoration: none;
color: #fff;
}
.footer-01 .footer01-in .location {
width: 100%;
padding: 0px;
}
.footer-01 .footer01-in .location p {
color: #e7e7e7;
line-height: 26px;
font-size: 18px;
}
.footer01-copyrights {
width: 100%;
clear: both;
background-color: #000215;
color: #DAD6E7;
text-align: center;
}
.quotation-below-slide {
width: 100%;
clear: both;
background-color: #f2f2f2;
border-bottom: solid 1px #e7e7e7;
padding: 15px 8%;
text-align: center;
margin: 0px;
}
.quotation-below-slide h6 {
font-size: 30px;
line-height: 50px;
font-weight: 600;
color: #086AD8;
}
.quotation-below-slide p {
font-size: 20px;
line-height: 50px;
font-weight: 500;
color: #333;
}
/*MEDIA QUERY START MAX 480 -------------------------------- */
@media screen and (max-width: 360px) {
.tr01 { clear: both; width: 100%; margin: 5px auto; }
.tr01 .td01 { width: 100%; padding: 1%; }
.tr02 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; }
.tr02 .td02 { width: 100%; padding: 1%; }
.tr03 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; }
.tr03 .td03 { width: 100%; padding: 1%; }
.tr04 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; }
.tr04 .td04 { width: 100%; padding: 1%; }
.tr05 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; }
.tr05 .td05 { width: 100%; padding: 1%; }
.tr06 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; }
.tr06 .td06 { width: 100%; padding: 1%; }
.tr07 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; }
.tr07 .td07 { width: 100%; padding: 1%; }
.tr08 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; }
.tr09 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; }
.tr10 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49.5% 49.5%; gap: 1%; }
.tr10 .td11 { width: 100%; padding: 1%; }
.tr11 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49.5% 49.5%; gap: 1%; }
.tr11 .td11 { width: 100%; padding: 1%; }
.tr12 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49.5% 49.5%; gap: 1%; }
.tr12 .td12 { width: 100%; padding: 1%; }
/*COLUMNS CODE START ////////////////////////// */
.tr-25-50-25 { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 100%; gap: 0%; }
.tr-left60 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: .5%;}
.tr-left75 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: .5%; }
}
/*MEDIA QUERY ENDMAX 480 END -------------------------------- */
/*MEDIA QUERY START MAX 480 -------------------------------- */
@media screen and (min-width: 361px) and (max-width: 480px) {
.parallaxpadma {
/* The image used */
background-image: url("../images/parallax.jpg");
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding: 80px 0px;
}
.parallaxpadma h1 {
color: #fff;
font-size: 36px;
font-weight: 500;
line-height: 80px;
color: #fff;
}
.parallaxpadma h1 span {
color: #f0094a;
font-size: 46px;
font-weight: 600;
}
.call { display:inline !important; position:fixed; z-index:999; bottom:140px; right:8px; width:50px; height:50px; float:right; }
.call img { width:100%;}
.tr01 { clear: both; width: 100%; margin: 5px auto; }
.tr01 .td01 { width: 100%; padding: 1%; }
.tr02 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; }
.tr02 .td02 { width: 100%; padding: 1%; }
.tr03 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; }
.tr03 .td03 { width: 100%; padding: 1%; }
.tr04 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; }
.tr04 .td04 { width: 100%; padding: 1%; }
.tr05 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; }
.tr05 .td05 { width: 100%; padding: 1%; }
.tr06 { clear: both; width: 100%; margin: 5px auto; display: grid; grid-template-rows: auto; grid-template-columns: 100%; }
.tr06 .td06 { width: 100%; padding: 1%; }
.tr07 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0%; }
.tr07 .td07 { width: 100%; padding: 1%; }
.tr08 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49.5% 49.5%; gap: 1%; }
.tr08 .td11 { width: 100%; padding: 1%; }
.tr09 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 32.65% 32.65% 32.65%; gap: 1%; }
.tr09 .td09 { width: 100%; padding: 1%; }
.tr10 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49.5% 49.5%; gap: 1%; }
.tr10 .td11 { width: 100%; padding: 1%; }
.tr11 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 32.65% 32.65% 32.65%; gap: 1%; }
.tr11 .td11 { width: 100%; padding: 1%; }
.tr12 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 32.65% 32.65% 32.65%; gap: 1%; }
.tr12 .td12 { width: 100%; padding: 1%; }
/*COLUMNS CODE START ////////////////////////// */
.tr-25-50-25 { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 100%; gap: 0%; }
.tr-left60 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: .5%;}
.tr-left75 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; gap: .5%; }
}
/*MEDIA QUERY ENDMAX 480 END -------------------------------- */
/*MEDIA QUERY START FROM 481 and MAX 767 START -------------------------------- */
@media screen and (min-width: 481px) and (max-width: 767px) {
.tr02 { display: grid; grid-template-rows: auto; grid-template-columns: 49% 49%; gap: 2%; }
.tr03 { display: grid; grid-template-rows: auto; grid-template-columns: 33.3% 33.3% 33.3%; }
.tr04 { display: grid; grid-template-rows: auto auto; grid-template-columns: 50% 50%; }
.tr06 { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 33.3% 33.3% 33.3%; }
.tr08 { display: grid; grid-template-rows: auto auto auto auto; grid-template-columns: 50% 50%; }
.tr10 { display: grid; grid-template-rows: auto auto auto auto auto; grid-template-columns: 50% 50%; }
.tr12 { display: grid; grid-template-rows: auto auto auto; grid-template-columns: 50% 50%; }
.tr-left60 { display: grid; grid-template-rows: auto auto; grid-template-columns: 100%; }
}
/*MEDIA QUERY START FROM 481 and MAX 767 END -------------------------------- */
/*MEDIA QUERY START FROM 769 and MAX 1024 START -------------------------------- */
@media screen and (min-width: 768) and (max-width: 1024px) {
.call { position: fixed;
z-index: 999;
bottom: 157px;
right: 60px;
width: 72px;
height: 72px;
float: right; }
.call img { width:100%;}
/*COLUMNS CODE START ////////////////////////// */
.tr01 { clear: both; width: 100%; }
.tr01 .td01 { width: 100%; padding: 1%; }
.tr02 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49% 49%; gap: 2%; }
.tr02 .td02 { width: 100%; padding: 1%; }
.tr03 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 32.65% 32.65% 32.65%; gap: 1%; }
.tr03 .td03 { width: 100%; padding: 1%; }
.tr04 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 24.25% 24.25% 24.25% 24.25%; gap: 1%; }
.tr04 .td04 { width: 100%; padding: 1%; }
.tr05 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 19.2% 19.2% 19.2% 19.2% 19.2%; gap: 1%; }
.tr05 .td05 { width: 100%; padding: 1%; }
.tr06 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 16% 16% 16% 16% 16% 16%; gap: .80%; }
.tr06 .td06 { width: 100%; padding: 1%; }
.tr07 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 13.45% 13.45% 13.45% 13.45% 13.45% 13.45% 13.45%;
gap: .98%; }
.tr07 .td07 { width: 100%; padding: 1%; }
.tr08 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% ;
gap: 1%;
}
.tr08 .td08 { width: 100%; padding: 1%; }
.tr09 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% ;
gap: 1.01%;
}
.tr09 .td09 { width: 100%; padding: 1%; }
.tr10 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% ; gap: 1%; }
.tr10 .td10 { width: 100%; padding: 1%; }
.tr11 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% ; gap: 1%; }
.tr11 .td11 { width: 100%; padding: 1%; }
.tr12 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% ; gap: 1%; }
.tr12 .td12 { width: 100%; padding: 1%; }
.tr-left25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 74%; gap: 1%; }
.tr-left30 { clear: both; width: 100%; display: grid; grid-template-columns: 30% 69%; gap: 1%; }
.tr-left60 { clear: both; width: 100%; display: grid; grid-template-columns: 60% 39%; gap: 1%; }
.tr-left70 { clear: both; width: 100%; display: grid; grid-template-columns: 69% 30%; gap: 1%; }
.tr-left75 { clear: both; width: 100%; display: grid; grid-template-columns: 74% 25%; gap: 1%; }
.tr-25-50-25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 48% 25%; gap: 1%; }
/*COLUMNS CODE END ////////////////////////// */
}
/*MEDIA QUERY START FROM 769 and MAX 1024 END -------------------------------- */
/*MEDIA QUERY START FROM 1025 and MAX 1200 START -------------------------------- */
@media (min-width: 1024px) and (max-width: 1200px) {
.call { position: fixed;
z-index: 999;
bottom: 157px;
right: 60px;
width: 72px;
height: 72px;
float: right; }
.call img { width:100%;}
/*COLUMNS CODE START ////////////////////////// */
.tr01 { clear: both; width: 100%; }
.tr01 .td01 { width: 100%; padding: 1%; }
.tr02 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49.5% 49.5%; gap: 1%; }
.tr02 .td02 { width: 100%; padding: 1%; }
.tr03 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 32.65% 32.65% 32.65%; gap: 1%; }
.tr03 .td03 { width: 100%; padding: 1%; }
.tr04 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 24.25% 24.25% 24.25% 24.25%; gap: 1%; }
.tr04 .td04 { width: 100%; padding: 1%; }
.tr05 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 19.2% 19.2% 19.2% 19.2% 19.2%; gap: 1%; }
.tr05 .td05 { width: 100%; padding: 1%; }
.tr06 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 16% 16% 16% 16% 16% 16%; gap: .80%; }
.tr06 .td06 { width: 100%; padding: 1%; }
.tr07 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 13.45% 13.45% 13.45% 13.45% 13.45% 13.45% 13.45%;
gap: .98%; }
.tr07 .td07 { width: 100%; padding: 1%; }
.tr08 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% ;
gap: 1%;
}
.tr08 .td08 { width: 100%; padding: 1%; }
.tr09 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% ;
gap: 1.01%;
}
.tr09 .td09 { width: 100%; padding: 1%; }
.tr10 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% ; gap: 1%; }
.tr10 .td10 { width: 100%; padding: 1%; }
.tr11 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% ; gap: 1%; }
.tr11 .td11 { width: 100%; padding: 1%; }
.tr12 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% ; gap: 1%; }
.tr12 .td12 { width: 100%; padding: 1%; }
.tr-left25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 74%; gap: 1%; }
.tr-left30 { clear: both; width: 100%; display: grid; grid-template-columns: 30% 69%; gap: 1%; }
.tr-left60 { clear: both; width: 100%; display: grid; grid-template-columns: 60% 39%; gap: 1%; }
.tr-left70 { clear: both; width: 100%; display: grid; grid-template-columns: 69% 30%; gap: 1%; }
.tr-left75 { clear: both; width: 100%; display: grid; grid-template-columns: 74% 25%; gap: 1%; }
.tr-25-50-25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 48% 25%; gap: 1%; }
}
/*MEDIA QUERY START FROM 1025 and MAX 1200 END -------------------------------- */
/*MEDIA QUERY START FROM 1025 and MAX 1200 START -------------------------------- */
@media (min-width: 1201px) {
.call { position: fixed;
z-index: 999;
bottom: 157px;
right: 60px;
width: 72px;
height: 72px;
float: right; }
.call img { width:100%;}
/*COLUMNS CODE START ////////////////////////// */
.tr01 { clear: both; width: 100%; }
.tr01 .td01 { width: 100%; padding: 1%; }
.tr02 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 49.5% 49.5%; gap: 1%; }
.tr02 .td02 { width: 100%; padding: 1%; }
.tr03 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 32.65% 32.65% 32.65%; gap: 1%; }
.tr03 .td03 { width: 100%; padding: 1%; }
.tr04 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 24.25% 24.25% 24.25% 24.25%; gap: 1%; }
.tr04 .td04 { width: 100%; padding: 1%; }
.tr05 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 19.2% 19.2% 19.2% 19.2% 19.2%; gap: 1%; }
.tr05 .td05 { width: 100%; padding: 1%; }
.tr06 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 16% 16% 16% 16% 16% 16%; gap: .80%; }
.tr06 .td06 { width: 100%; padding: 1%; }
.tr07 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 13.45% 13.45% 13.45% 13.45% 13.45% 13.45% 13.45%;
gap: .98%; }
.tr07 .td07 { width: 100%; padding: 1%; }
.tr08 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% 11.62% ;
gap: 1%;
}
.tr08 .td08 { width: 100%; padding: 1%; }
.tr09 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% 10.21% ;
gap: 1.01%;
}
.tr09 .td09 { width: 100%; padding: 1%; }
.tr10 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% 9.1% ; gap: 1%; }
.tr10 .td10 { width: 100%; padding: 1%; }
.tr11 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% 8.18% ; gap: 1%; }
.tr11 .td11 { width: 100%; padding: 1%; }
.tr12 { clear: both; width: 100%; display: grid; grid-template-rows: auto;
grid-template-columns: 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% 7.42% ; gap: 1%; }
.tr12 .td12 { width: 100%; padding: 1%; }
.tr-left25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 74%; gap: 1%; }
.tr-left30 { clear: both; width: 100%; display: grid; grid-template-columns: 30% 69%; gap: 1%; }
.tr-left60 { clear: both; width: 100%; display: grid; grid-template-columns: 60% 39%; gap: 1%; }
.tr-left70 { clear: both; width: 100%; display: grid; grid-template-columns: 69% 30%; gap: 1%; }
.tr-left75 { clear: both; width: 100%; display: grid; grid-template-columns: 74% 25%; gap: 1%; }
.tr-25-50-25 { clear: both; width: 100%; display: grid; grid-template-columns: 25% 48% 25%; gap: 1%; }
/*COLUMNS CODE END ////////////////////////// */
}
/*MEDIA QUERY START FROM 1201 Large -------------------------------- */
/* responsive devices
320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV.
*/
/*MEDIA QUERY START MAX 480 -------------------------------- */
@media screen and (max-width: 480px) {
.parallaxpadma {
/* The image used */
background-image: url("../images/parallax.jpg");
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
padding: 50px 0px;
}
.parallaxpadma h1 {
font-size: 30px;
font-weight: 500;
line-height: 60px;
color: #fff;
}
.parallaxpadma h1 span {
color: #f0094a;
font-size: 40px;
font-weight: 500;
line-height: 60px;
}
.call { display:inline !important; position:fixed; z-index:999; bottom:78px; right:8px; width:50px; height:50px; float:right; }
.call img { width:100%;}
.page-title-01 h2 {
font-size: 24px;
font-weight: 500;
line-height: 40px;
}
.list-normal {
width: 100%;
margin: 0px 0px 4px 0px;
padding: 0px;
}
.list-normal li {
font-size: 18px;
line-height: 55px;
}
/*FOOTER START*/
.footer {
padding: 20px 8%;
}
.footer .footer-in h5 {
font-size: 20px;
font-weight: 300;
line-height: 40px;
}
.footer .footer-in .quicklink li {
padding: 10px;
}
.footer .footer-in .location p {
line-height: 16px;
font-size: 16px;
}
.footer-copyrights {
padding: 5px 0px 20px 0px;
}
.homepagelayout {
width: 100%;
padding: 16px 4% 20px 4%;
}
.page-layout { width: 100%; padding: 20px 3% 20px 2%; }
.pagelayout { width: 100%; padding: 15px 3% 20px 3%; }
.patalu-pagelayout { width: 100%; padding: 15px 3% 30px 3%; }
.left-center { text-align: center; }
.left-right { text-align: right; }
.right-center { text-align: center; }
.right-left { text-align: left; }
.center-left { text-align: left; }
.center-right { text-align: right; }
.ads {
width: 100%;
margin: 20px 0px;
}
.page-title-02 {
padding: 80px 2px 20px 2px;
}
.page-title-02 h2 {
font-size: 26px;
line-height: 40px;
}
.sectiontitle-03 h3 {
font-size: 26px;
line-height: 40px;
}
.parallax .parallax-in h2 {
font-size: 32px;
line-height: 62px;
}
.parallax .parallax-in h2 span {
font-size: 28px;
line-height: 50px;
}
.footer {
width: 100%;
background-color: #0B071A;
padding: 10px 2%;
color: #fff;
text-align: center;
}
.footer .footer-in {
width: 100%;
}
.css-accordion__label {
font-size: 18px;
padding: 10px 8px;
font-weight: 500;
}
.clear0-10 { clear: both; height: 10px; }
.clear0-20 { clear: both; height: 20px; }
.clear0-30 { clear: both; height: 30px; }
.clear0-40 { clear: both; height: 40px; }
.clear0-50 { clear: both; height: 50px; }
.clear0-60 { clear: both; height: 60px; }
.clear0-70 { clear: both; height: 70px; }
.clear0-80 { clear: both; height: 80px; }
.clear0-90 { clear: both; height: 90px; }
.clear0-100 { clear: both; height: 100px; }
.clear10-0 { clear: both; height: 0px; }
.clear20-0 { clear: both; height: 0px; }
.clear30-0 { clear: both; height: 0px; }
.clear40-0 { clear: both; height: 0px; }
.clear50-0 { clear: both; height: 0px; }
.clear60-0 { clear: both; height: 0px; }
.clear70-0 { clear: both; height: 0px; }
.clear80-0 { clear: both; height: 0px; }
.clear90-0 { clear: both; height: 0px; }
.clear100-0 { clear: both; height: 0px; }
.clear60-20 { clear: both; height: 20px; }
.hide-display {
display:none ;
}
.youtube {
width: 100%;
height: fit-content;
}
.youtube iframe {
width: 100%;
min-height: 220px;
}
}
/*
/*MEDIA QUERY ENDMAX 480 END -------------------------------- */
/*MEDIA QUERY START FROM 481 and MAX 767 START -------------------------------- */
@media screen and (min-width: 481px) and (max-width: 768px) {
.sectiontitle-04 {
color: #333333;
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
.sectiontitle-04 span {
color: #086AD8;
}
.sectiontitle-04 h3 {
display: block;
font-size: 35px;
line-height: 70px;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
.page-layout { width: 100%; padding: 6px 3%; }
.pagelayout { width: 100%; padding: 6px 3%; }
.sectiontitle-04 h3 {
display: block;
font-size: 30;
line-height: 60px;
}
}
/*MEDIA QUERY START FROM 481 and MAX 767 END -------------------------------- */
/*MEDIA QUERY START FROM 769 and MAX 1024 START -------------------------------- */
@media screen and (min-width: 769) and (max-width: 1024px) {
.parallax .parallax-in h2 span {
font-size: 30px;
line-height: 60px;
}
.sectiontitle-04 {
color: #333333;
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
.sectiontitle-04 span {
color: #086AD8;
}
.sectiontitle-04 h3 {
font-size: 22px;
line-height: 42px;
}
}
/*MEDIA QUERY START FROM 769 and MAX 1024 END -------------------------------- */
/*MEDIA QUERY START FROM 1025 and MAX 1200 START -------------------------------- */
@media (min-width: 1025px) and (max-width: 1200px) {
.parallax .parallax-in h2 span {
font-size: 30px;
line-height: 60px;
}
.sectiontitle-04 h3 {
font-size: 26px;
line-height: 48px;
}
}
/*MEDIA QUERY START FROM 1025 and MAX 1200 END -------------------------------- */
/*MEDIA QUERY START FROM 1025 and MAX 1200 START -------------------------------- */
@media (min-width: 1201px) {
.sectiontitle-04 {
color: #333333;
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
.sectiontitle-04 span {
color: #086AD8;
}
.sectiontitle-04 h3 {
display: block;
font-size: 35px;
line-height: 70px;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
.parallax .parallax-in h2 span {
font-size: 30px;
line-height: 60px;
}
.tr02 { clear: both; width: 100%; display: grid; grid-template-rows: auto; grid-template-columns: 50% 50%; gap:0%; }
.tr02 .td02 { width: 100%;padding: 1%; }
}
.width100 {
width: 100%;
}
.parallaxbottom {
/* The image used */
background-image: url("../images/parallaxbottom.jpg");
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 60px 0px;
}
.parallaxbottom h3 {
font-size: 30px;
font-weight: 600;
text-align: center;
color: #ffff00;
}
.parallaxbottom .parallaxbottom-in {
display: grid;
grid-template-rows: auto;
grid-template-columns: 24% 24% 24% 24%;
gap: 1%;
}
.parallaxbottom .parallaxbottom-in ul {
margin: 0px;
padding: 1px 4%;
}
.parallaxbottom .parallaxbottom-in ul li {
list-style: none;
display: inline-block;
line-height: 40px;
color: #fff;
}
/*MEDIA QUERY START FROM 1201 Large -------------------------------- */
/* responsive devices
320px — 480px: Mobile devices.
481px — 768px: iPads, Tablets.
769px — 1024px: Small screens, laptops.
1025px — 1200px: Desktops, large screens.
1201px and more — Extra large screens, TV.
*/