/* font-family: 'Kanit', sans-serif; font-family: 'Roboto', sans-serif; */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;700&family=Roboto:wght@400;700&display=swap'); *{ margin: 0px; padding: 0px; } .fixit { position: fixed; top: 0px; } img{ border:0px; } a{-webkit-transition: 300ms linear 0s; -moz-transition: 300ms linear 0s; -o-transition: 300ms linear 0s; transition: 300ms linear 0s; outline: 0 none; text-decoration: none; } ul{ padding: 0px; margin: 0px; list-style: none; } /*The reason for this is to prevent "centering jumps" when navigating back and forth between pages with enough content to have a vertical scroll bar and pages that do not.*/ html { overflow-y: scroll; } /*centering jump ends*/ html { -webkit-font-smoothing: subpixel-antialiased; -webkit-text-stroke:1px transparent; } /*content wrapper for fade effect starts*/ #content-wrapper{ display:none; } /*content wrapper for fade effect ends*/ /*XMAS BODY REMOVE AFTER XMAS*/ body{margin: 0; padding: 0px; font-family:'DIN Next W01 Medium'; text-align: center; -webkit-text-size-adjust: 100%; /* change below to fixed or scroll*/ text-rendering: optimizeLegibility; background-color: #F8F7FC; width: 100%;} /*Master Container Starts*/ #master-container { width: 1200px; margin-right: auto; margin-left: auto; overflow: hidden; text-align: left;/*this overrights ie5 text align box model error*/ -webkit-font-smoothing: subpixel-antialiased; text-rendering: geometricPrecision; background-color: #F8F7FC; border-bottom: 5px solid #EB71AE; padding: 0px 25px; } /*Master Container Ends*/ /*CTA STARTS*/ /* Shake animation keyframes - 2 seconds shake, 5 seconds pause */ @keyframes shake-attention { 0% { transform: translateY(-50%) rotate(0deg); } 2%, 6%, 10%, 14%, 18%, 22%, 26% { transform: translateY(-50%) rotate(-2deg); } 4%, 8%, 12%, 16%, 20%, 24% { transform: translateY(-50%) rotate(2deg); } 28.5%, 100% { transform: translateY(-50%) rotate(0deg); } } .side-cta { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 9999; animation: shake-attention 7s ease-in-out infinite; } .side-cta a { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #E3177A; color: #ffffff; text-decoration: none; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); padding: 28px 16px; border-radius: 8px 0 0 8px; box-shadow: -3px 0 10px rgba(0,0,0,0.25); gap: 14px; transition: background-color 0.3s ease; } .side-cta a:hover { background-color: #a44fa9; } .side-cta__label { font-family: Arial, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; } .side-cta__number { font-family: Arial, sans-serif; font-size: 30px; font-weight: 900; letter-spacing: 2px; white-space: nowrap; } /*CTA ENDS*/ /******************************************************************************************************/ /*MAIN HOME PAGE SERVICES STARTS*/ .hprdshold{float: left; width: 1200px; margin-bottom: 60px;} /*MAIN HOME PAGE SERVICES LEFT STARTS*/ .hprdshd-left{float: left; width: 585px;} /*IPLAYER CONTENT STARTS*/ .top-bottom{float: left; width: 585px; border-radius: 12px; background: #FFF; margin-bottom: 20px; box-shadow: 0 8px 6px -6px #ccc;} .top-bottom-text{float: left; display: flex; padding: 48px;} .top-bottom-text h3{color: #050506; font-family: 'Kanit', sans-serif; font-size: 32px; font-style: normal; font-weight: 400; line-height: 120%; /* 38.4px */} /*IPLAYER CONTENT STARTS*/ /******************************************************************************************************/ /*HOME PAGE ROWS CONTENT STARTS*/ .rowbuts{float: left; display: block; width: 585px; margin-bottom: 25px; color: #050506; font-family: 'Kanit', sans-serif; font-size: 20px; font-style: normal; font-weight: 400; line-height: 130%; /* 26px */} .rowbutsimg{display: block; margin-bottom: 10px;} /*HOME PAGE ROWS BUTTONS START*/ .rbleft-two{ float: left; width: 230px; display: block; padding: 24px; background: #FFF; border-radius: 12px; box-shadow: 0 8px 6px -6px #ccc;} .rbright-two{float: right; width: 230px; display: block; padding: 24px; background: #FFF; border-radius: 12px; box-shadow: 0 8px 6px -6px #ccc;} .rbut-one{float: left; width: 532px; display: block; padding: 24px; background: #FFF; border-radius: 12px; box-shadow: 0 8px 6px -6px #ccc;} #one-butt-pad{padding: 32px 24px;} /******************************************************************************************************/ /*INSIDE PAGE ROWS CONTENT STARTS*/ .butstrips{float: left; display: block; width: 1200px; margin-bottom: 45px;} .isrowbuts{float: left; display: block; width: 1200px; margin-bottom: 25px; color: #050506; font-family: 'Kanit', sans-serif; font-size: 20px; font-style: normal; font-weight: 400; line-height: 130%; /* 26px */} .isrowbuts-left{ float: left; width: 230px; display: block; padding: 24px; background: #FFF; border-radius: 12px; margin-right: 29px; box-shadow: 0 8px 6px -6px #ccc;} .isrowbuts-right{float: right; width: 230px; display: block; padding: 24px; background: #FFF; border-radius: 12px; box-shadow: 0 8px 6px -6px #ccc;} .rowbuts-strapline{float: left; display: block; width: 1200px; text-align: center; margin: 30px 0px 50px 0px; color: #050506; font-family: 'Kanit', sans-serif; font-size: 47px; font-style: normal; font-weight: 700;} /*HOME PAGE ROWS CONTENT ENDS*/ .contact-strapline{float: left; display: block; width: 1200px; text-align: center; margin: 30px 0px 30px 0px;} .contact-strapline h3 {color: #050506; font-family: 'Kanit', sans-serif; font-size: 47px; font-style: normal; font-weight: 700;} .contact-strapline h4 {font-family: 'Kanit', sans-serif; font-size: 40px; font-style: normal; font-weight: 600; background: linear-gradient(123deg, #DD0374 9.28%, #810DE0 50.81%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; line-height: 47px;} /******************************************************************************************************/ /*MAIN HOME PAGE SERVICES RIGHT STARTS*/ .hprdshd-right{float: right; width: 585px; color: #050506; font-family: 'Kanit', sans-serif; font-size: 24px; font-style: normal; font-weight: 400; line-height: 130%; /* 31.2px */} .lrboxholder{float: right; width: 585px; margin-bottom: 20px; background-color: #fff; border-bottom-right-radius: 12px; border-top-right-radius: 12px; box-shadow: 0 8px 6px -6px #ccc;} .lrleft{float: left; width: 290px;} .lrright{float: right; width: 250px; padding: 120px 20px 0px 20px; height: 130px;} .rbut-one2{float: left; width: 535px; display: block; padding: 50px 24px; background: #FFF; border-radius: 12px; background-image: url("../images/hp/guarantee.jpg"); background-position: right; background-repeat: no-repeat; color: #050506; font-family: 'Kanit', sans-serif; font-size: 25px;} /******************************************************************************************************/ /*INSIDE CONTENT HEADER TITLE*/ .top-copy-holder{float: left; width: 1200px; display: block; margin-bottom: 60px;} .top-copy-holder hr { display: block; height: 1px; border-top: 1px dashed #ccc; margin: 1.5em 0; padding: 0; border-bottom: 0; border-right: 0; border-left: 0; float: left; width: 100%; } .cbbheader{float: left; width: 1200px; text-align: center; display: block; margin-bottom: 40px;} .cbbheader h3{font-family: 'Kanit', sans-serif; font-size: 32px; font-style: normal; font-weight: 600; line-height: 150%; /* 48px */ background: linear-gradient(123deg, #DD0374 9.28%, #810DE0 50.81%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .cbbheader h2{text-align: center; font-family: 'Roboto', sans-serif; font-size: 45px; font-style: normal; font-weight: 700; line-height: 53px; background: linear-gradient(123deg, #DD0374 9.28%, #810DE0 50.81%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .top-copy-holder p{color: #050506; font-family: 'Roboto', sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 27px; display: block; margin-bottom: 30px;} .topcopy-strapline{color: #050506; font-family: 'Roboto', sans-serif; font-size: 18px; font-style: normal; font-weight: 700; line-height: 27px; display: block; margin-bottom: 20px;} /*Controls sub header paragraph copy inside pages section*/ .sub-paragraph{float: left; width: 1000px; display: block; padding: 0px 100px; margin-bottom: 30px;} .sub-paragraph h3{font-family: 'Roboto', sans-serif; font-size: 28px; font-style: normal; font-weight: 600; line-height: 35px; display: block; margin-bottom: 20px; background: linear-gradient(123deg, #DD0374 9.28%, #810DE0 50.81%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .sub-paragraph h4{font-family: 'Roboto', sans-serif; font-size: 22px; font-style: normal; font-weight: 600; line-height: 30px; display: block; margin-bottom: 10px; color: #E3177A;} .sub-paragraph li{color: #050506; font-family: 'Roboto', sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 27px; display: block; margin-bottom: 10px;} .sub-paragraph ul{margin-bottom: 40px;} .sub-paragraph a{color: #E3177A; text-decoration: underline;} /******************************************************************************************************/ /*COPY BLOCK CONTENT STARTS*/ #cbnp{float: left; width: 1100px; padding: 20px 0px; } .copy-blocks{float: left; width: 1100px; padding: 50px; margin-bottom: 20px;} .cbl{float: left; width: 530px;} .cbr{float: right; width: 530px;} .cbimg-pushl{float: left; width: 530px; padding-top: 10px;} .cbimg-pushr{float: right; width: 530px; padding-top: 10px;} .cbcopyl{float: left; width: 530px;} .cbcopyr{float: right; width: 530px;} .cbcopyl ul, .cbcopyr ul{ list-style-position: inside; list-style-type: none; margin-bottom: 30px;} .cbcopyl li, .cbcopyr li{color: #050506; display: block; margin-bottom: 10px; font-family: 'Roboto', sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; /* 27px */ } .copy-blocks h3{color: #E3177A; font-family: 'Roboto', sans-serif; font-size: 22px; font-style: normal; font-weight: 700; display: block; margin-bottom: 10px;} .copy-blocks h4 {font-family: 'Kanit', sans-serif; font-size: 40px; font-style: normal; font-weight: 600; color: #810DE0; display: block; margin-bottom: 20px; line-height: 45px;} .copy-blocks h5{color: #050506; font-family: 'Roboto', sans-serif; font-size: 22px; font-style: normal; font-weight: 600; line-height: 27px; /* 36px */ display: block; margin-bottom: 10px;} .copy-blocks p{font-family: 'Roboto', sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; /* 27px */ display: block; margin-bottom: 30px;} .copy-blocks p strong{font-family: 'Roboto', sans-serif; font-weight: 600;} .copy-blocks hr{ display: block; height: 1px; border-top: 1px solid #dadad9; margin: 1.8em 0; padding: 0; border-bottom: 0; border-right: 0; border-left: 0;} .cb-strap{font-family: 'Roboto', sans-serif; font-size: 22px; font-style: normal; font-weight: 600; line-height: 30px; /* 27px */ display: block; margin-bottom: 25px;} .img-radius{border-radius: 12px; margin-bottom: 20px;} .img-blog{border-radius: 12px; margin: 30px 0px;} .sub-header{font-family: 'Kanit', sans-serif; font-size: 32px; font-style: normal; font-weight: 600; line-height: 39px; background: linear-gradient(123deg, #DD0374 9.28%, #810DE0 50.81%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: 64px;} .multi-color-copyp{ color: #E3177A; font-family: 'Kanit', sans-serif; font-size: 52px; font-style: normal; font-weight: 700; line-height: 63px; /* 67.2px */} .multi-color-copyb{ color: #050506; font-family: 'Kanit', sans-serif; font-size: 52px; font-style: normal; font-weight: 700; line-height: 63px; /* 67.2px */ margin-left: 5px;} .cta-black a{border-radius: 8px; background: #050506; display: inline-block; width: 220px; color: #F8F7FC; font-family: 'Roboto', sans-serif; font-size: 16px; font-style: normal; font-weight: 700; padding: 10px 40px 10px 20px; background-image: url("../images/icons/cta-arrow.png"); background-position: 95% 45%; background-repeat: no-repeat; margin-top: 20px;} .cta-black a:hover{background: #E3177A; background-image: url("../images/icons/cta-arrow.png"); background-position: 95% 45%; background-repeat: no-repeat;} /*COPY BLOCK CONTENT ENDS*/ /******************************************************************************************************/ /*BLOG NAV CONTENT STARTS*/ .date{ color: #666; display: block; padding: 15px 0px; margin: 15px 0px 30px 0px; border-bottom: dashed 1px #ccc; border-top: dashed 1px #ccc; font-family: 'Kanit', sans-serif; font-size: 20px; } .blog-nav h3{font-family: 'Kanit', sans-serif; font-size: 35px; font-style: normal; font-weight: 700; line-height: 42px; background: linear-gradient(114deg, #DD0374 7.21%, #810DE0 89.14%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: 40px;} .blleft{width: 550px; float: left; text-align: left;} .blright{width: 550px; float: right; text-align: left;} .blog-nav li a{color: #050506; font-family: 'Kanit', sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 24px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: dashed 1px #ccc; display: block; background-image: url("../images/icons/vert-tabs-on.png"); background-position: 100% 20%; background-repeat: no-repeat; padding-right: 30px;} .blog-nav li a:hover{color: #E3177A; background-image: url("../images/icons/vert-tabs-ov.png");} /******************************************************************************************************/ /*BOOK APPOINTMENT STARTS STARTS*/ .book-appointment{width:1200px; float: left; display: flex; align-items: center; align-self: stretch; border-radius: 12px; background: #EBEAEF; margin-bottom: 60px;} .baimg{float: left; width: 444px; height: 440px;} .book-appointment-right{float: left; display: flex; padding: 48px; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0;} .book-appointment-right h3{font-family: 'Kanit', sans-serif; font-size: 35px; font-style: normal; font-weight: 700; line-height: 42px; background: linear-gradient(114deg, #DD0374 7.21%, #810DE0 89.14%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: 20px;} .book-appointment-right h4{color: #050506; font-family: 'Roboto', sans-serif; font-size: 20px; font-style: normal; font-weight: 600; line-height: 27px; margin-bottom: 15px;} .book-appointment-right p{color: #050506; text-align: left; font-family: 'Roboto', sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 27px;margin-bottom: 15px;} /*BOOK APPOINTMENT STARTS ENDS*/ /******************************************************************************************************/ /*OFFER SECTION STARTS*/ .offer-section{float: left; width: 1200px; height: 313px; padding: 30px 0px; text-align: center; border-radius: 12px; margin-bottom: 60px; background-image: url("../images/hp/offer-background.png");} .offer-section h3{ color: #F8F7FC; font-family: 'Kanit', sans-serif; font-size: 35px; font-style: normal; font-weight: 700; display: block; margin-bottom: 10px;} .offer-section h4{color: #F8F7FC; font-family: 'Kanit', sans-serif; font-size: 24px; font-style: normal; font-weight: 400; display: block; margin-bottom: 15px;} .offer-section p{color: #F8F7FC; font-family: 'Roboto', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 27px; display: block; margin-bottom: 10px;} /******************************************************************************************************/ /*HOME PAGE REVIEWS SECTION STARTS*/ .revhold{float: left; width: 1200px; padding: 0px; margin-bottom: 0px; border-radius: 12px; background: #EBEAEF;} .revhold-left{float: left; width: 600px; padding: 50px 0px 50px 50px; margin-right: 50px;} .revhold-right{float: left; width: 440px;} .revhold h3{ font-family: 'Kanit', sans-serif; font-size: 40px; font-style: normal; font-weight: 700; line-height: 47px; /* 48px */ background: linear-gradient(114deg, #DD0374 7.21%, #810DE0 89.14%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: 24px; } .revhold h4{color: #050506; font-family: 'Roboto', sans-serif; font-size: 24px; font-style: normal; font-weight: 600; line-height: 32px; /* 36px */ display: block; margin-bottom: 24px;} .revhold p{color: #050506; font-family: 'Roboto', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 27px; display: block; margin-bottom: 10px;} /******************************************************************************************************/ .trustindex{float: left; width: 1200px; padding-top: 50px; margin-bottom: 30px;} /********************WHAT WE DO SECTION STARTS*****************************/ .wwdo-section{width: 1200px; float: left; margin-bottom: 60px;} .wwdo-section-title{text-align: center; width: 1200px; float: left; margin-bottom: 40px;} .wwdo-section-title h3{font-family: 'Kanit', sans-serif; font-size: 32px; font-style: normal; font-weight: 600; line-height: 150%; /* 48px */ background: linear-gradient(123deg, #DD0374 9.28%, #810DE0 50.81%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} /*NEW ACCORDIAN CONTENT STARTS*/ .accordionButton { width: 1200px; float: left; _float: none; /* Float works in all browsers but IE6 */ cursor: pointer; border: solid 1px #F8F7FC; padding: 10px 0px; margin-bottom: 6px; -webkit-transition: 300ms linear 0s; -moz-transition: 300ms linear 0s; -o-transition: 300ms linear 0s; transition: 300ms linear 0s; outline: 0 none; text-decoration: none; background-image: url(../images/icons/image1.png); background-position: 100% 50%; background-repeat: no-repeat; background-color: #F8F7FC; font-family: 'Roboto', sans-serif; color: #737275; font-size: 24px; font-weight: 700;} .accordionContent { width: 1200px; float: left; _float: none; /* Float works in all browsers but IE6 */ margin-bottom: 10px; padding: 20px 0px; } .on { background: #F8F7FC; border: solid 1px #F8F7FC; background-image:url("../images/icons/image3.png"); background-position: 100% 50%; background-repeat: no-repeat; color: #E3177A;} .over { background: #F8F7FC; border: solid 1px #F8F7FC; color: #E3177A; background-image: url(../images/icons/image2.png); background-position: 100% 50%; background-repeat: no-repeat;} .accordionContent h3{font-family: 'Kanit', sans-serif; font-size: 22px; font-style: normal; font-weight: 400; line-height: 150%; display: inline-block; margin-bottom: 20px;} /*************************WHAT WE DO BOTTOM SECTION STARTS*******************************/ .wwdo-bottom-holder{float: left; width: 100%; margin: 40px 0px 0px 0px;} .wwdob-left{float: left; width: 660px; padding: 40px; background-color: #EBEAEF; border-radius: 12px;} .wwdob-left h4{font-family: 'Kanit', sans-serif; font-size: 30px; font-style: normal; font-weight: 600; background: linear-gradient(118deg, #DD0374 0%, #810DE0 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: 10px;} .wwdob-left h5{color: #050506; font-family: 'Roboto', sans-serif; font-size: 22px; font-style: normal; font-weight: 500; line-height: 27px; /* 36px */ display: block; margin-bottom: 18px;} .wwdob-left p{color: #050506; font-family: 'Roboto', sans-serif; font-size: 15px; font-style: normal; font-weight: 400; line-height: 22px; display: block; margin-bottom: 10px;} .wwdob-left li a{border-radius: 8px; background: #050506; display: inline-block; width: 250px; color: #F8F7FC; font-family: 'Roboto', sans-serif; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ padding: 10px 40px 10px 20px; background-image: url("../images/icons/cta-arrow.png"); background-position: 95% 45%; background-repeat: no-repeat; margin-top: 15px;} .wwdob-left li a:hover{background: #E3177A; background-image: url("../images/icons/cta-arrow.png"); background-position: 95% 45%; background-repeat: no-repeat;} .wwdob-leftl{float: left; width: 320px;} .wwdob-leftr{float: right; width: 320px;} .wwdob-right{float: right; width: 350px; height: auto; background-image: url("../images/hp/services_starlink-satellite-broadband.jpg"); background-repeat: no-repeat; padding: 50px 40px; background-color: #30084f; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;} .wwdob-right h4{font-family: 'Kanit', sans-serif; font-size: 30px; line-height: 35px; font-style: normal; font-weight: 600; color: #C897E8; margin-bottom: 15px;} .wwdob-right h5{color: #fff; font-family: 'Roboto', sans-serif; font-size: 22px; font-style: normal; font-weight: 500; line-height: 27px; /* 36px */ display: block; margin-bottom: 24px;} .wwdob-right p{color: #fff; font-family: 'Roboto', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 27px; display: block; margin-bottom: 10px;} /******************************************************************************************************/ /*MAKE THAT CONNECTION SECTION STARTS STARTS*/ .mtchold{float: left; width: 1150px; padding: 80px 50px 80px 0px; background: #050506; border-radius: 16px;} .mtchold-left{float: left; width: 500px; margin: 20px 0px 0px 50px; } .mtchold-right{float: right; width: 500px;} .mtchold h3{font-family: 'Kanit', sans-serif; color: #a44fa9; font-size: 40px; font-style: normal; font-weight: 700; line-height: 47px; /* 48px */ display: block; margin-bottom: 25px;} .mtchold h4{color: #cdb1da; font-family: 'Roboto', sans-serif; font-size: 24px; font-style: normal; font-weight: 600; line-height: 32px; /* 36px */ display: block; margin-bottom: 18px;} .mtchold p{color: #F8F7FC; font-family: 'Roboto', sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 27px; display: block; margin-bottom: 10px;} .cta-grad a{border-radius: 8px; background: #a44fa9; display: inline-block; width: 230px; color: #F8F7FC; font-family: 'Roboto', sans-serif; font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; /* 24px */ padding: 10px 50px 10px 20px; background-image: url("../images/icons/cta-arrow.png"); background-position: 95% 45%; background-repeat: no-repeat; margin-top: 20px;} .cta-grad a:hover{background: #E3177A; background-image: url("../images/icons/cta-arrow.png"); background-position: 95% 45%; background-repeat: no-repeat;} /************************************BOOK APOOINTMENT STARTS******************************************************************/ /*BOOK APPOINTMENT FORM BEGINS HERE*/ /*Book Appointment Starts Here*/ .book_appointment{ width: 1080px; float: left; padding: 60px; background-color: #fff; margin-bottom: 60px; border-radius: 16px;} .book-left{ width: 540px; float: left; padding: 0px 15px 10px 0px;} .book_appointment h3{ font-family: 'Kanit', sans-serif; font-size: 50px; font-style: normal; font-weight: 600; line-height: 55px; margin-bottom: 20px; background: linear-gradient(123deg, #DD0374 9.28%, #810DE0 50.81%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .book_appointment h4{font-family: 'Roboto', sans-serif; color: #363637; font-size: 22px; font-weight: 300; display: block; margin-bottom: 20px;} .book-left p{ font-family: 'Roboto', sans-serif; font-size: 18px; font-style: normal; font-weight: 300; line-height: 27px; /* 27px */ display: block; margin-bottom: 30px;} .basub{font-family: 'Roboto', sans-serif; color: #E3177A; font-style: normal; font-weight: 500; font-size: 18px; line-height: 27px; display: block; margin-bottom: 25px;} .book-form{ width: 500px; float: right; margin-top: 15px;} .book_appointment a{ width: 460px; float: left; padding: 15px 20px; background-color: #050506; color: #EB71AE; border: solid 1px #050506; font-size: 20px; font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 400; line-height: 25px; border-radius: 15px; background-image: url("../images/icons/ba-arrow-on.png"); background-position: 98% 45%; background-repeat: no-repeat;} .book_appointment a:hover{background-color: #EB71AE; color: #050506; border: solid 1px #EB71AE; background-image: url("../images/icons/ba-arrow-ov.png"); background-position: 98% 45%; background-repeat: no-repeat;} /*below turns of blue border around formfields*/ .book_appointment input:focus { border-color: #E3177A; box-shadow: 0 0 10px #E3177A; webkit-transition: 200ms linear 0s; -moz-transition: 200ms linear 0s; -o-transition: 200ms linear 0s; transition: 200ms linear 0s; outline: 0 none; text-decoration: none;} /*below turns of blue border around textarea in form*/ .book_appointment textarea:focus { border-color: #E3177A; box-shadow: 0 0 10px #E3177A; webkit-transition: 200ms linear 0s; -moz-transition: 200ms linear 0s; -o-transition: 200ms linear 0s; transition: 200ms linear 0s; outline: 0 none; text-decoration: none;} .g-recaptcha{ float: left; margin: 0px 0px 20px 0px;} /*-------------------------------TRANSPARENT INPUT STARTS-------------------------------------------------*/ .book-form input{float: left; width: 460px; margin-bottom: 15px; padding: 12px 20px; border: solid 1px #050506; background: transparent; font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 300; font-size: 20px; line-height: 25px; color: #050506; border-radius: 15px;} /*-------------------------------TRANSPARENT TEXTAREA STARTS-------------------------------------------------*/ .book-form textarea{ float: left; width: 460px; height: 140px; margin-bottom: 20px; padding: 10px 20px; border: solid 1px #050506; background: transparent; font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 300; font-size: 20px; line-height: 25px; color: #050506; border-radius: 15px;} /*BOOK APPOINTMENT FORM ENDS HERE*/ /****************************************AREAS WE COVER PAGE CONTENT STARTS**************************************************************/ .awc-section{width: 1100px; float: left; margin: 0px 0px 60px 50px;} .awc-section-title{text-align: center; width: 1100px; float: left; margin-bottom: 40px;} .awc-section-title h3{font-family: 'Kanit', sans-serif; font-size: 32px; font-style: normal; font-weight: 600; line-height: 150%; /* 48px */ background: linear-gradient(123deg, #DD0374 9.28%, #810DE0 50.81%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} /*NEW ACCORDIAN CONTENT STARTS*/ .accordionButton2 { width: 1060px; float: left; _float: none; /* Float works in all browsers but IE6 */ cursor: pointer; border: solid 1px #CDCDCD; padding: 10px 20px; margin-bottom: 10px; -webkit-transition: 300ms linear 0s; -moz-transition: 300ms linear 0s; -o-transition: 300ms linear 0s; transition: 300ms linear 0s; outline: 0 none; text-decoration: none; background-image: url(../images/icons/image1.png); background-position: 100% 50%; background-repeat: no-repeat; background-color: #F8F7FC; font-family: 'Roboto', sans-serif; color: #737275; font-size: 24px; font-weight: 700; border-radius: 12px;} .accordionContent2 { width: 1060px; float: left; _float: none; /* Float works in all browsers but IE6 */ margin-bottom: 10px; padding: 20px 20px; } .on { background: #F8F7FC; border: solid 1px #F8F7FC; background-image:url("../images/icons/image3.png"); background-position: 100% 50%; background-repeat: no-repeat; color: #E3177A;} .over2 { background: #F8F7FC; border: solid 1px #F8F7FC; color: #E3177A; background-image: url(../images/icons/image2.png); background-position: 100% 50%; background-repeat: no-repeat;} .accordionContent2 h3{font-family: 'Kanit', sans-serif; font-size: 22px; font-style: normal; font-weight: 400; line-height: 150%; display: inline-block; margin-bottom: 20px;} .awcblocks{width: 220px; float: left; display: block; margin-bottom: 30px; margin-right: 30px; margin-left: 15px;} .awcblocks li a{font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 400; font-size: 15px; display: block; margin-bottom: 10px; color: #050506;} .awcblocks li a:hover{color: #E3177A;} /*ACCORDIAN LANDING PAGE OTHER SERVICES CONTENT STARTS*/ .lpawc-section{width: 1100px; float: left; margin: 40px 0px 10px 0px; padding: 50px; background-color: #FFF; border-radius: 16px;} .lpawc-section-title{text-align: center; width: 1100px; float: left; margin-bottom: 40px;} .lpawc-section-title h3{font-family: 'Kanit', sans-serif; font-size: 32px; font-style: normal; font-weight: 600; line-height: 150%; /* 48px */ background: linear-gradient(123deg, #DD0374 9.28%, #810DE0 50.81%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .osleft{width: 500px; float: left;} .osright{width: 500px; float: right;} .osleft hr, .osright hr{ display: block; height: 1px; border-top: 1px dashed #ccc; margin: 1.5em 0; padding: 0; border-bottom: 0; border-right: 0; border-left: 0;} .osleft h5, .osright h5{ color: #E3177A; font-size: 18px; margin-bottom: 15px; font-family: 'Kanit', sans-serif; font-weight: 600;} .osleft li a, .osright li a{font-family: 'Roboto', sans-serif; font-style: normal; font-weight: 400; font-size: 16px; display: block; margin-bottom: 15px; color: #737275;} .osleft li a:hover, .osright li a:hover{color: #050506;} .osleft li a#active,.osright li a#active {color: #ED9C2A;} /******************************************************************************************************/ .accreds{float: left; width: 1200px; padding: 30px 0px; background-color: #fff; margin: 30px 0px; border-radius: 16px;} /******************************************************************************************************/ /*FOOTER STARTS HERE*/ /*Footer Content Starts*/ .footer{float: left; width: 1200px;} .ftop{float: left; width: 1100px; background: #fff; padding: 40px 50px;} .flogos-tels{float: left; width: 1100px; border-bottom: 0.5px solid #dadad9;} .flogo{float: left; width: 250px; height: 75px; margin-bottom: 6px;} /*Footer Telephone Content Starts*/ .ftelsh{float: right; width: 528px; margin-bottom: 15px;} .ftelh1{float: left; width: 254px; } .ftelh2{float: right; width: 254px;} .ftelhl{float: left; width: 60px; margin-right: 10px;} .ftelhr{float: right; width: 184px;} .gtel{font-family: 'Kanit', sans-serif; font-style: normal; font-weight: 500; color: #050506; font-size: 24px; display: block; margin-bottom: 5px;} .graytel{font-family: 'Kanit', sans-serif; font-style: normal; font-weight: 500; color: #E3177A; font-size: 24px; display: block; margin-bottom: 5px;} .graytel a{color: #E3177A;} /*Footer Telephone Content Ends*/ /*Footer Lists Start*/ .fstrips{float: left; width: 1100px; margin-top: 30px;} .fcols{float: left; width: auto; display: inline-block; margin-right: 80px;} .fcols h4{font-family: 'Kanit', sans-serif; font-style: normal; font-weight: 600; font-size: 15px; line-height: 30px; color: #E3177A; text-transform: uppercase;} .fcols li a{font-family: 'Kanit', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 30px; color: #a4a4a4; text-transform: uppercase;} .fcols li a:hover{color: #050506;} .fcolsr{float: right; width: auto; display: inline-block; } .fcolsr h4{font-family: 'Kanit', sans-serif; font-style: normal; font-weight: 600; font-size: 15px; line-height: 20px; color: #E3177A; text-transform: uppercase;} .fcolsr p{font-family: 'Kanit', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: #a4a4a4;} /*Footer Lists Ends*/ /*Footer Bottom Section Starts*/ .footerbot{float: left; width: 1100px; background: #fff; padding: 30px 50px 0px 50px;} .fblisth{float: left; width: 400px;} /*Footer Bottom Section ends*/ .legal{float: left; width: 1100px; border-top: 0.5px solid #dadad9; margin-top: 25px;} .legalr{float: left; width: 600px; margin:20px 0px;} .legalr p{font-family: 'Kanit', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 15px; color: #050506;} .legall{float: right; width: 300px; margin:20px 0px; text-align: right;} .legall a{font-family: 'Kanit', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 15px; color: rgba(255, 255, 255, 0.7);} .legall a:hover{color: #91C846;} /*Footer Content Ends*/ /*Trust Pilot Starts Here*/ .ftrust{float: right; width: 250px;} /*Trust Pilot Reviews Page Starts Here*/ .trust-paragraph{float: left; width: 1000px; display: block; padding: 0px 100px; text-align: center; margin: 20px 0px 80px 0px;} .trust-paragraph p{font-family: 'Roboto', sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; /* 27px */ display: block; margin-bottom: 30px;} .trust-paragraph h4{font-family: 'Kanit', sans-serif; font-size: 40px; font-style: normal; font-weight: 600; background: linear-gradient(123deg, #DD0374 9.28%, #810DE0 50.81%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 47px; display: block; margin-bottom: 20px;} /*Credit Cards Starts Here*/ .creditcards{float: left; width: 1100px;} .creditcards p{font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-size: 12px; line-height: 17px; color: #666; display: block; margin-bottom: 5px;} /*Social Media Starts Here*/ .facebook{ width: 55px; float: left; height: 55px; margin-right: 33px;} .facebook img:hover { opacity: 0.5; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;} .instagram{ width: 55px; float: left; height: 55px; margin-right: 33px; } .instagram img:hover { opacity: 0.5; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .linkedin{ width: 55px; float: left; height: 55px;} .linkedin img:hover { opacity: 0.5; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .fsocial_media{ width: 231px; float: left; margin-top: 60px; margin-left: 45px; } /*************************************SITEMAP BEGINS*****************************************************************/ .sitemap-holder{float: left; width: 1200px; margin: 30px 0px 50px 0px; text-align: center;} .sitemap-holder h3{color: #E3177A; font-family: 'Kanit', sans-serif; font-size: 25px; font-style: normal; font-weight: 400; display: block; margin-bottom: 20px;} .sitemap-holder h5{color: #050506; font-family: 'Kanit', sans-serif; font-size: 20px; font-style: normal; font-weight: 400; display: block; margin-bottom: 15px;} .sitemap-holder ul{ display: block; margin-bottom: 50px;} .sitemap-holder li a{font-family: 'Kanit', sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 30px; color: #a4a4a4; text-transform: uppercase; display: block; margin-bottom: 15px;} .sitemap-holder li a:hover{color: #E3177A;} /******************************************************************************************************/ /* |-------------------------------------------------------------------------- | UItoTop jQuery Plugin 1.2 | http://www.mattvarone.com/web-design/uitotop-jquery-plugin/ |-------------------------------------------------------------------------- */ #toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:100%; background:url(../ui.totop.png) no-repeat left top; } #toTopHover { background:url(../ui.totop.png) no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } #toTop:active, #toTop:focus { outline:none; } /*aligns cookies left*/ .cc-banner{ text-align: left;}