/* this style was generated by UI/UX developer Mr.Sagar Surendhrababu - www.sagarts.com */
@import 'header.css';
@import 'featuredBox.css';
@import 'featuredSubBox.css';
@import 'services.css';
@import 'featuredGames.css';
@import 'technologies.css';
@import 'runningProject.css';
@import 'whyChoose.css';
@import 'portfolio.css';
@import 'testimonials.css';
@import 'blogs.css';
@import 'gallery.css';
@import 'subFooter.css';
@import 'footer.css';
@import 'contact.css';
@import 'body.css';
@import 'quickForm.css';

/* //////////////////////////Basics foundation////////////////////////////////////////// */
*{padding: 0; margin: 0; box-sizing: border-box; list-style: none; text-decoration: none;}


/* //////////////////////////project fonts control zone////////////////////////////////////////// */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root{
    --c1:#25B2E7;
    --c2:#525050;
    --c3:#1BCACD;
    --c4:#4A5E80;
    --c5:#ffffff;
    --c6:#13242E;
    --c7:#EFEFEF;

    --f1:'Roboto', sans-serif;
    --f2:"Poppins";
    --f3:"Ubuntu";
}

html{font-family: 'Roboto', sans-serif; scroll-behavior: smooth; overflow-x: hidden; }
body{position: relative;}
#container{width: 100%; }
.canvas{width:86rem; height: auto;}
.wrapper{width:79rem; height: auto;} 
/* //////////////////////////////////////////////////////////////form style//////////////////////////////////// */
input,select,textarea{height: 3.2rem; width: 100%; font-family: var(--f1); color: var(--c2); padding: 0 1rem; border-radius: .5rem;}
  

/* //////////////////////////////////////////////////////////////Color & Weight//////////////////////////////////// */
.c1t{color:var(--c1);}
.c2t{color:var(--c2);}
.c3t{color:var(--c3);}
.c4t{color:var(--c4);}
.c5t{color:var(--c5);}
.c6t{color:var(--c6);}
.c7t{color:var(--c7);}

.c1b{background-color:var(--c1);}
.c2b{background-color:var(--c2);}
.c3b{background-color:var(--c3);}
.c4b{background-color:var(--c4);}
.c5b{background-color:var(--c5);}
.c6b{background-color:var(--c6);}
.c7b{background-color:var(--c7);}

.lf{font-weight: 200;}
.mf{font-weight: 400;}
.bf{font-weight: 600;}

.i{font-style: italic!important;}

.br{border-radius: 1rem;}
.br2{border-radius: 2rem;}

/* //////////////////////////////////////////////////////////////colum style//////////////////////////////////// */
.col1{width: 8.3%; float: left;}
.col2{width: 16.6%; float: left;}
.col3{width: 25%; float: left;}
.col4{width: 33.3%; float: left;}
.col5{width: 41.6%; float: left;}
.col6{width: 50%; float: left;}
.col7{width: 58.3%; float: left;}
.col8{width: 66.6%; float: left;}
.col9{width: 75%; float: left;}
.col10{width: 83.3%; float: left;}
.col11{width: 91.6%; float: left;}
.col12{width: 100%; float: left;} 

/* ///////////////////////////////////////////Headline Setups for Common/////////////////////////////////////// */
.dTxt{font-size: 3.6rem!important}
h1 {font-size: 3rem; line-height: 3.4rem;}
h2 {font-size: 3.1rem; line-height: 3.5rem;}
h3 {font-size: 2.6rem; line-height: 3rem;}
h4 {font-size: 1.8rem; line-height: 2.2rem;}
h5 {font-size: 1.3rem; line-height: 1.7rem;}
h6 {font-size: 1rem; line-height: 1.4rem;}
p {font-size: 1rem; font-weight:normal; line-height: 1.6rem;}
a {font-size: 1rem; font-weight:normal; display: block;}
.sT{font-size: 0.8rem; line-height: 1.2rem;}
.xT{font-size: 0.7rem; line-height: 1.1rem;}

/* ///////////////////////////////////////////Padding Setups for Common/////////////////////////////////////// */
.pa{padding: 1rem;}
.pa2{padding: 2rem;}
.pa4{padding: 4rem;}
.pa8{padding: 8rem;}
.pt{padding-top: 1rem;}
.pt2{padding-top: 2rem;}
.pt4{padding-top: 4rem;}
.pt8{padding-top: 8rem;}
.pr{padding-right: 1rem;}
.pr2{padding-right: 2rem;}
.pb{padding-bottom: 1rem;}
.pb2{padding-bottom: 2rem;}
.pb4{padding-bottom: 4rem;}
.pb8{padding-bottom: 8rem;}
.pl{padding-left: 1rem;}
.pl2{padding-left: 2rem;}
.pl4{padding-left: 4rem;}
.prl{padding:0 1rem;}
.prl2{padding:0 2rem;}
.ptb{padding:1rem 0;}

/* ///////////////////////////////////////////Margin Setups for Common/////////////////////////////////////// */
.ma{margin: 1rem;}
.ma2{margin: 2rem;}
.mt{margin-top: 1rem;}
.mt2{margin-top: 2rem;}
.mt4{margin-top: 4rem;}
.mt8{margin-top: 8rem;}
.mr{margin-right: 1rem;}
.mr2{margin-right: 2rem;}
.mb{margin-bottom: 1rem;}
.mb2{margin-bottom: 2rem;}
.mb4{margin-bottom: 4rem;}
.mb8{margin-bottom: 8rem;}
.ml{margin-left: 1rem;}
.mrl{margin:0 1rem;}
.mr8{margin:0 8rem;}
.mtb{margin:1rem 0;}
/* ///////////////////////////////////////////Aligment/////////////////////////////////////// */
.tar{text-align: right;}
.tal{text-align: left;}
.taj{text-align:justify;}
.tac{text-align: center;}

.fl{float: left;}
.fr{float: right;}

.por{position: relative;}

/* ///////////////////////////////////////////hover/////////////////////////////////////// */


/* ///////////////////////////////////////////Flex/////////////////////////////////////// */

.flex{display: flex;}
.flexDC{display: flex; flex-direction: column;}
.flexDCC{display: flex; flex-direction: column; align-items: center; justify-content: center;}
.flexDCL{display: flex; flex-direction: column; align-items:flex-start; justify-content:center;}
.flexDCR{display: flex; flex-direction: column; align-items:flex-end; justify-content: center;}

.flexC{display: flex; justify-content: center;}
.flexL{display: flex; justify-content: left;}
.flexR{display: flex; justify-content: right;}

.flexCC{display: flex; justify-content: center; align-items: center;}
.flexLC{display: flex; justify-content: left; align-items: center;}
.flexRC{display: flex; justify-content: right; align-items: center;}

/* ///////////////////////////////////////////Drop Shadow/////////////////////////////////////// */
.shadow1{box-shadow: 0 3px 3px rgba(0,0,0,.5);}
.shadow2{box-shadow: 0 3px 3px rgba(0,0,0,.2);}

/* ///////////////////////////////////////////Radius Corner/////////////////////////////////////// */
.bc{border-radius: 1rem;}

/* //////////////////////////////////////////////////////////////Button style//////////////////////////////////// */
.btn0{display: inline-flex; cursor: pointer; font-size: .9rem!important; justify-content: center; align-items: center; font-family:var(--pFont);}
.btn1{padding: 1.5rem 2rem; cursor: pointer; display: inline-flex; font-size: 1rem!important; justify-content: center; align-items: center; font-family:var(--pFont); border-radius: 2rem; }
.btn2{padding: 1rem 1.5rem; cursor: pointer; display: inline-flex; font-size:.85rem!important; justify-content: center; align-items: center; font-family:var(--pFont); border-radius: 2rem;}
.btn3{padding: .75rem 1.8rem; cursor: pointer; display: inline-flex; font-size: .9rem!important; justify-content: center; align-items: center; font-family:var(--pFont); border-radius: .8rem; }

.btn0 span,.btn1 span, .btn2 span, .btn3 span {display: inline-block;position: relative;transition: 0.5s;}
.btn0 span:after,.btn1 span:after, .btn2 span:after, .btn3 span:after { content: '\00bb'; font-size: 1.5rem; position: absolute;opacity: 0;top: -0.5rem;right: -20px;transition: 0.5s;}
.btn0:hover span ,.btn1:hover span , .btn2:hover span , .btn3:hover span {padding-right: 25px;}
.btn0:hover span:after, .btn1:hover span:after, .btn2:hover span:after, .btn3:hover span:after {opacity: 1;right: 0;}


/* ////////////////////////////////////////////Responsive Magic //////////////////////////////////////////////// */
/* Big Screen view port */
@media screen and (min-width: 1401px) {
    #container{width: 100%;}
    html{font-size: 16px;}
    p {font-size: 1rem;}      
}
/* PC device view port */
@media screen and (max-width: 1400px) {
    #container{width: 100%;}
    html{font-size: 14px;} 
    p {font-size: 1rem;}  
    .canvas{width:90%; height: auto;}
    .wrapper{width:90%; height: auto;}            
}
/* Laptop view port */
@media screen and (max-width: 900px) {
    #container{width: 100%;}
    html{font-size: 12px;}
    p {font-size: 1rem;}  
    .canvas{width:90%; height: auto;}
    .wrapper{width:90%; height: auto;}                 
    /* colum settings */
    .md1{width: 12.5%; float: left;}
    .md2{width: 25%; float: left;}
    .md3{width: 37.5%; float: left;}
    .md4{width: 50%; float: left;}
    .md5{width: 62.5%; float: left;}
    .md6{width: 75%; float: left;}
    .md7{width: 87.5%; float: left;}
    .md8{width: 100%; float: left;}  
    /* ///////////////////////////////////////////Margin Setups for Common/////////////////////////////////////// */
    .ma{margin: .5rem;}
    .ma2{margin: 1rem;}
    .mt{margin-top: .5rem;}
    .mt2{margin-top: 1rem;}
    .mt4{margin-top: 2rem;}
    .mt8{margin-top: 4rem;}
    .mr{margin-right: .5rem;}
    .mb{margin-bottom: .5rem;}
    .mb2{margin-bottom: 1rem;}
    .mb4{margin-bottom: 2rem;}
    .mb8{margin-bottom: 4rem;}
    .ml{margin-left: .5rem;}
    .mrl{margin:0 .5rem;}
    .mr8{margin:0 4rem;}
    .mtb{margin:.5rem 0;}     

}  
/* Mobile view port */      
@media screen and (max-width: 598px) {
    #container{width: 100%;}
    body{overflow: hidden;}
    html{font-size: 12px;}
    p {font-size: 1rem;}  
    .canvas{width:100%; height: auto;}
    .wrapper{width:90%; height: auto; margin: 0 auto;}  
    .btn2{padding: .8rem 1rem; display: inline-flex; font-size:.75rem!important; justify-content: center; align-items: center; font-family:var(--pFont); border-radius: 1rem;}   
    /* colum settings */ 
    .sm1{width: 25%; float: left;}
    .sm2{width: 50%; float: left;}
    .sm3{width: 75%; float: left;}
    .sm4{width: 100%; float: left; }
    /* ///////////////////////////////////////////Margin Setups for Common/////////////////////////////////////// */
    .ma{margin: .5rem;}
    .ma2{margin: 1rem;}
    .mt{margin-top: .5rem;}
    .mt2{margin-top: 1rem;}
    .mt4{margin-top: 2rem;}
    .mt8{margin-top: 4rem;}
    .mr{margin-right: .5rem;}
    .mb{margin-bottom: .5rem;}
    .mb2{margin-bottom: 1rem;}
    .mb4{margin-bottom: 2rem;}
    .mb8{margin-bottom: 4rem;}
    .ml{margin-left: .5rem;}
    .mrl{margin:0 .5rem;}
    .mr8{margin:0 4rem;}
    .mtb{margin:.5rem 0;}    
}